The Svelte Handbook: The Detailed Guide

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 was open sourced in the year 2013, there were a lot of things which React did differently at that time, which resulted in React growing into a very popular language compared to its competitors. Some of these decisions were opting for component architecture, use of a new syntax extension of JavaScript i.e., JSX, using Virtual DOM to update the parts of the user interface etc. The component architecture allowed for reusability of front-end pieces, JSX ensured that developers could write JavaScript and html for a component at one single place and the use Virtual DOM along with reacts’ diffing algorithm made sure that browser did not reload the whole page but only parts that require update.

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.

Rich Harris gave a very beautiful talk on how we have been thinking about user interfaces all wrong. The first and foremost thing about Svelte is that contrary to React it lacks a virtual DOM or any runtime library, svelte instead chooses to shift all this to compile time. In more simple words, if you are using svelte you can assume you are dealing with vanilla JavaScript. React.js is the library you always ship with your code to ensure that your code runs. Svelte on the other hand is a compiler which looks at your code and compiles it into a vanilla JavaScript and that is the only thing you ship when you serve your application. It also ensures that you do not pay the performance cost of the framework’s abstractions.

Who can learn?

Anyone who has worked with JavaScript or JavaScript related frameworks can start with svelte. The tutorial set provided by svelte gives a good explanation of the concepts svelte uses all together. Having knowledge about events and nodes in DOM is a huge plus point for people who wants to learn this technology. Compared to React, Vue or Angular this framework has a small learning curve. 

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 word props is a special keyword in react and stands for properties. The idea is to provide a component with attributes or information that the component can directly use to render itself. A lot of time developers are confused while dealing with the word ‘this’. It is considered a tricky topic of JavaScript. Svelte has improvised on React’s idea of props and decreased the need of this keyword. As can be seen in figure 2, count is an exported prop, it can be passed when the component is instantiated as shown in figure 4. 

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. 

Community Support

The power of svelte to create vanilla JavaScript allows it to have zero dependencies, this is an important feature for sites that want to be futuristic but do not want to increase their bundle size.  Spotify, Ikea, NYTimes etc. currently use svelte at their landing page. Using svelte makes these sites decrease their time to interactive and thus provide a seamless experience. 

A lot of other companies have also started using svelte in their application, a list of such companies can be found here. Along with producing vanilla JavaScript, a great perk of svelte is its animation engine, which is far easier to use compared to other animation frameworks or libraries. Currently, a few companies working in the field of IoT, have started to look upon svelte for their devices, since svelte becomes ideal for use cases for small bundle sizes. 

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.

Application Area

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.

Recommendation

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.

Conclusion

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/