Earlier this year, I attended the Kansas City Developer Conference which drew a large audience of new and experienced developers, architects, UI/UX designers, QA professionals, PMs, and technology managers. There were a variety of sessions and hands-on workshops offered throughout the 3-day event. I had the opportunity to learn about new technologies and tools that are being used in the field today.
In this blog post, I want to focus on Svelte, a front-end, open-source JavaScript framework for making interactive webpages. The concept of Svelte is like those of existing frameworks (React, Vue) in that it allows developers to create web applications. However, Svelte offers several features that give developers a special experience.
The three key characteristics of Svelte that make it unique are
- Less code
- No virtual DOM (Document Object Model)
- Truly reactive
Svelte’s main objective is to assist developers in the creation of reactive apps. What is a reactive application? Anytime a value is altered within your application (for example, when a user inputs data), the Document Object Model (DOM) will immediately update to reflect the change. The HTML DOM is a standard object model and programming interface for HTML. It defines the following:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
Reactive applications are essential for modern day development since they enable updates to specific areas of a web page without refreshing the entire page. This represents a paradigm shift: Previously, if an application needed to update any section of a page, the entire page had to be loaded again. In most cases, this proves to be an expensive operation and suboptimal for user experience. Svelte flips this approach on its head and instead of using a virtual DOM, it will compile your code down to vanilla JavaScript at build time, so that only pure JS code that alters the DOM will make it to the browser.
Some of the advantages of using Svelte include but are not limited to:
- Less boilerplate code to write, in turn giving engineers more time to focus on creating solutions
- Creating reactive variables is as simple as adding $: at the beginning of the declaration
- Without the need for a virtual DOM, the applications can perform faster and more reliably
- Developers can incorporate styles mid-document that target a particular element and its children without using Cascading Style Sheets (CSS) by using scoped styling with JavaScript
- Lean solution for state management
- Applications built using Svelte tend to run faster than those built with other frameworks (React, Vue, Angular).
In discussing some of the benefits, I’d like to also highlight some of Svelte’s shortcomings:
- A growing community, but smaller when compared to the other frameworks
- A lack of Integrated development environment support
- Currently, a limited open-source ecosystem
To put it simply, Svelte is an easy on-ramp into web programming.
One key differentiator is that it requires less code. The less code a developer needs to write, the fewer mistakes can happen. This also reduces the rate of refactoring, level of maintenance, and introduction of bugs into the application.
Other differentiators are that Svelte is non-dependent on the virtual DOM, and that it includes reactivity.
One example of Svelte using less code but still getting the job done is a simple one. Let’s take a look at how we would write “Hello World” in Svelte.
We use a simple <script> tag that encloses the code written in JavaScript and below is a typical HTML heading tag, <h1>, that writes “Hello” and templates the name variable.
In React or Vue, this would take 30-40% more code to implement. Svelte doesn't limit the developer to just one additional top-level element. Plus, Svelte simplifies the updating of a variable’s local state by utilizing the assignment operator (=). In comparison, React requires using the useState hook which adds some overhead to the code.
React leverages the virtual DOM to update the state by comparing the snapshot of a previous tree of custom objects with the present one. Since Svelte is a compiler, a library is not needed to run the Svelte code in the browser. Instead, a JavaScript file is loaded on the page to render the application. Object updates are executed at compile time. This approach enables Svelte to minimize the amount of overhead produced by the virtual DOM.
Lastly, the Svelte framework integrates reactivity into the language. In terms of React or Vue, the developer needs to use hooks to update state, in turn creating unneeded work for the garbage collector in the JavaScript engine. Let’s look at a simple counter function in React.
In comparison Svelte takes this 65-character code snippet and turns it into the following 11 character code:
In closing, Svelte is an innovative and intuitive approach to JavaScript that enables rapid and responsive development. When it comes to efficiency and usability of your web application, Svelte should be at the top of the list of considerations.
I’m glad to be a part of a company that prioritizes professional development. Front-end development is constantly evolving and developers at Key Lime Interactive continue to make a difference through best practices and standards for their clients. Contact us to see how we can help with your next project.
Comments
Add Comment