Code with Kristian • I make videos and write about software development and programming tools
A brief guide to understanding Svelte.js ⚡️
🎓 What is it?
Cybernetically enhanced web apps.
⌛ The past
The frontend development world is dominated right now by frameworks. React is the most popular, but a number of "single-page" frameworks exist—where the tool is responsible for reading and writing to the DOM in order to compose a user interface.
Compilers are the new frameworks. Tom Dale posits that the compilers are where we should focus our efforts to see compounding returns in frontend performance:
📌 Right now
Svelte is a build-time framework. You're still writing components like in React or Vue, but instead of compiling them in browser, Svelte compiles them for you into a single bundle.js file at compilation time.
Because Svelte compiles your application, it can optimize for building imperative code that can reach in and update individual pieces of your application without needing to do complicated virtual DOM operations.
Ryan Atkinson summarizes this approach and how Svelte feels different in "Why Svelte":
Svelte components are a thin layer over the DOM and naturally expose the web platform. Coding in Svelte feels like I’m moving with the grain of the web. React abstracts the DOM with functionally pure declarative rendering and provides escape hatches back to mutable imperative DOM land.
That being said, compilers aren't necessarily a magic bullet. Compilers are themselves a complex software project, and even if it simplifies your frontend application, there's still complexity somewhere. From the same article as above:
Compilers may appear to magically eliminate complexity, but that’s an illusion — they shift it. The compiler architecture moves complexity from the runtime and source code to build time and tools. Behind Svelte’s simple APIs sits a beefy compiler.
📈 What's next?
Earlier this year, Svelte landed first-class TypeScript support. It was contributed via a TypeScript maintainer and a number of Svelte community members.
Svelte continues to grow in mindshare and popularity. In 2019's "State of JS" survey, almost 75% of surveyed developers had heard of Svelte, 45% had heard of Svelte and wanted to use it, and 7% had used it.
🤔 Why it matters
I'm excited and interested in Svelte because I think that it presents a really different philosophy to building frontend applications. It's good for the framework space to have diversity, and Svelte's approach to build-time components may end up being a great bet on developer experience that will help it grow into the framework of choice for frontend developers.
🙋♀️ Who to know
- Mozilla's collection of Svelte tutorials
- My Twitter thread where I asked for Svelte resources, guides, and who to know
- Egghead.io's free Svelte 3 course
- Rich Harris, Rethinking Reactivity
What did you think of Bytesized #2? Let us know by clicking a reaction below ⏬