Running TypeScript in WebAssembly on the Cloud

Rate this content
Bookmark

Build serverless functions in TypeScript, and then compile them to WebAssembly (Wasm) to be run in the cloud. This is a different model than the original Wasm design suggested, but it is proving to be a powerful concept. In this talk, we dive into the background of Wasm, then look at its broader applications before examining a novel way of building TypeScript code into a Wasm binary for execution in the cloud.

10 min
21 Sep, 2023

Video Summary and Transcription

Today's Talk discusses running TypeScript in WebAssembly on the cloud using Fermion's WebAssembly runtime. Fermion provides a serverless environment called Spin that allows for easy serverless application development in multiple languages. The process of creating a TypeScript serverless app with Spin involves installing Spin, creating a new app using the HTTP TS template, and testing it on localhost. To deploy the app, the 'spin deploy' command is used, and Fermi on cloud handles routing and makes the app accessible through a public URL.

Available in Español

1. Introduction to WebAssembly and Cloud Runtime

Short description:

Hi, I'm Matt Butcher, one of the founders of Fermion Technologies. Today we're discussing running TypeScript in WebAssembly on the cloud. WebAssembly is a browser-based technology that allows you to compile different languages to a language-neutral runtime format. It offers fast startup times, small binary sizes, and cross-platform support. We extracted the WebAssembly runtime from the browser and built a cloud runtime.

Hi, I'm Matt Butcher. I'm one of the founders of Fermion Technologies, and today we're going to be talking about running TypeScript in WebAssembly on the cloud. So that's a lot of terms to unpack here.

Let's start really quickly with WebAssembly. So you may be familiar with WebAssembly as a browser-based technology. The original idea was to build a runtime in a binary format in which you could compile lots of different languages to the same language-neutral runtime format and execute it inside the browser, side by side with JavaScript. So, for example, in the case of someone like Figma, they used WebAssembly to take their C++ code, compile it to WebAssembly, and then interact with it from their JavaScript running in the browser.

Now, at Fermion, we took a look at WebAssembly, and what the runtime characteristics of WebAssembly are just right for the cloud. It has very fast startup times, very small binary sizes, the security sandboxing model is great, and of course, it supports cross-platform, cross-architecture, and cross-language. So, we took the WebAssembly runtime, plucked it out of the browser, kinda popped a version into the cloud, and began building a cloud runtime.

2. Introduction to Serverless and Spin

Short description:

Fermion is a serverless environment that allows you to do away with setting up servers and handling boilerplate code. In serverless, the entry point for the application is the event handler, which takes an HTTP request, handles it, and returns a response. Spin is an open source programming tool and platform that enables you to create serverless applications in multiple languages and run them in a serverless style on the cloud. Spin supports top-tier languages like Rust, Go, Python, JavaScript, and TypeScript, and is focused on providing a simple and easy serverless style of program development.

So the second term we wanna define is serverless. Fermion is a serverless environment. Spin builds serverless applications, but serverless itself is a term that sometimes gets used in really unclear ways. So I wanna make it really clear what I'm talking about when I talk about serverless. What is the server that we are doing without? Well, to me, it's the software server. If you're used to building microservices or other kinds of backend technologies, you know that step one is usually setting up some kind of server, something that'll start a socket server, will open a port, will listen for inbound requests, will handle those requests. You end up writing all kinds of boilerplate code like interrupt handling and TLS certificate loading and all of that kind of stuff. So in serverless, to me, a serverless application is one where we can do away with all of that. Where the entry point for the application is the event handler. So we'll talk primarily about HTTP, though this could equally apply to consuming something off a PubSub queue or dealing with a time-based trigger, but in HTTP, the event is an HTTP request that comes in. You get that request, you handle the request, you return an HTTP response, and you shut down. So there's no setting up a server, there's no setting up TLS certificates, none of that. The serverless environment says you just define an event handler that takes the request and returns a response. So we wanted to take WebAssembly, put it on the server side, and build a serverless framework. To do that, we needed a tool, so we built Spin. Spin is an open source programming tool and, in some ways, a platform that allows you to create serverless applications in a variety of different languages, compile them to WebAssembly, and run them in a serverless style on the cloud. Spin supports as top-tier languages, Rust, Go, Python, and, of course, JavaScript and TypeScript, though it also supports a number of second-tier languages. And we are working on all kinds of tooling to make it easier and easier for you to build an application that is powerful, has key value storage, database, even AI inferencing, but it still follows that very simple, low setup, almost no-op style developer environment, and a very easy serverless style of program development. Primarily, we'll be talking about that.

