Ejecutando TypeScript en WebAssembly en la Nube

Rate this content
Bookmark

Construye funciones sin servidor en TypeScript y luego compílalas a WebAssembly (Wasm) para ejecutarlas en la nube. Este es un modelo diferente al diseño original sugerido por Wasm, pero está demostrando ser un concepto poderoso. En esta charla, profundizaremos en el trasfondo de Wasm, luego analizaremos sus aplicaciones más amplias antes de examinar una forma novedosa de construir código TypeScript en un binario Wasm para su ejecución en la nube.

This talk has been presented at TypeScript Congress 2023, check out the latest edition of this JavaScript Conference.

FAQ

WebAssembly es una tecnología que permite compilar diferentes lenguajes de programación a un formato binario neutral para ejecutarlos en un navegador. Fermion Technologies identificó que las características de WebAssembly, como tiempos de inicio rápidos, tamaños de binario pequeños y un excelente modelo de aislamiento de seguridad, son ideales para aplicaciones en la nube.

'Serverless' en Fermion Technologies se refiere a un entorno donde no es necesario configurar servidores de software. Esto implica que las aplicaciones manejan eventos directamente, como solicitudes HTTP, sin necesidad de gestionar servidores, puertos o certificados TLS.

Spin es una herramienta de código abierto y una plataforma que permite desarrollar aplicaciones serverless usando varios lenguajes de programación. Estas aplicaciones se compilan a WebAssembly y se ejecutan en un estilo serverless en la nube, facilitando la creación de aplicaciones potentes con configuración mínima.

Spin admite lenguajes de primer nivel como Rust, Go, Python, JavaScript y TypeScript. También admite varios lenguajes de segundo nivel, expandiendo las opciones para desarrolladores que usan la plataforma.

Para crear una aplicación TypeScript serverless con Spin, primero se utiliza el comando 'spin new' seguido por 'spin build' para compilar la aplicación a WebAssembly. Finalmente, se usa 'spin up' para ejecutar la aplicación localmente y 'spin deploy' para desplegarla en Fermion Cloud o en otros entornos como Kubernetes o Docker.

TypeScript en un entorno serverless con WebAssembly ofrece la ventaja de compilar el código fuente directamente en WebAssembly, eliminando la necesidad de tiempo de invocación del intérprete de JavaScript. Esto optimiza el rendimiento y reduce la latencia al manejar solicitudes en la aplicación.

Matt Butcher
Matt Butcher
10 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discute cómo ejecutar TypeScript en WebAssembly en la nube utilizando el tiempo de ejecución de WebAssembly de Fermion. Fermion proporciona un entorno sin servidor llamado Spin que permite el desarrollo fácil de aplicaciones sin servidor en varios lenguajes. El proceso de creación de una aplicación sin servidor de TypeScript con Spin implica instalar Spin, crear una nueva aplicación utilizando la plantilla HTTP TS y probarla en localhost. Para implementar la aplicación, se utiliza el comando 'spin deploy' y Fermi en la nube se encarga del enrutamiento y hace que la aplicación sea accesible a través de una URL pública.

1. Introducción a WebAssembly y Cloud Runtime

Short description:

Hola, soy Matt Butcher, uno de los fundadores de Fermion Technologies. Hoy vamos a hablar sobre cómo ejecutar TypeScript en WebAssembly en la nube. WebAssembly es una tecnología basada en el navegador que te permite compilar diferentes lenguajes a un formato de tiempo de ejecución neutral. Ofrece tiempos de inicio rápidos, tamaños de binario pequeños y soporte multiplataforma. Extraímos el tiempo de ejecución de WebAssembly del navegador y construimos un tiempo de ejecución en la nube.

Hola, soy Matt Butcher. Soy uno de los fundadores de Fermion Technologies, y hoy vamos a hablar sobre cómo ejecutar TypeScript en WebAssembly en la nube. Así que hay muchos términos que desglosar aquí.

