Svelte JS

JavaScript has been essential for creating appealing web content for a long time. However, to take advantage of it, web de­vel­op­ers first had to master the pro­gram­ming language, which is something that not everyone had the time or desire to do. Now, there are frame­works that allow de­vel­op­ers to execute JavaScript functions, even com­pli­cat­ed ones, au­to­mat­i­cal­ly. This reduces the amount of pro­gram­ming work sig­nif­i­cant­ly. At the same time, most frame­works place a heavy load on the browser. In this respect, Svelte is a fun­da­men­tal­ly new approach.

Svelte (also referred to as Svelte JS) is also a framework for de­vel­op­ing JavaScript apps. As such, it provides the basic framework for the final ap­pli­ca­tion and important, fre­quent­ly used functions as au­to­mat­i­cal­ly in­te­grat­ed libraries. Within a given framework, it defines the basic options in addition to fun­da­men­tal­ly de­ter­min­ing the de­vel­op­ment process. Frame­works used in pro­gram­ming web ap­pli­ca­tions are easy to use after a short fa­mil­iar­iza­tion period.

Svelte is an ideal tool for creating fast web ap­pli­ca­tions and is similar in its core concept to other Javascript frame­works, such as Angular, Vue, Ractive and React. Similar to these frame­works, Svelte is based on JavaScript and enables you to create in­ter­ac­tive user in­ter­faces. However, the generated code is much leaner than that of tra­di­tion­al frame­works.

Svelte’s core in­no­va­tion is the ability to convert complex framework code into simple optimized JavaScript. Most prior frame­works have left it up to the browser to interpret and display apps in JavaScript. This results in the display being rendered more slowly. In contrast, Svelte compiles the app into lean optimized JavaScript during de­vel­op­ment. One goal in the de­vel­op­ment of Svelte was to enable web de­vel­op­ers them­selves to write code that is as lean and elegant as possible without needing to burden the framework.

The problem with tra­di­tion­al frame­works is always the same. Instead of sim­pli­fy­ing JavaScript code to make it work well in a browser, they extend the code and let JavaScript interpret all the framework’s functions - often even unused ones. As a result, even com­par­a­tive­ly small ap­pli­ca­tions inflate into large scripts when using a tra­di­tion­al framework requiring computing time and data to execute. In short, frame­works help to structure thoughts but not code. The problem is often that framework de­vel­op­ers are focused on execution in the browser and overlook the use of pure “vanilla” JavaScript. This is the main dif­fer­ence between Svelte and other tra­di­tion­al frame­works. Apart from a few basic commands, which are very easy to learn, Svelte uses pure HTML, CSS, and JavaScript.

During the de­vel­op­ment process, the app’s com­po­nents are compiled into self-contained JavaScript modules. Pro­gram­mers can check the stability and execution of their compiled program in a preview window at any time. The advantage of this approach is that the final script becomes lean and fast. Using Svelte, you can avoid the virtually un­con­trol­lable bloating that occurs in scripts written in tra­di­tion­al frame­works. This leads to per­for­mance that is up to 10 times faster than, for example, the pre­vi­ous­ly widely used React framework.

Svelte JS (JavaScript) consists of multiple com­po­nents. Its unique appeal lies in the fact that the web developer barely has to worry about the CSS com­po­nents which are both cum­ber­some and error-prone. All they need to do is define the HTML or XML tags and let Svelte JS interpret them. Svelte JS then creates the app’s com­po­nents itself. The HTML code is written in a REPL (read-eval-print loop) command window in the browser. JavaScript in­ter­prets it im­me­di­ate­ly and au­to­mat­i­cal­ly. This allows the code’s stability to be tested im­me­di­ate­ly.

With its simple min­i­mal­is­tic approach, Svelte enables a broad extension of web apps. While React requires virtually the entire script to be es­tab­lished from the beginning, Svelte allows you to add ex­ten­sions later on without com­pro­mis­ing the stability or per­for­mance of the app. This makes Svelte an ideal tool for de­vel­op­ing new apps and improving the per­for­mance of existing struc­tures. The de­vel­op­ers of Svelte JS are primarily targeting beginners to app pro­gram­ming. They offer starter kits which can be used to get results very quickly. Svelte JS does require some prior knowledge, es­pe­cial­ly in CSS and JavaScript. However, the lean approach of the Svelte framework makes it easy for beginners to find their way around the pro­gram­ming en­vi­ron­ment.

To install Svelte JS locally on your system, Node.js must be installed. Then, you can install Svelte JS from the GitHub repos­i­to­ry.

The Svelte JS pro­gram­ming en­vi­ron­ment runs on a local web server at “http://localhost:5000”. The online demo page for Svelte in­tro­duces it without needing to install the program package. It provides example scripts for all important com­po­nents which can be modified and tested in­ter­ac­tive­ly with the original REPL tool. This allows you to assess quickly whether or how Svelte JS may be suitable for im­ple­ment­ing your app idea.

Svelte JS enables you to create faster and more powerful apps than tra­di­tion­al frame­works due to the large reduction in data used. However, Svelte is still quite new on the scene and only has a small community of users. Svelte JS promises better access, easier on­board­ing and faster results. So far, it has kept these promises. If Svelte JS really turns out to be that much more powerful than Vue, Ractive or React, it might soon replace them and become the new universal standard for mobile web app de­vel­op­ment.