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.
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.
1- What Is Svelte:
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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?
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!
An all-encompassing course put together by the same instructor who wrote their complete guides for Angular and React.
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.
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.