Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado

Rate this content
Bookmark
Esta masterclass cubre varios temas relacionados con el desarrollo de software, incluyendo el uso de la biblioteca CodeMirror para crear editores personalizados, explorando la configuración y los temas de CodeMirror, añadiendo múltiples editores y temas personalizados, implementando características de linting y autocompletado, y añadiendo autocompletado personalizado en CodeMirror. También discute las herramientas Hydrogen y Oxygen para crear tiendas personalizadas en Shopify, introduce la biblioteca Polaris Viz UI, y comparte las experiencias y antecedentes de los miembros del equipo. La masterclass enfatiza la complejidad del código React, los desafíos y beneficios de usar TypeScript, y la importancia de la colaboración y comunicación con los mantenedores en proyectos de código abierto.

From Author:

Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?


En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.

This workshop has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

CodeMirror es una biblioteca que permite crear tu propio editor de código desde cero. Ofrece muchas características para personalizar el editor, como agregar temas, linting y autocompletado, y es ampliamente documentada y utilizada en aplicaciones como Shopify para mostrar y editar código en diferentes lenguajes.

Para personalizar el tema en CodeMirror, puedes agregar tus propios temas utilizando la configuración de la biblioteca y también modificar temas existentes. Esto permite ajustar el estilo visual del editor a tus preferencias o a las necesidades específicas de tu proyecto.

El linting es un proceso utilizado en desarrollo de software para detectar errores de código, problemas de estilo y posibles bugs mediante un programa llamado linter. En el contexto de CodeMirror, agregar linting implica incorporar capacidades para verificar el código y mostrar alertas de errores directamente en el editor.

El autocompletado en CodeMirror se implementa mediante extensiones que proporcionan sugerencias de código mientras se escribe. Esto puede incluir autocompletado para sintaxis de lenguajes específicos como JavaScript, así como personalizaciones para incluir autocompletados más específicos y complejos.

TypeScript ofrece varias ventajas sobre JavaScript, incluyendo tipado estático, lo que ayuda a detectar errores en tiempo de compilación antes de que el código se ejecute. Además, TypeScript soporta características de programación orientada a objetos más avanzadas y mejora la organización y mantenibilidad del código en proyectos grandes.

ReactCodeMirror es una biblioteca que facilita la integración de CodeMirror en proyectos que utilizan React. Proporciona componentes envoltorios que simplifican la implementación del editor de código en aplicaciones React, permitiendo un manejo más sencillo de estados y props dentro del ecosistema React.

En Shopify, la actualización de características en CodeMirror incluye aprender a usar la biblioteca, agregar nuevas funcionalidades como la capacidad para los comerciantes de agregar su propio código y manejar eventos, y asegurarse de que la versión utilizada esté actualizada para aprovechar las mejoras y documentación más recientes.

Hussien Khayoon
Hussien Khayoon
Kahvi Patel
Kahvi Patel
86 min
30 Nov, 2022

Comments

Sign in or register to post your comment.

Video Transcription

1. Introducción a la biblioteca CodeMirror

Short description:

En esta parte, discutiremos CodeMirror, una poderosa biblioteca que te permite crear tu propio editor. Cubriremos la configuración básica, la adición de temas, linting y características de autocompletado. La biblioteca se utiliza ampliamente en Shopify y tuvimos que actualizarla para satisfacer nuestras necesidades específicas. A pesar de la documentación exhaustiva, tuvimos que navegar a través de ejemplos para implementar linting y autocompletado personalizado. Estaremos usando ReactCodeMirror, una biblioteca útil que simplifica el uso de CodeMirror. Sumérgete en el proceso de codificación y sigue las instrucciones.

Curso 3. Desarrollando en un navegador web "... Voy a explicar cómo instalar los playoffs de React..." Soy Hussain, soy un desarrollador de personal aquí en Shopify. Me enfoco principalmente en el front end. He estado usando React durante siete años, de cerca. Quiero decir, cuando salió, hablemos de CodeMirror.

¿Qué estamos haciendo con CodeMirror? Hoy, la agenda es, vamos a hablar sobre la biblioteca en sí. Vamos a hablar sobre una configuración básica. Vamos a agregar nuestros propios temas y usar temas adicionales que tienen. Agregar nuestro propio linting. Así, la capacidad de detectar algunos errores. Agregar un autocompletado general, algo más complejo de un autocompletado en JavaScript, y vamos a hacer un autocompletado más personalizado.

