Tutorials on Sveltejs

Before React.js and Vue.js came along, building large, maintainable web applications was still pretty hard. JavaScript files were hard to organize and deploy to production, and manipulating the DOM was painful. React and Vue turned front end developers into productive rock-stars, but utilizing a Virtual DOM in the browser incurs performance penalties. What if we could know how things would change in an app at build time, rather than waiting until run time to do the work? Enter Svelte.js. Svelte.js has many similarities to React and Vue but offers benefits that improve performance while being easy to learn and truly reactive. So what is Svelte.js, how does it work, and how does it compare overall to React and Vue? Just like React and Vue, Svelte is a JavaScript framework offering a productive approach for making frontend interfaces easy to build. The biggest technical advantage of Svelte is that it does the bulk of its work during a compile step, which means high performance, browser-friendly JavaScript with small bundle sizes. While Svelte's build process is the framework's biggest innovation, it is also very easy to learn, has fantastic documentation, and a great developer experience. The cornerstone of both React and Vue is that they process page updates with a Virtual DOM, reducing computationally heavy operations on the real DOM. However, this has a downside - virtual DOM operations need to be made in addition to operations that will be made on the real DOM eventually, which means performance penalties and potentially unnecessary work. Svelte's compile step results in the browser doing less work, pre-converting your app into vanilla JavaScript with no Svelte shipping runtime, framework, or library and no layers of abstraction between the app and the browser. Svelte is known as the vanishing framework because it is not present after the build process. If you think about it, it makes a lot of sense for a JavaScript framework to optimize the build step. After all, it is a one time process that can run on a developer workstation or a Continuous Integration (CI) machine and optimize the code before the first user ever interacts with it. Other frameworks utilize additional libraries and complex third-party solutions to manage state. Despite the number of solutions, as applications grow larger, it becomes harder to keep track of what was stored where. Props are supported, however Svelte also offers an easy approach to manage state within the framework, using the context API and Svelte Stores to accomplish application-wide state management. Svelte.js is easy to learn and use, and is similar to frameworks like React and Vue in that it uses a component-based architecture. Svelte's syntax is very easy to learn, particularly if you are already proficient with HTML, JavaScript, or another framework. Users estimate that you can pick up Svelte basics in one day. Svelte is most similar to Vue in terms of syntax because it uses templates and single file components whereas React uses JSX, however, you can typically achieve the same results with fewer lines of code than a Vue file because Svelte requires very little boilerplate. In a Svelte project, .svelte files are used to define single-file components. Keeping components in single files (organized in directories) with all the logic in one place helps keep even big projects maintainable. A .svelte file consists of a <script> section and any HTML markup you wish to use. You may notice the lack of boiler-plate, which makes the code very readable even for someone who has never used the framework. Here's a sample .svelte file. Any variable declared is automatically reactive and can be used in the markup with single curly braces {varName} . Because Svelte compiles into optimized JS files instead of JS, HTML, and CSS, it's lightning-fast compared to other frameworks. User tests show Svelte is around 30% faster than other common frameworks. Similarly, Svelte compiles code into small, optimized bundles of JavaScript, so it takes up less memory than other frameworks. Because of the compile step, Svelte can pick only the required pieces of code to update the DOM, resulting in an output that's up to 10X smaller than other frameworks, and faster loading times. Svelte has all the features you need to build rich, interactive web apps. Here's a quick rundown of key features. With its outstanding performance, easy syntax, and innovative compiler system, Svelte is rapidly gaining popularity and is set to be in the top 3 frameworks in the future. To learn more about what Svelte is and its many advantages, you can read the Svelte introductory blog post from the framework's author Rich Harris. This article is just the tip of the iceberg when it comes to Svelte. You can learn more with lots of interactive examples at the official Svelte.js tutorial . If you want to go even further with Svelte, you can learn how to build a full-stack web application with Svelte, Express, and PostgreSQL in our new Fullstack Svelte Course!