They say that two’s company, and three’s a crowd.
In this case, it’s the tried and tested duo that is Google’s Angular and Facebook’s React that are looking down their noses at the 3rd wheel that is Vue.js – obviously not catching onto any social cues or getting those not-so-subtle hints.
But there’s an awesome 4th wheel looking to balance the numbers and turn a failed romantic evening into a no pressure double date.
Introducing good guy Svelte – here to make everyone’s lives better. No need to thank him.
Overly jam-packed dating analogy aside, Svelte is definitely a contender. Watch this space as the new kid on the block shoulders their way into the big three of JavaScript frameworks – React, Angular and Vue.js – and makes it a fantastic four.
There’s plenty of hype and excitement around Svelte, a framework that was written by Rich Harris – who prior to that was a graphics editor. Considering that 99% of graphics editors wouldn’t know JavaScript if it bit them on the backside, that makes it all the more impressive.
He got the idea while working in Rollup. Now usually software packagers treat the JavaScript modules as giant strings, choosing to link together the chunks of bundleware by joining them onto the main program. Just a plain string would do, and all you needed is a term like define and a runtime that could answer to it.
Rollup worked in a slightly different way though, using an algorithm to transform the different hierarchical structures of the abstract syntax trees that make up the symbol tables used for compiling into one single abstract syntax tree. This singular algorithm took all the modules and treated them as variables with renamed duplicate identifiers. The end result resembled something that a programmer would have to do in order to get everything to work as a single file – only done automatically, which was awesome.
Rich Harris quickly became an expert at manipulating the abstract syntax trees of both the main program and bundleware as an optimization process done by the Acorn JavaScript parser, by converting the programs into an internal format that the runtime environment could actually run.
1- What Is Svelte:
Well, this Rich Harris developed JavaScript framework is actually a compiler first. Svelte uses primitive wrappers for standard vanilla JavaScript operations as a way to get around the fact that not all web browsers go about document object model (DOM) manipulation in the exact same way.
This process is completely divergent, a new approach to building user interfaces that is altogether different to how Angular, React and Vue do things. By building an application using the Svelte framework, the code generated is unique in the sense that it involves a compile step that happens when you actually build the app – instead of doing the bulk of the work in the browser itself.
A virtual DOM is used by the big three, which is only a representation of the DOM itself that is updated and changed by constantly comparing the previous version of the DOM to the current version. If there have been any changes, the virtual DOM then issues a batch update to the real DOM in order to refresh the user interface. This is state driven code that causes the browser to do extra work to convert the declarative structures into DOM operations – eating into both frame budget, and the garbage collector.
Svelte does away with what will eventually become archaic and outdated nonsense by writing code that surgically updates the DOM as soon as the state of the app is changed.
Svelte does this work at build time by converting all the components into highly efficient, imperative code that updates the user interface without any of the drawbacks associated with DOM diffing.
2- What Svelte Is Used For
In short, Svelte can be used anywhere and for anything you’d use Angular, React or Vue for.
It’s a JavaScript tool used for building fast web applications, with a big focus on super slick and interactive user interfaces that are not only incredibly easy to build within the Svelte framework, but are also highly code efficient – never a bad thing.
There’s no performance cost associated with the framework’s abstractions, nor is there that initial dip in performance when an app first opens that’s usually attributed to the DOM diffing version update checking process.
Better yet, there is the flexibility to either build the entire app in Svelte, or to add in segments incrementally to an already existing base of code. Components made in Svelte can operate as stand-alone packages that don’t require the overhead of a conventional framework dependency, and can be used anywhere really.
3- PROS
LESS CODE:
They say that less is more, and well… you really can’t have any less lines of code than what Svelte pumps out. Something that would take 20 lines to code in React, takes just 7 lines in Svelte.
The saving comes from Svelte not requiring any unnecessary imports, and not needing any additional knowledge about events. Less boilerplate, same result.
NO VIRTUAL DOM:
As we touched on, Svelte doesn’t require the virtual DOM needed by Angular, React and Vue to perform the DOM diffing necessary for updating the state of the user interface. Real DOM operations were very performant expensive, so virtual DOMS had to be created as a point of reference to both search for changes, and then apply them.
Svelte implements an algorithm that creates low level JavaScript functions that are all the information it needs to update the UI, as these functions contain all the logic – meaning substantially less re-renders of the UI.
TRUE REACTIVITY:
Unusually, in Svelte there isn’t an application programming interface, as it’s all done on a language level. As a result, the only thing necessary to make a variable reactive is to put a dollar sign ($) in front of it while coding. What this does is tell Svelte to recalculate the result as that particular value changes, changing the state of the app.
This is very different to something made in React, which needs DOM diffing to keep the state and reactivity of the app consistent – resulting in way more re-renders.
GREAT SSR:
Svelte’s server-side rendering is ridiculous. Load times are drastically reduced thanks to an implementation called Sapper, which treats each page as a component while providing offline support and code splitting to speed up the client-side rendering process.
SUPER EASY:
Although it’s new, Svelte does share syntax, state, reactivity, directive and its approach to components with other well known JavaScript frameworks and libraries. This means that Svelte has next to no learning curve for someone already familiar with JavaScript, meaning you don’t need to rehire developers – just give them a bit of time to become acquainted with Svelte instead.
SUPER FAST:
The added benefit of this gentle learning curve, the simplicity of the Svelte programming language, and the very skinny amount of code is that the development cycle is sped up by a fair margin.
MOBILE COMMUNITY
Just like an open-source programming language, the online community are nothing short of supportive. The Reddit and Discord servers are definitely worth a look and are jam packed full of friendly Svelte lovers ready and willing to help out where they can.
The other side of the coin is that Svelte is looking to roll out a mobile version of the framework called Svelte Native, so applications can be built for both mobile and web browsers and their native libraries.
4- CONS:
YOUTH:
React, Angular, and to a lesser degree, Vue, have been around for a while and are well known with huge communities – with base packages on NPM as well. By choosing Svelte just know that you’ll only have less than 1% of the base packages available compared to say, React – and that you’ll be writing your own implementation of the required libraries in most instances.
NO TYPE CHECKING
This is 2021, we’ve become accustomed to having type in our applications. This means less errors during code writing, the code and functions already being documented, and an overall faster development. There’s nothing like TypeScript included in Svelte, however it is in the update pipeline, and GitHub does have some third-party solutions.
SAME SYNTAX, DIFFERENT MEANING
As much as Svelte is very similar to other JavaScript frameworks, you have to remember that it’s still a different language. Though the variable names may be the same, they do different things in React than they do in Svelte. Best to have a cheat sheet out on a separate screen as a reference resource.
IT COMPILES
Because Svelte has this compiler step before it functions as a framework, if you choose to incorporate it into an app Svelte will add in the compiler first, which is a less performant way of doing things compared to other frameworks and libraries.
The other thing to watch out for is that while React will inform you about errors in the code writing phase by type checking, Svelte will actually let you compile your error-containing project.
IT’S NICHE
At present, there are no real roles specific to Svelte as a programming language. Though there is a shift towards its use, there is no demand for a specialist – in most cases, the current dev team are just re-trained to be able to use Svelte after coming from one of the other big three frameworks.
5 – WHICH COMPANIES ARE USING SVELTE
From a styling standpoint, Svelte is a very powerful transformation engine packed with all the modern tools you need to create truly beautiful applications that operate at a high performance.
With so many clear advantages over other application and user interface JavaScript frameworks, it’s actually quite a slow process of adoption by larger companies who are somewhat afraid of this new approach to app development.
In saying that, popular antivirus program Avast, the New York Times, electronics company Philips, and sporting equipment store Decathlon are just some of the big-name companies experimenting with using Svelte.
Want Our Opinion?
The ability for Svelte to have built in state management and reactivity, while amounting to less code, is an absolute game changer – it’s all built into the language and syntax. There’s almost no comparison to a traditional style JavaScript framework like Angular, React or Vue that uses virtual DOMs – Svelte is better in nearly every single way. There’s a quiet certainty that the ground-breaking methodology that Svelte utilizes will breed an entire new generation of JavaScript frameworks – so watch this space.
How To Start Learning Svelte
These are probably the 5 best Svelte resources that will get you well on your way, from beginner all the way to expert.
Head on down to the description for links to the courses!
1 – Svelte.js: The Complete Guide:
An all-encompassing course put together by the same instructor who wrote their complete guides for Angular and React.
2 – Svelte Tutorial and Projects Course:
Those who learn by doing will find great benefit in this course that focuses on how to build applications.
A more entry level course that focuses on beginner level Svelte learners.
4 – Svelte Crash Course:
Visual learners can do no better than checking out the tutorial on FreeCodeCamp’s YouTube channel.
5 – 2021 Svelte.JS: The Complete Guide:
To round out the list, a course that not only caters to the beginner, but also has a huge focus on advanced JavaScript framework developers.
Next Steps
We hope this article helped you learn more about Svelte and why you should give it a try!
If you enjoyed this article you may also enjoy Coffeescript and 5 Things You Need to Know About It or CNCF and 5 Things You Need to Know About It.
Kofi Group offers a multitude of resources to help you learn more, improve your career, and help start-ups hire the best talent. If you are interested in learning more get in touch today!