Voy a usar JavaScript simplemente porque creo que es más accesible. No todos usan TypeScript. Quería hacerlo más general. Además, ahorra mucho tiempo aquí y todos los errores que podríamos obtener. Entonces, ¿por qué estamos hablando de esto? CodeMirror en sí es una biblioteca muy, muy, muy poderosa. Te permite crear tu propio editor de la nada, y tiene muchas características y mucha documentación. Cómo aterrizamos en este problema fue en Shopify, tenemos algunos lugares en nuestra aplicación que los comerciantes usan. Diferente en diferentes bases de código que otros desarrolladores usan en nuestros documentos, donde queremos mostrar un editor de código, ya sea que puedas editarlo o no, en diferentes idiomas, agregando cierta sintaxis. A lo largo de la aplicación, y Shopify ha existido durante mucho tiempo, solo he estado allí durante un año, notamos que CodeMirror era el principal que se usaba. Además, no era la versión más actualizada, por lo que parte de lo que hice fue aprender CodeMirror y agregar una nueva característica donde los comerciantes pueden agregar su propio código, esencialmente, agregar su propio código y disparar eventos en esos códigos. Lo que eso significa es que un comerciante puede decir, después de hacer una venta, por favor envíe a Facebook el mensaje sobre mi venta, es decir, dígales que vendí algo, este producto en particular a este precio en particular con estos parámetros. Disparamos ese evento por ti, pero tú pones el código que quieres disparar porque quieres enviarlo a Facebook en cualquier otro lugar. Así que tuvimos que tener un entorno de codificación y eso es solo uno de los casos de uso que lo teníamos.

Entonces, creo que mucho de lo que hacemos aquí como desarrolladores, porque puedes crear tu propio, puedes escribir tu propio CodeMirror, puedes crear tu propio editor y eso es más genial, por así decirlo, pero generalmente, nos encontramos si hay algo por ahí que es mejor, tal vez no es lo mejor que deberías hacer, y todos sabemos eso y todos tenemos que tomar esas decisiones difíciles sobre ¿deberíamos usar esto? ¿Deberíamos hacer el nuestro? Y algo como esto que ya existía en la base de código que otros equipos estaban usando, era una buena idea usar esto. Pero el problema es que no estaba actualizado. Tuvimos que actualizarlo. Y creo que eso me lleva al punto de por qué esto es tan importante es porque me encontré, he estado desarrollando durante unos 10 años. Encontré lo más importante, lo que estoy haciendo más no es escribir nuevo, cosas geniales y vanguardistas innovación. En general, estoy dando bibliotecas en el front end o backend, pero digamos front end, y tengo que, lo que llamo domarlas. Tengo que hacer que funcionen para lo que quiero que hagan. Al final del día, es agradable cuando la biblioteca simplemente funciona. Pero rara vez, ese es el caso porque los negocios significan código y los negocios hacen código complicado. Entonces, um, lo que tuve que hacer con CodeMirror y lo que nuestro equipo tuvo que hacer fue esencialmente hacer que funcione para nuestro caso de uso. Y fue un entorno donde ves documentación como esta y te emocionas porque es, es muy exhaustiva, pero documentación, lo que aprendí es muy agradable. Pero el problema es que cuando es muy exhaustivo, no significa que sea muy fácil averiguar cómo hacer lo que quieres. Así que tuvimos que hacer un linting. Tuvimos que hacer autocompletado. Tuvimos que agregar el nuestro, pero no era muy evidente a partir de los ejemplos, pero la documentación estaba allí. Así que vamos a pasar por aquí y vamos a empezar a codificar aquí. Pero pensé que esa introducción sería importante. Así que una cosa a tener en cuenta aquí es que estamos usando ReactCodeMirror. Esto simplemente hace que usar CodeMirror sea mucho más fácil. Puedes hacer tus propios envoltorios en lo que hacen nuestros equipos, pero esta biblioteca aquí es bastante útil. Esencialmente solo convierte las cosas en sus propios paquetes y verás que tenemos muchos paquetes aquí y eso es solo la arquitectura que decidieron hacer para permitirte y darte más flexibilidad. Dan algunos ejemplos básicos de lo que puedes hacer. Soportan múltiples idiomas, por lo que es fácil de usar fuera de la caja cuando estás usando React. Así que sigamos las instrucciones aquí. Una cosa que es genial acerca de StackBlitz es que en realidad no necesitas instalar estas bibliotecas directamente, por lo que deberías hacer Yarn add.

2. Explorando la configuración de CodeMirror en StackBlitz

Short description:

En esta parte, exploramos la configuración básica de CodeMirror en StackBlitz. Discutimos la velocidad y la arquitectura de StackBlitz, destacando su uso de WebAssembly para una ejecución rápida. La configuración básica del editor de código permite controlar la altura, proporciona autocompletado, colapsado y características de línea de guía. También tocamos el poder de las extensiones en CodeMirror y los desafíos de navegar por la extensa documentación. Además, mencionamos la capacidad de agregar TSX True y las limitaciones de agregar divs dentro de JavaScript.

