By Cicero Monteiro, Senior Fullstack Engineer at BairesDev
Building and maintaining web applications is far from an exact science. Software developers around the world struggle to define the best approach for each situation, having plenty to choose from in design patterns, architecture, and technologies involved in each project. These core concepts usually define how easy or hard software will be to deliver, maintain, and scale over time, all while keeping development ahead of schedule and under budget. Needless to say, it’s a lot to go about even before writing the first line of code.
To help tackle the increasing complexity of software development, several frameworks are often used to speed up development and cut costs. Many teams settle for the same tech after the secret sauce is tuned up, aiming their workflow toward frameworks and methodologies that keep them in check while being highly productive.
But how can one close their eyes to the ever-growing field of development frameworks? How can one not wonder what else is out there and how we can be even more productive? This is the exact scenario that got so much attention toward Svelte, a Javascript framework that took the developer community by storm, and it’s increasing its user base very quickly.
What is Svelte?
Svelte is a component-based Javascript framework created in 2016 by Rich Harris, loved by developers, and becoming increasingly popular. With Svelte, developers can write comfortable declarative applications that get rendered at build time as pure Vanilla Javascript, a native engine on every browser, making Svelte applications usually very fast, lightweight, and interactive.
Svelte uses a component approach (similar to React and Vue) to build applications while avoiding the use of virtual DOM, which isn’t essentially slow, but shipping pure Vanilla Javascript ensures a much better performance as it’s natively supported by every browser. Svelte also comes with a compiler that works on the server-side, saving client resources while rendering applications. With that approach, Svelte ships a high-performance code with a very small package, reducing boilerplate and cutting down on development time.
Svelte changes the game by using pure declarative Javascript/HTML instead of trying to reinvent the wheel, taking the proven component approach made popular by other frameworks and turning it into a pleasant experience, advancing the Javascript API limits in the process.
How does it look?
A Svelte file only needs three pieces: a script tag with the component logic and behavior, a style tag with the component’s local styles, and the HTML code itself, where it’s easy to wrap variables and methods around. A full example code is available here. There is no special language attached to it (no JSX or anything like it). The language it’s 100% declarative HTML, easy to write and maintain.
A quick look at a Svelte file
The resulting application is a reactive incremental count that manipulates state on the fly, out of the box, which is very useful for data-heavy apps.
Code result: a nice interactive application
Why should you use it?
Learning Curve
If you already know any Javascript component framework, you probably know Svelte as well. It follows the same concepts already implemented by others, while improving on the many caveats its predecessors had, making it pretty easy to train your front-end engineers to work with Svelte.
If you decide to try it and suddenly have to train fresh developers, Svelte offers a nice live tutorial to ease them into the concepts when all they need to know is HTML and Javascript. If your team already uses a Javascript component-based framework, the switch over to Svelte will most likely feel very natural.
Power and simplicity
Svelte is very enjoyable to use. It doesn’t depend on an event hook to update the application state; it shares props between components natively and reacts to any variable change. Developers can declare their components using pure HTML and wrap Javascript logic around them, reuse and import components around their codebase, react to state changes, share state throughout the application, and much more. Svelte also feels at home with Typescript, so choose your weapon!
Svelte is a great tool for prototyping due to its simplistic nature. I have used it in the past to make proof-of-concept apps and validate stakeholder ideas (or deny them).
Speed
Every Svelte application is shipped to the browser as Vanilla Javascript, saving processing power on the client side and increasing performance greatly. The final Svelte bundle is much smaller than other frameworks like React or Vue. Once your application is loaded, that’s it. The package size never changes, instead of re-rendering the Javascript code every time something changes (like React does).
Full package
Svelte comes with SvelteKit (which announced its stable V1 recently) that powers several server functionalities such as routing and server-side rendering. Much like NextJS for React or Vuex for Vue, it powers a full-feature application server with all the features you might need to develop and decouple your front-end applications.
Bundle Size
Svelte’s bundle size is just around 1.6KB when gzipped (React/Redux apps can easily reach between 1MB to 2MB in size). It generates less code because it does not use virtual DOM. This characteristic drastically reduces the boilerplate, as the application is rendered only once with all the necessary Javascript code ready to go, without the need for re-renders between state changes.
New Horizons
Svelte brings more than another fancy framework to keep developers occupied; it further entices the possibilities of new paradigms for the Javascript API and the future of the web as a whole. Proposals like these show that it is possible to have a highly productive development team, building and maintaining exciting applications, while being efficient and actually enjoying the development phases.
It does no good to have a nice and powerful framework to keep your team organized and productive, while your software development life cycle (SDLC) pays the price for a cumbersome development process that slows your entire company down. Imagine being able to fix bugs for your customer success team, deliver features and improvements for your product department, and keep minimal tech debt while actually enjoying your work, all ahead of schedule and under budget. This is the type of tech that helps businesses grow and expand their service offerings to consumers.
Some lifting to do
Despite its popularity among developers, Svelte still needs to prove commercial viability, and there is some work to be done. It is uncertain if more companies will adopt Svelte as their primary framework, but with more and more devs pushing the desire to work with it, it seems likely that the tipping point is near.
This is not to say that the framework isn’t improving quickly. Many features are being added, and bugs are fixed all the time, like specifying dynamic HTML tags using <svelte:element />. That being said, there are still a few things that Svelte devs would like to address:
- It’s annoying to pass class names as props, as React has the className keyword already.
- For Svelte it’s necessary to do a export { className as class } to use className keyword as class is a reserved namespace in JS ES6.
- Auto-forward events to a component’s children
- This feature is very useful in React where one can use props to send events to child components. Today this feature is proposed for Svelte but not yet implemented.
- Modify the <body> tag during render time when using SvelteKit SSR capabilities
- This is simply done in React by using onMount(() => {}); and it’s very useful to assess conditions right before the component is rendered.
None of these are real deal breakers, but they showcase how Svelte still has some time to mature. We can rest assured that the Svelte team is working hard to provide everything the devs ask for in a modern framework.
Conclusion
It might not suit every team or project, but the excitement around Svelte is well justified. One of the core aspects of software development is to push the boundaries of what is possible and how efficiently it can be delivered. Web development has been through a lot of change and experimentation, from its static roots and the flash 3D animated experiences to today’s responsive and reactive applications that know everything. The technological ladder is built on top of ideas and paradigms that shape our way of delivering what the user needs and wants because, in the end, that’s the whole point. Hopefully, approaches like Svelte bring us closer to new horizons and create new landscapes for the web we know and love.
