- February 1, 2021
- Posted by: Rupesh Raj
- Category: Blogs
The Svelte Handbook: The Detailed Guide
“The only way to go fast is to go well.”
-Robert C. Martin aka Uncle Bob
It is a well-known fact that react, angular, Vue etc. frameworks have taken the front-end development by storm. According to the stack overflow survey React is the most required industry skill today closely followed by Vue, React is also mentioned as the second most loved framework.
React’s virtual DOM was a game changer, the idea behind virtual DOM was to ensure a tree of elements which will update, as necessary. If you have been a developer using React for a while you sure would come across use cases where the state of the component did not update for some reason. You might then have to split the component or spend time on the stack overflow to figure out the bug in your application. This issue has risen because of React’s use of Virtual DOM. React’s reconciliation phase uses heuristics to bring down the time complexity from O(n3) to O(n). This all seems good and fancy but as Uncle Bob pointed out in one of his talks that the only way to go fast is to go well, maybe we can still do better than O(n) if we do it well, this was made possible by the technology Svelte created by Rich Harris.
Who can learn?
Jumping in the Code
There are generally two developer friendly ways of creating components, i.e., class based, and function based, in React. A developer can write multiple components in one single file. Each type of component facilitates all major features, so it is generally a developer’s preference on which one to use. Svelte on the other hand specifies that to create a component we need to declare a file with the extension. svelte, all files with this extension will then be converted to individual components at build time. It must be noted that having one component per file allows for a good code splitting. As shown in figure 1, it should be evident to the reader that a svelte file resembles a plain web page with styles and scripts in one place.
A very common tutorial for a frontend framework is how it ensures reactivity or updates for the elements being viewed in the DOM. As shown in figure 2, the code setup to create a button that increases the count. It is very evident that svelte syntax is close to vanilla js, while for react code shown in figure 3, we need to understand the framework agnostic terms such as props, state etc. It is important to realize that the fact here that react is fast but when the renders and computations increase, there starts to be an observable lag in the DOM. The experienced developers are good at using structural code which avoids such cases, but you do not have to worry about such things in svelte since it does not rely on any diffing algorithm running at runtime.
The best part about styles in svelte is that it scopes them as per the components. This provides greater developer productivity as they do not have to think twice before adding style rules. You can simply declare the styles in the same file, inside style tags. A closer look on figure 1, would allow the readers to notice, style tags with CSS for the elements in the component. As shown in figure 5, the generated CSS bundle upon compilation scopes out the styles to avoid adding styles from parents. It does this by creating svelte classes.
Animations are a major advantage in svelte since Svelte has a built-in support for high performance transitions and animations, which uses both CSS and JS as and when needed optimally. In contrast, React’s functional declarative model asks developers to declare what the UI looks like at individual snapshots in time. Therefore, React’s context performance is impacted. Hence it can be difficult to accomplish things like animations in React, especially without libraries, and high-performance React animation libraries often bail out of its rendering cycle to manipulate the DOM directly. These resources provide a great visualization of easing animations available with svelte, so that users do not have to start from scratch.
Svelte is an open-source project and isn’t backed by any corporate giant, many of the design decisions of svelte are inspired by Vue.js.
The idea of svelte is to move from runtime to compile time and is revolutionary and that opened a multitude of windows and application places. As far as component libraries are considered, svelte can be a game changer as it can generate vanilla components which can exist and work without any dependencies.
Currently, a lot of static websites are being developed using the template “Sapper” that uses svelte to generate pages. Svelte native is also being developed alongside svelte. Once completed this can be used with native script for development of native apps. More details on this project can be found here.
Since svelte is fast and performance friendly, IoT devices automatically become a great use case, as they are constrained by space and processing power.
Svelte as a technology is absolutely recommended for all those folks in front end technology who are looking for ways to decrease their bundle size. As far as developers experience is concerned, svelte is very good at handling CSS styles, since it scopes the styles out of the box and does not require any dependency. For developers who always use a library to implement animation, even they can start thinking about animating their components as svelte provides a declarative animation syntax with a small learning curve.
Pros and Cons
One of the biggest cons of svelte is that it does not have widespread support or big community per se. The technology is still in development. Although Svelte 3, written in typescript and released in April 2019, has been by far the most stable version. Svelte development flow has not been very linear, they have been trying and deprecating projects for a while now, for instance sapper was a project in the svelte community being used widely, it was recently deprecated in favor of another project svelte kit.
No matter the cons of svelte projects, the pros still outweigh the cons. It has been accepted as a fast and performant framework challenging all predecessors known till date. Rich Harris has been putting out speed plots for similar code snippets and every time svelte beats React. Because svelte is easy to learn makes us think of giving it a try at least for a weekend.
Svelte is going to take over the world by storm since it effectively mitigates all the shortcomings of its predecessors, at the same time being fast and performant. The only problem that is still left to address is the current support for the project. As a small community works on the project a lot of bugs persist in the project.
As a reader you can be rest assured our engineers have successfully used this technology in production and are looking to help those eyeing this technology for their used cases. Connect with us to know more.
Resources for reference
-How svelte’s idea can be revolutionary from https://dev.to/hanna/why-svelte-is-revolutionary-415e
-List of svelte related blogs: https://svelte.dev/blog
-Rich harris thoughts https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934
-A simple app in svelte https://blog.logrocket.com/how-to-build-a-simple-svelte-js-app/