Introduction
Svelte is yet *another* SPA javascript frameworks in the ever-increasing list of the Javascript framework. Oops sorry, ignore the canned introduction for javascript frameworks. Svelte is not a framework but a compiler. Svelte compiles the component code for your SPA at build time to highly-optimized vanilla Javascript and this is what is run on your browser.
Unlike React that ships with a virtual DOM that has to calculated and reconciled every time applications state change in the browser’s runtime. Svelte at compile-time keeps track of state that might change the DOM and wherever a piece of state changes it “surgically” updates the DOM using DOM API like createElement & setAttribute.
The lack of a virtual DOM is one of the more significant features of Svelte, this means svelte ships less code to the client. Also Svelte is a compiler so unlike React it doesn’t ship framework-specific API like this.setState or useState that have to be parsed and executed on the browser’s runtime. Svelte code shipped to the client is pure vanilla javascript.
Svelte’s small bundle size, performance promises, and awesome developer experience are some of the reasons why it stands out from the crowd of javascript frameworks released every second.
In this article, we’ll look at how common features in React like state, props, components e.t.c are implemented in svelte.
