Use Svelte for Speed and Magic

Many web developers use JavaScript to make their websites responsive and reactive. With the advent of Node.js and npm, many devs have moved from simple static web pages to fully reactive apps that run in the browser. Enabled by the popular frameworks React, Vue, and Angular, web apps and SPAs are everywhere. While these frameworks simplify writing code for the browser, they still have their drawbacks. Enter Svelte.

Svelte overview

Svelte⁽¹⁾ is an open-source front-end compiler created by Rich Harris⁽²⁾ in 2016. Unlike other frameworks, which are monolithic libraries, Svelte is much simpler. Instead of using a Virtual DOM like React or an incremental DOM like Angular, Svelte parses the .svelte files and then generates a vanilla JavaScript file directly. So instead of spending valuable resources on an in-memory copy of the DOM and a diffing engine to update the webpage, the JavaScript code generated by the Svelte compiler interacts with the actual DOM.

The Svelte compiler makes use of an Abstract Syntax Tree (AST). The AST, basically a tree of parsed code, identifies the CSS, JavaScript, and HTML portions of the svelte template and compiles them into JavaScript and CSS files.

Svelte uses its own parser for HTML, Acorn for parsing the JavaScript inside the script tags, and CSS-tree to parse the CSS inside the style tags

How it works

First, Svelte creates a Component class instance. This class stores the HTML fragment, instance variables, reactive variables, slots, used variable names, compile options, instance and module script AST, and their lexical scopes. Once all the variables are identified, the Component traverses the AST and marks the variables as referenced.

Next, it traverses the template AST and creates fragment nodes for logic blocks, element nodes for element attributes, bindings, and event-handlers, slot nodes for rendering HTML inside a component, and each-block nodes for rendering arrays. Once the template is traversed, and all the variables used in it are referenced, it determines whether the variable needs to be reactive or not.

Finally, Svelte updates the CSS selectors and appends .svelte classes to the selectors to differentiate them. Svelte then creates code blocks and fragments based on its traversal. A render tree is then created with those blocks as nodes. The DOM Renderer then traverses the tree and calls a render function on each block. The SSR Renderer then inserts strings and expressions into the template. The render function then returns javascript and CSS to be bundled with either rollup or webpack. Since this code is generated at compile time, there is less work to do in the browser than with traditional front-end frameworks.

Magic the Gathering + Svelte

To learn more about Svelte, Jordan created an example app to share with the Revelry team. Since he enjoys playing the card game Magic the Gathering⁽³⁾, he built a Magic card fetcher app with Svelte⁽⁴⁾. This app uses the Svelte search feature to search for a card that hits the wonderful Scryfall API⁽⁵⁾ and then returns back a list of different cards that could possibly match the title of the card. After viewing the different cards, a user can select a card, see details about it, and add it to their collection.

The app uses the Svelte tools for a single page render, rendering different views conditionally, and the Svelte state to pass different saved views onto different pages. Since this is a demo, the session is stored in the browser’s memory, not hooked up to a database. Svelte made it very easy to get started building the app. The readability made it a very fun tool to learn and use.

Benefits

Svelte has technical advantages, including

• The ability to create Reactive Values, computed variables that update when the underlying data is changed,
• Easy to standup new projects
• Simple data binding with the bind attribute
• Since all of the heavy lifting of the DOM is done before compile time, applications are blazing fast.
• Extremely small bundle size. Compiled files from React can be ten times the size of a Svelte file.
• Svelte supports TypeScript and SvelteKit has TypeScript support built in.
• Readability and simplicity. What would take 23 lines of code in React takes only 9 in Svelte
• Scalability for large projects

Svelte is quickly becoming one of the most popular front-end Javascript frameworks. It has great docs⁽⁶⁾ and a cool online sandbox to try out code⁽⁷⁾. It’s also focused on being lightweight and readable. All of the logic, template, and style are in one easy-to-read file. According to the 2021 Stack Overflow Developer Survey, Svelte has an awareness ratio of 94%, a satisfaction of 90%, and it has grown in usage by over 150% in the last 2 years. With this kind of adoption and enthusiasm, the future only seems bright for Svelte.

References

Note: This article was adapted from Jordan Este’s presentation on Svelte at Revelry’s weekly engineering team meeting. 

1. https://svelte.dev/
2. https://twitter.com/rich_harris
3. https://magic.wizards.com/en
4. https://github.com/JordanAEstes/SvelteMagic
5. https://scryfall.com/docs/api
6. https://svelte.dev/docs
7. https://codesandbox.io/s/svelte