3. Creating a TypeScript Serverless App with Spin

Short description:

Let's switch to VS Code and use Spin to create a new serverless app. We'll discuss the serverless environment and TypeScript nuances. Install Spin from developer.fermion.com and follow the Quick Start Guide. Create a new TypeScript serverless app using the HTTP TS template. The application is created with familiar files and a spin.toml file that configures the WebAssembly serverless application. Look at index.ts for the serverless event handler. Install the fermionspin SDK library and build the app with Spin. Test it on localhost using curl.

So let's switch over to our VS Code editor, and let's use Spin to create a new serverless app, and along the way, we'll talk about both how this serverless environment works, and some of the cool nuances of the way that TypeScript works in this environment.

All right, here we are in VS Code. So the first thing to do would be to install Spin. You can head over to developer.fermion.com and kinda click your way into the Quick Start Guide and see how to quickly install and get up and running with Spin. I happen to just use Curl Bash to install it, so I've got it running here locally.

We're gonna create a new TypeScript serverless app. So just to quickly kind of see what all is supported, we can run Spin Templates List and see sort of all the different starter templates. Some do Redis with languages like Go or Rust, some do HTTP, Swift, Python. We're looking for this one here, HTTP TS, to run TypeScript applications. So let's create a new, spin new HTTP-TS. We're gonna create one called Congress, and we're gonna go ahead and accept the default, which basically just skips the walkthrough where it prompts you for a description and the default route and so on, and just chooses those for us.

So we can see it created an application for us. This should look very familiar to you. There's the package.json, the HTTPS-config. But there is this new file called spin.toml. We'll just quickly glance at that. This is the file that explains to spin how this application should be constructed as a WebAssembly serverless application. We can see in here in the component, this is the thing we're gonna be writing. This is gonna have a default route that'll listen on any, on anything. It'll use NPM to run its build, and the binary that will, the wasm binary will be called target slash congress.wasm. We're not gonna spend too much time in that file there. Instead, we're gonna get straight to the code. Let's take a look at index.ts. This is what a serverless event handler looks like. First, I'm gonna go in here and cd into the congress directory and run npm install and let that install this first library here in the code. It's the fermionspin SDK, which gives us our HTTP request and response and then we can take a look while that's running at our actual request handler. So it's gonna take an HTTP request, it's gonna return a promise for an HTTP response and all it's gonna do is send this hello from ts SDK. So there we've got kind of our scaffolded out original function, so let's go ahead and build that. Spin build is gonna package this up and turn it into a WebAssembly binary for us and then when that's done, we can do a spin up and have it run a version on localhost for us, so it's listening here on port 3000, we can use curl and quickly issue a request and see that that worked. So let's just change this to something very trivial, ts congress, save that and then once more, we'll do this build process.

4. Deploying the App and Routing with Fermi on Cloud

Short description:

To deploy the app, use the 'spin deploy' command. It packages the app and deploys it to an endpoint, such as Fermi on cloud. Spin applications can also be deployed to Kubernetes clusters, Docker desktop, nomad clusters, and even raspberry pi. Fermi on cloud sets up a domain name and routes the app to the serverless handler, making it accessible through a public URL.

Let's see, control c and then spin build and then once more, we'll do a spin up as soon as that is done. So again, we've used kind of three commands in our local loop, spin new to create an app, spin build to build a web assembly module out of it and spin up to create a local testing endpoint and we can see, there we go. Now, say we want to deploy this, we can actually just type spin deploy and it'll go ahead, package this up again and deploy it out to some endpoint somewhere, by default, it uses Fermi on cloud, which is a hosted environment, you can also deploy spin applications to Kubernetes clusters, to Docker desktop, to a nomad cluster and a variety of other places all the way down to like a raspberry pi. But in this case, Fermi on cloud will set us up a domain name and route us through to our new serverless handler. So there we've got it running on a public URL.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Workshop
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced