StealJS 1.0 is here and represents an important milestone along its mission. This article reiterates that important mission, goes over a few of 1.0's most useful features, explains how to upgrade for 0.16 users, and looks ahead to what's coming on StealJS's roadmap.
StealJS's mission is to make it cheap and easy to do the right thing. Doing the right thing, when building for the web, includes things such as writing tests and breaking your applications into smaller mini-applications (modlets) that can be composed together.
Our competitors see themselves as compilers. A compiler is important, we have one in steal-tools, but a compiler also adds friction to your development workflow and removes the immediacy that the web platform provides. That friction disincentivizes you from doing the right thing. StealJS is about removing the friction; you can have your cake and eat it too!
Some of the new features include:
The ~ lookup scheme
This scheme works like so:
import widget from "~/components/my-widget/my-widget";
This works the same way as using your package name; by finding the module starting at your application's root. We’ve noticed developers run into problems where they need to rename their project, and using the package name to look-up modules creates a refactor hazard. Using the tilde instead allows you to rename to your hearts content. And is much shorter to write!
Conditional module syntax
StealJS also now supports conditional module loading. This is available through steal-conditional. This provides a way to load modules based on run-time conditions. Conditionals makes it much easier to implement internationalization and to load polyfills only when needed.
Steal-conditional supports 2 types of conditionals, substitution and boolean. Here’s an example of a substitution conditional:
import words from "~/langs/#{lang}";
This example conditionally loads a language pack based on name substitution. So you can imagine having a "~/langs/en" and a "~/langs/zh" module that contains words/phrases for each of the languages your website supports.
When built for production, each language pack will be separated out into their own bundles, so your user only ever loads their own language.
StealJS is about making doing the right thing easy and loading as little code as possible in production is the right thing.
Easier production usage
Using StealJS in development is as easy as adding a script tag that links to steal.js:
<script src="./node_modules/steal/steal.js"></script>
In the past using StealJS in production has been a little more complicated and the more configuration you use (like putting your bundles somewhere other than the default location) the more configuration you have needed in your script tag.
With 1.0 we wanted to greatly simplify this, so now steal-tools will create a steal.production.js that is preconfigured for you. Now all you need to do is add the script tag (like in development!)
<script src="./dist/steal.production.js"></script>
Additionally you no longer need to use the "instantiated" configuration to prevent loading your main CSS bundle. Just include your CSS in the <head> like normal:
<head>
…
<link rel="stylesheet" href="./dist/bundles/app/index.css">
</head>Upgrading
While there are a few notable features like those listed above, overall StealJS 1.0 represents a stable base on which to build and an acknowledgement that StealJS has already been used in production for the last several years; 1.0 was overdue!
If you’ve been using StealJS 0.16, upgrading is straightforward and can be done in a couple of hours. See the migration guide for more information on how to upgrade. For all of the changes in 1.0, see the changelog.
Where StealJS Goes From Here
The first version of StealJS (then called Include.js) was released in 2007 as part of JavaScript MVC 0.8.2. We are just 1 year away from StealJS's 10 year anniversary!
With 1.0 released, StealJS is in a great position to accelerate on its mission of making doing the right thing cheap. Some of the things we have planned include:
- A new smaller and faster production loader that will allow you to load your modules in parallel (using <script async>).
- Support for HTTP2 Server Push and
<link rel=preload>, making page loads even faster. - steal-tools gaining the ability to optimize assets outside of your JavaScript dependency graph.
- Faster development load times using things like caching and bundling of development dependencies.
These are being developed in the open and you can help! StealJS has adopted an RFC process where new ideas and features are discussed in a more formal process. We hope that by creating this process, developers who are interested in seeing new features in StealJS will see a path to getting changes made.
Now at 9 years, StealJS's mission is as relevant as ever. With a stable 1.0 now StealJS, with your help, we can put the focus back on realizing its goals.
open source
Previous Post
Next Post