Meet Svelte, the Anti-Framework JavaScript Framework

A new tool carves up JS frameworks, leaving only the stuff your web app actually needs.
December 4, 2016, 5:00pm
Image: ESB Professional/Shutterstock

Writing and learning JavaScript can feel completely bonkers. There's often little to no free space to just sit down and write lean, elegant code in a way that even approaches "from scratch." This is because of frameworks, which are essentially pre-written libraries of code meant to be used in fairly specific contexts according to fairly specific patterns—that is, they are often only useful when used in prescribed ways.

To build a web app is to wield these libraries and architectural patterns, usually several at a time. And this means learning the libraries and architectural patterns, which, for something like AngularJS, can be a real fucking chore. Learning aside, it can also mean building a web app that is bloated with library code. This is code that will eventually need to be parsed and interpreted by a browser, or, in the case of Node, by a server. That parsing can be expensive and time-consuming.

Frameworks are pretty useful, however. They provide standardization, simplification, and abstraction. Programmers write less code and, crucially, less complex code. As a result, they theoretically make less mistakes. In particular, frameworks often provide ways of dynamically updating webpages without manipulating HTML directly—and this is how webpages become fullon web apps in the first place.

So, frameworks become a neccessary evil, but maybe they don't have to be quite so evil. Enter Svelte, a new JavaScript framework that offers coders the ability to use frameworks for developing web applications while delivering only "vanilla" JavaScript code—that is, code that looks an awful lot like it was written by hand, but was really crafted using the usual frameworks (Angular, React, Ember, whatever). The benefit comes in the amount of code that's ultimately needed to support a web app.

That's the pitch, anyway.

"What if the framework didn't actually run in the browser?," writes Svelte developer Rich Harris in an introductory post. "What if, instead, it converted your application into pure vanilla JavaScript?"

This is what Svelte offers: a compiler capable of analyzing source code, including that contained in outside frameworks, and carving away features that aren't actually used by the current web application. The result are small, relatively lean modules.

"Existing frameworks tend to be large enough that your application becomes slow to start up on mobile phones, especially on Android, which is where the bulk of market growth is happening," Harris told InfoWorld. "Svelte solves these problems by removing those abstractions. The hard work happens at compile time rather than run time—it spits out highly optimized low-level DOM manipulation code specific to your application."

I guess the catch is that, while this may simplify things for the browser tasked with running the code, for the developer it's yet another framework. Part of where things can get really messy is when we start dealing with build tools, a subcategory of framework used for managing code dependencies and packaging code up for IRL deployment. I haven't totally figured out how Svelte fits into all of that, but am willing to give it a try.