Comencemos rápidamente con WebAssembly. Es posible que estés familiarizado con WebAssembly como una tecnología basada en el navegador. La idea original era construir un tiempo de ejecución en un formato binario en el que se pudieran compilar muchos lenguajes diferentes al mismo formato de tiempo de ejecución neutral y ejecutarlo dentro del navegador, junto con JavaScript. Por ejemplo, en el caso de alguien como Figma, utilizaron WebAssembly para tomar su código C++, compilarlo a WebAssembly y luego interactuar con él desde su JavaScript que se ejecuta en el navegador.

Ahora, en Fermion, analizamos WebAssembly, y vimos que las características del tiempo de ejecución de WebAssembly son perfectas para la nube. Tiene tiempos de inicio muy rápidos, tamaños de binario muy pequeños, el modelo de aislamiento de seguridad es excelente, y por supuesto, admite multiplataforma, arquitectura cruzada y múltiples lenguajes. Así que tomamos el tiempo de ejecución de WebAssembly, lo sacamos del navegador, lo colocamos en la nube, y comenzamos a construir un tiempo de ejecución en la nube.

2. Introducción a Serverless y Spin

Short description:

Fermion es un entorno serverless que te permite prescindir de configurar servidores y manejar código boilerplate. En serverless, el punto de entrada de la aplicación es el controlador de eventos, que recibe una solicitud HTTP, la maneja y devuelve una respuesta. Spin es una herramienta y plataforma de programación de código abierto que te permite crear aplicaciones serverless en varios lenguajes y ejecutarlas en la nube en un estilo serverless. Spin admite lenguajes de primer nivel como Rust, Go, Python, JavaScript y TypeScript, y se enfoca en proporcionar un estilo de desarrollo de programas simple y fácil en el entorno serverless.

Entonces, el segundo término que queremos definir es serverless. Fermion es un entorno serverless. Spin construye aplicaciones serverless, pero serverless en sí es un término que a veces se utiliza de manera poco clara. Quiero dejarlo muy claro a qué me refiero cuando hablo de serverless. ¿Qué es el servidor del que prescindimos? Bueno, para mí, es el servidor de software. Si estás acostumbrado a construir microservicios u otras tecnologías backend, sabes que el primer paso suele ser configurar algún tipo de servidor, algo que iniciará un servidor de sockets, abrirá un puerto, escuchará las solicitudes entrantes y las manejará. Terminas escribiendo todo tipo de código boilerplate como manejo de interrupciones y carga de certificados TLS y todo ese tipo de cosas. Entonces, en serverless, para mí, una aplicación serverless es aquella en la que podemos prescindir de todo eso. Donde el punto de entrada de la aplicación es el controlador de eventos. Hablaremos principalmente sobre HTTP, aunque esto también podría aplicarse igualmente a consumir algo de una cola de PubSub o lidiar con un disparador basado en el tiempo, pero en HTTP, el evento es una solicitud HTTP que llega. Obtienes esa solicitud, manejas la solicitud, devuelves una respuesta HTTP y cierras. Entonces, no hay configuración de un servidor, no hay configuración de certificados TLS, nada de eso. El entorno serverless dice que solo tienes que definir un controlador de eventos que reciba la solicitud y devuelva una respuesta. Así que queríamos tomar WebAssembly, ponerlo en el lado del servidor y construir un marco serverless. Para hacer eso, necesitábamos una herramienta, así que construimos Spin. Spin es una herramienta de programación de código abierto y, en cierto sentido, una plataforma que te permite crear aplicaciones serverless en varios lenguajes, compilarlas a WebAssembly y ejecutarlas en un estilo serverless en la nube. Spin admite como lenguajes de primer nivel a Rust, Go, Python y, por supuesto, JavaScript y TypeScript, aunque también admite varios lenguajes de segundo nivel. Estamos trabajando en todo tipo de herramientas para facilitar cada vez más la construcción de una aplicación potente con almacenamiento de clave-valor, base de datos e incluso inferencia de IA, pero que siga ese entorno de desarrollo simple, de baja configuración y casi sin operaciones y un estilo de desarrollo de programas muy fácil en el entorno serverless. Principalmente, hablaremos de eso.

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

Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Building Your Own Custom Type System
React Summit 2024React Summit 2024
38 min
Building Your Own Custom Type System
Featured Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
Frictionless Development With Unified Type System
JSNation 2024JSNation 2024
113 min
Frictionless Development With Unified Type System
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.