417 reads

Zwitterion, forget the build step

by Jordan LastJuly 28th, 2017

Too Long; Didn't Read

Auto-transpiling, live-reloading, and SPA-ing server for JavaScript, JSX, TypeScript, and TSX.

Company Mentioned

featured image - Zwitterion, forget the build step

Auto-transpiling, live-reloading, and SPA-ing server for JavaScript, JSX, TypeScript, and TSX.

Have you ever wanted to use all the new language features in ES6/ES2015 and beyond? Have you considered using TypeScript, TSX, JSX, ES modules, Object spread, async/await, readonly properties, block scoping, or any of the other amazing web language features out there?

I have. I love them. I’ve been building applications on the web platform for 4 years now, and I’ve come to realize that I don’t want to live without them. Yet, there is a high cost. Not all new language features are currently supported in the major browsers. This means adding an extra step to your projects. Building, bundling, compiling, transpiling…it’s a mess. It adds a lot of unwanted complexity to your applications. No more!

Zwitterion is a server for web applications that provides automatic transpilation, live reload, and single-page application (SPA) support out of the box. It allows you to develop JavaScript, JSX, TypeScript, and TSX applications without a complicated build step. Just include files directly in <script> tags. For example:<script src="hello-world.ts"></script>. All features that the TypeScript compiler provides are automatically available, including ES modules, async/await, and Object spread.

The magic all happens server side, hiding complexity. Requested JavaScript, JSX, TypeScript, and TSX files transpile automatically, and the browser receives the transpiled JavaScript. It even handles bare specifiers.

Let’s do an example. We’ll install Zwitterion globally for simplicity:

npm install -g zwitterion

Now let’s create a simple example. We’ll make three files, an index.html file, a main script called app.ts, and a module called hello-world.ts:

//index.html

<!DOCTYPE html>

We’ll create the app.ts file:

//app.ts

import { sayHello } from './hello-world';

alert(sayHello());

And the hello-world.ts module:

export function sayHello() {return 'Hello world!';}

Now we’ll start up Zwitterion with a few options:

zwitterion --port 8000 --watch-files

If we go to[http://localhost:800](http://localhost:8000)0 we behold our auto-transpiling web server. Notice how the TypeScript files just work, without any build step. The modules are loaded into the browser automatically. When files change, the browser does an automatic reload. To push to production, we do a static build. This build will be suitable for publishing the app on a content delivery network (CDN):

zwitterion --port 8000 --build-static

You can build entire applications like this, and you can mix and match different file formats. Here’s an example of one, known as the Zwitterion Example. It’s hosted live on a CDN here.

We’re building our entire production application at Prendus using Zwitterion. I’m beginning to use it in other projects as well. Example projects include consumable components, embedded devices, and a browser-based super grid prototype.

So, try it out. Zwitterion could be on the right path to reducing the complexity of the infamous build step. It might also help us tackle future transpilation desires, as more and more languages compile for the web platform. The future is bright.

Zwitterion: https://github.com/lastmjs/zwitterion

Zwitterion Example: https://github.com/lastmjs/zwitterion-example

Zwitterion Example Live Demo: https://zwitterion-example.netlify.com