Svelte JS

JavaS­cript has been essential for creating appealing web content for a long time. However, to take advantage of it, web de­velopers 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­velopers to execute JavaS­cript functions, even com­plic­ated ones, auto­mat­ic­ally. This reduces the amount of pro­gram­ming work sig­ni­fic­antly. At the same time, most frame­works place a heavy load on the browser. In this respect, Svelte is a fun­da­ment­ally new approach.

Svelte (also referred to as Svelte JS) is also a framework for de­vel­op­ing JavaS­cript apps. As such, it provides the basic framework for the final ap­plic­a­tion and important, fre­quently used functions as auto­mat­ic­ally in­teg­rated libraries. Within a given framework, it defines the basic options in addition to fun­da­ment­ally de­term­in­ing the de­vel­op­ment process. Frame­works used in pro­gram­ming web ap­plic­a­tions are easy to use after a short fa­mil­i­ar­isa­tion period.

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

Svelte’s core in­nov­a­tion is the ability to convert complex framework code into simple optimised JavaS­cript. Most prior frame­works have left it up to the browser to interpret and display apps in JavaS­cript. This results in the display being rendered more slowly. In contrast, Svelte compiles the app into lean optimised JavaS­cript during de­vel­op­ment. One goal in the de­vel­op­ment of Svelte was to enable web de­velopers 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 JavaS­cript code to make it work well in a browser, they extend the code and let JavaS­cript interpret all the framework’s functions - often even unused ones. As a result, even com­par­at­ively small ap­plic­a­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­velopers are focused on execution in the browser and overlook the use of pure “vanilla” JavaS­cript. 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 JavaS­cript.

During the de­vel­op­ment process, the app’s com­pon­ents are compiled into self-contained JavaS­cript 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­form­ance that is up to 10 times faster than, for example, the pre­vi­ously widely used React framework.

Svelte JS (JavaS­cript) consists of multiple com­pon­ents. Its unique appeal lies in the fact that the web developer barely has to worry about the CSS com­pon­ents 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­pon­ents itself. The HTML code is written in a REPL (read-eval-print loop) command window in the browser. JavaS­cript in­ter­prets it im­me­di­ately and auto­mat­ic­ally. This allows the code’s stability to be tested im­me­di­ately.

With its simple min­im­al­ist­ic 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­prom­ising the stability or per­form­ance of the app. This makes Svelte an ideal tool for de­vel­op­ing new apps and improving the per­form­ance of existing struc­tures. The de­velopers 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­cially in CSS and JavaS­cript. However, the lean approach of the Svelte framework makes it easy for beginners to find their way around the pro­gram­ming en­vir­on­ment.

To install Svelte JS locally on your system, Node.js must be installed. Then, you can install Svelte JS from the GitHub re­pos­it­ory.

The Svelte JS pro­gram­ming en­vir­on­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­pon­ents which can be modified and tested in­ter­act­ively 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.