Así que verás aquí, si estás siguiendo con StackBlitz, voy a tomar este code aquí con la configuración básica y simplemente lo voy a pegar aquí. Y simplemente voy a cambiar esto a app.js. Si funciona, si no funciona, lo revertiremos.

Como puedes ver aquí, ya me está pidiendo que tenga la lista 10-D aquí, así que no puedo ver mucho de lo que estoy haciendo. Vale. Me va a pedir que instale estos parámetros. Muy guay. No sé si te has dado cuenta, pero StackBlitz es realmente bastante, bastante rápido comparado con muchas de las cosas aquí. Y muchos de los otros tipos de entornos, creo que Code Sandbox particularmente es lo que usé. Y lo que es realmente interesante de su architecture es que todo creo que está escrito en, corrígeme si me equivoco, Covey está en WebAssembly, y simplemente cargado en tu navegador en lugar de, ya sabes, volver a tu code, lo siento, ir a la cloud cada vez que actualizas algo y pides cosas a un servidor. Hasta donde yo sé, eso es lo que hacen. Y es muy, muy rápido si lo usas. Así que no sé si te has dado cuenta de eso o si eres un usuario, acabo de descubrir esto bastante recientemente de una llamada.

Sí, hay una diferencia interesante entre cómo ejecutan code en CodeSandbox versus en StackBlitz. No conozco los detalles de ello, pero sí sé que StackBlitz es local, lo cual es genial. Sí, así que, gracias por eso, Covey. Así que como puedes ver aquí, tenemos una configuración básica de un editor de code. Y ves, realmente no necesitamos hacer mucho aquí, pero hay algunas sutilezas importantes. La primera aquí es, podemos controlar la altura. Algo bastante fácil aquí. Puedes hacer esto 250 si quieres. Verás que ha aumentado de tamaño. Ves aquí, tenemos un valor inicial. Y mi ratón se está volviendo loco. Y otra cosa que puedes hacer aquí es, puedes ver que tienes algunas cosas de serie, como el autocompletado. Por ejemplo, para el bucle for, lo tenemos aquí mismo. Podríamos hacer una declaración if. Va a hacer un bloque if de serie. No hay errores de linting ni nada de eso de serie. Pero puedes ver aquí, con la configuración básica, incluso puedes hacer algunos colapsos, lo cual es realmente agradable. Tienes esto, lo que se llama una línea de guía o la guía, que te permite mostrar las líneas. Y tienen diferentes colores para resaltar y todo eso. Además, veamos aquí. Puedes hacer un bloque trycatch si quieres. Y es bastante agradable de serie. Así que lo que hace esto posible es que tienes, estás conectado a estos plugins o paquetes de lenguaje. Y JavaScript te permite esencialmente hacer este editor específicamente para JavaScript. Y lo llamas como una función, y está dentro de las extensiones. La extensión es lo más poderoso en Codemirror, y lo que me encanta de ello es, todo, cada característica que quieres añadir, puedes hacerlo a través de extensiones. Ahora, el problema con ello, encontré que la documentation es extensa. Pero también es confusa porque muchas veces lo que hacen es que usan su propia terminología en otros objetos y simplemente dicen como, oh, proporciona esto y facetas. Y lo que encontré con eso es como, estoy, ya sabes, es un poco abrumador y tienes que profundizar más para entender lo que realmente está pasando. No sé tú, pero a mí me gusta seguir ejemplos. Así que, y así es como intentaba hacer las cosas. Así que mucho de ello fue tratar de encontrar cosas y hacer cosas en línea. Y con la extensión de JavaScript, también puedes añadir, creo, TSX True aquí. Y creo que, te dará la capacidad de añadir cosas como divs, pero creo que tienen que estar dentro de algún JavaScript aquí no puedo recordar aquí. Vale. Déjame ver, ¿está aquí? Vale, no parece estar funcionando, pero eso está bien. Así es como van las demostraciones.

Watch more workshops on topic

Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Node Congress 2023Node Congress 2023
49 min
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Workshop
Michele Riva
Michele Riva
En este masterclass, veremos cómo adoptar Orama, un potente motor de búsqueda de texto completo escrito completamente en JavaScript, para hacer que la búsqueda esté disponible donde sea que se ejecute JavaScript. Aprenderemos cuándo, cómo y por qué sería una gran idea implementarlo en una función sin servidor, y cuándo sería mejor mantenerlo directamente en el navegador. Olvídate de las APIs, configuraciones complejas, etc.: Orama facilitará la integración de la búsqueda en proyectos de cualquier escala.

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

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
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.