A lightweight JavaScript framework: Introduction to Svelte JS

A lightweight JavaScript framework: Introduction to Svelte JS

The majority of web application development is streamlined with JavaScript frameworks and libraries such as Angular or React, Ember, and Vue JS. Reason being that these JavaScript frameworks and libraries make the complexity of code required to fulfill your concepts very manageable and relatively easy to implement. They help to reduce the problem of “spaghetti code.” If your job as a web developer is being made easier, where is all of that “work” alleviated? To our users… More specifically our user’s web browsers. In most, if not all web applications, browsers have to load entire libraries to use only a fraction of them.  This greatly hinders web application run time with wasted processing power. Luckily for us, Svelte JS has come to the rescue.

svelte-js

Svelte is a new framework that compiles your HTML, CSS, and JavaScript into small standalone vanilla JS modules during the build process. Not only does it write vanilla JS for you, but it analyzes source code, including that which is used in outside frameworks. It then carves away features that aren’t currently used by the application and embeds ALL NECESSARY code directly in the module. This results in relatively small, lean modules. One big problem that Svelte is marketed to help with in web development is interoperability which Rich Harris addresses in a Svelte blog post.

“Consider interoperability. Want to npm install cool-calendar-widget and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if cool-calendar-widget was built in React and you’re using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)”

Utilizing any frameworks you desire to make universally modular web development components is a pretty enticing concept. Only time will tell if Svelte can fully bring that freedom to front end web application development.

At first glance, Svelte JS definitely brings some good points to the table but it’s simply too early to tell how much it will catch on in the front end development world and how it will address certain for sought problems. One being how Svelte would handle an application that uses the same part of a library multiple times. Multiple web components could be bundled with the same library functions; compiled into different modules, creating redundant code when you could just load the entire library one time for multiple modules to use. Though this isn’t something that would typically be noticeable in a smaller application, it could start to have an effect on larger web applications, ultimately resulting in the use of original libraries being a more viable option. That being said, Svelte JS creator, Rich Harris sheds light on his view of the future impact of Svelte in the world of web application development, on Reddit.

“… My hope with Svelte isn’t necessarily that everyone will adopt it, but that the idea of build-time code generation will become more widespread…”

svelte-js-ui-framework

At the end of the day, for a web developer, Svelte is another framework. It does simplify things for browsers but things can get a bit messy when you bring build tools, managing code dependencies, and packaging code for deployment into play. The framework is really young and definitely has a ton of potential to be an exponentially powerful tool; which more examples and documentation could come to prove in the near future. Keep an eye out for Svelte JS as more attention is brought to build-time code generation.

SHARE ON:Share on LinkedInTweet about this on TwitterShare on Facebook

2 thoughts on “A lightweight JavaScript framework: Introduction to Svelte JS

Leave a Reply

Your email address will not be published. Required fields are marked *