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 , TSX, JSX, ES modules, Object spread, async/await, readonly properties, block scoping, or any of the other amazing web language features out there? TypeScript 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! 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 , JSX, TypeScript, and TSX applications without a complicated build step. Just include files directly in tags. For example: . All features that the TypeScript compiler provides are automatically available, including ES modules, async/await, and Object spread. Zwitterion JavaScript <script> <script src="hello-world.ts"></script> 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 globally for simplicity: Zwitterion npm install -g zwitterion Now let’s create a simple example. We’ll make three files, an file, a main script called , and a module called : index.html app.ts hello-world.ts //index.html <!DOCTYPE html> <html><head><script type="module" src="app.ts"></script></head></html> We’ll create the file: app.ts //app.ts import { sayHello } from './hello-world'; alert(sayHello()); And the module: hello-world.ts export function sayHello() {return 'Hello world!';} Now we’ll start up with a few options: Zwitterion zwitterion --port 8000 --watch-files If we go to 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): [http://localhost:800](http://localhost:8000)0 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 . It’s hosted live on a CDN . Zwitterion Example here We’re building our entire production application at using . I’m beginning to use it in other projects as well. Example projects include , , and a . Prendus Zwitterion consumable components embedded devices browser-based super grid prototype So, try it out. 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 Zwitterion: https://github.com/lastmjs/zwitterion Zwitterion Example: https://github.com/lastmjs/zwitterion-example Zwitterion Example Live Demo: https://zwitterion-example.netlify.com

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Zwitterion, forget the build step

Too Long; Didn't Read

Company Mentioned

Jordan Last

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Zwitterion, forget the build step

Too Long; Didn't Read

Company Mentioned

Jordan Last

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES