Desarrollo de aplicaciones multiplataforma con Bun v1.1

Desde hace algunos años, los desarrolladores se han enfrentado a numerosos problemas de rendimiento al usar entornos de ejecución de JavaScript tradicionales como Node.js y Deno. Si bien estos frameworks son utilizados por gigantes tecnológicos como Google, Amazon y Facebook, aún presentan algunas desventajas. Bun se desarrolló para abordar estos desafíos.

En este tutorial, aprenderás a desarrollar aplicaciones multiplataforma con Bun v1.1. Para seguirlo, asegúrese de tener Node y npm instalados en su ordenador.

¿Qué es Bun?

Si no conoces Bun, aquí tienes un breve resumen. Bun es un entorno de ejecución de JavaScript relativamente nuevo que utiliza el motor JavaScriptCore para ejecutar, compilar, probar y depurar código JavaScript y TypeScript.

Mientras que Node.js y Deno se ejecutan en el motor JavaScript V8, Bun se ejecuta directamente en el motor JavaScriptCore. Esto soluciona los problemas de rendimiento observados en Node.js y agiliza la configuración, compilación y empaquetado de código JavaScript.

También hace que Bun sea compatible con todos los paquetes npm e incluso duplica la velocidad de instalación con el npm icomando. El inicio de Bun es hasta cuatro veces más rápido que el de Node, lo que mejora tu experiencia de desarrollo.

¿Qué novedades hay en Bun v1.1?

Bun v1.1 se lanzó con muchas características nuevas que complementan las versiones anteriores. En primer lugar, simplificó considerablemente la instalación de Bun y la hizo más similar a la de un proyecto Node.js. Analizamos en detalle otras características incluidas en esta versión 1.1.

Compatibilidad con Windows

Hasta ahora, Bun solo se ejecuta en sistemas operativos basados ​​en Unix, pero la versión v1.1 de Bun agrega soporte para Windows 10. Se ha probado en Windows y pasó el 98 por ciento de las pruebas que también se realizaron para MacOS y Linux, lo que demuestra que el entorno de ejecución de Bun, el ejecutor de pruebas, el administrador de paquetes y el empaquetador pueden ejecutarse en máquinas Windows.

Para ejecutar Bun en su computadora Windows, abra PowerShell y ejecute este comando:

powershell - cirm mon. sh/instalar. ps1 | iex

Velocidad mejorada

Bun se creó pensando en la alta velocidad, y es relativamente más rápido que otros entornos de ejecución de JavaScript como Node.js. Esto hace aún más impresionante que la versión 1.1 haya duplicado la velocidad al integrar JavaScript, TypeScript y JSX en el transpilador personalizado de Bun.

Además, el mecanismo de almacenamiento en caché de archivos permitió a Bun almacenar en caché archivos que excedían los 50 KB (lo que se introdujo anteriormente en v1.0), lo que contribuyó a mejorar el rendimiento de Bun v1.1 y sus utilidades de línea de comandos como tsc.

Concha de panecillo

El shell Bun se ha actualizado para funcionar como un shell multiplataforma, compatible tanto con sistemas operativos Unix como con Windows. Esta actualización implicó la escritura de código Javascript, eliminando todas las complejidades ambiguas innecesarias asociadas.

Nuevo formato de archivo

Para mantener la velocidad de Bun y su compatibilidad multiplataforma, el equipo introdujo un formato de archivo en la versión 1.1. Este archivo funciona como un enlace simbólico multiplataforma que ejecuta scripts con Bun o Node.js, según el sistema de archivos..Bunx.Bunx

Esta nueva característica resuelve varios problemas, como:

• La incertidumbre de los enlaces simbólicos tradicionales en Windows.
• La ausencia de reconocimiento de shebangs
• Eliminando la necesidad de archivos ejecutables separados
• Manejo de mensajes de error en formato, que pueden detener el proceso de desarrolloterminate batch job? (Y/n)

Creando tu primer proyecto Bun multiplataforma

Adquirimos experiencia práctica con el desarrollo multiplataforma en Bun creando una aplicación de tareas. Este tutorial te ayudará a comprender mejor las ventajas de Bun y cómo usarlo en tus proyectos. Crearemos un servidor Bun y explicaremos cómo integrar Bun con React-Native para crear una aplicación multiplataforma.

Instalación de Bun v1.1

Antes de empezar a crear una aplicación con Bun v1.1, es necesario instalarlo en los sistemas operativos Mac, Linux y Windows. Ejecute el siguiente comando para instalar Bun globalmente en su ordenador:

Instalación de npm - g bun

Tenga en cuenta que, para los usuarios de Windows, Bun solo funciona en Windows 10 v1809 al momento de crear este tutorial.

El comando anterior instalará la última versión (v1.1.x) de Bun en su computadora. Verifique la instalación con el siguiente comando:

versión de pan

Debería ver la versión instalada aparecer en una nueva línea en su terminal:

Creando un nuevo proyecto Bun

Con Bun instalado en su computadora macOS, Linux o Windows, cree un directorio para su proyecto y cambie el directorio a la carpeta:

mkdir bunappcd bunapp

Luego, crea un nuevo proyecto con este comando:

inicio de bollo

Esto creará un nuevo archivo con una entrada en el directorio de tu proyecto. Una vez completado el comando, instala las dependencias ejecutando:project.jsonindex.tsinitnpm install

Actualice el código en el archivo para crear un servidor web utilizando el módulo HTTP integrado de Bun:index.ts

const servidor = Bun .server ({ puerto : 3000 , buscar () { devolver nueva Respuesta ("Bun!" ); }, }) ; consuelo. log (` Escuchando en http: //localhost:${server.port}`);

Ahora inicie el servidor con este comando:

índice de ejecución de bollos.ts

Lo verás en tu terminal.Listening on http://localhost:3000

Integración de Bun con React Native

Actualmente, Bun ejecuta proyectos de JavaScript y TypeScript del lado del servidor. Sin embargo, también puedes usar Bun en tus proyectos de React Native para ejecutar dependencias y scripts de Node.js. Para integrar Bun en tu proyecto de React Native, primero crea el proyecto con Bun:

Bun crea una exposición para mi aplicación Bun

Luego, actualice su archivo para reemplazar los scripts npm o Yarn con comandos Bun:package.json

"scripts" : { "inicio" : "inicio de bun expo" , "android" : "ejecución de bun expo:android" , "ios" : "ejecución de bun expo:ios" , "web" : "ejecución de bun expo:web" },                       

Ahora, actualice su archivo para crear una aplicación de tareas pendientes con los fragmentos de código a continuación:App.js

importar React, { useState} de 'react'; importar { Texto, Vista, TextInput, Botón, FlatList, TouchableOpacity} de 'react-native'; export default function App() { return(View style ={styles.container} Text style ={styles.title} To-Do App /Text TextInput style ={styles.input} placeholder = "Ingresar una tarea" value = { task} onChangeText ={setTask} / Button title = "Agregar tarea" onPress = {addTask} / FlatList data ={tasks} renderItem ={({item}) = (TouchableOpacity onPress ={( ) = removeTask(item.key) } Text style = {styles.task} {item.text} /Text /TouchableOpacity ) } / /View); }                                                                                                                

El código anterior crea una aplicación de tareas pendientes que permite a los usuarios crear una lista de tareas. Pueden agregar, eliminar y ver la lista de tareas añadidas. Hemos agregado detectores de eventos y adjuntado al componente las funciones necesarias para el funcionamiento de la aplicación.

Ahora agregue las funciones addTasky removeTaskencima de la returnpalabra clave:

const [ tarea , setTask ] = useState ( '' ); const [ tareas , setTasks ] = useState ([]); const addTask = () = { if ( tarea . length 0 ) { setTasks ([... tareas , { clave : Date . now (). toString (), texto : tarea }]); setTask ( '' ); } }; const removeTask = ( clave ) = { setTasks ( tareas . filter ( tarea = tarea . clave !== clave )); };                   

En este código, creamos un tasksestado para almacenar la lista de tareas pendientes, junto con un taskpara administrar el valor de entrada actual para un nuevo task, contener el valor ingresado desde el teclado y usarlo setTaskpara actualizarlo.

Luego, creamos la addTaskfunción para agregar una nueva tarea a la lista de tareas y removeTaskeliminar una tarea pendiente por su ID. removeTaskFiltrará las matrices de tareas para eliminar la que coincida con el ID de la tarea seleccionada.

Por último, agregue el siguiente fragmento de código para darle estilo a la aplicación:

const estilos = StyleSheet.create({ contenedor: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', padding: 20 }, título: { tamaño de fuente: 24, marginBottom: 20 }, entrada: { altura: 40, color del borde: 'gris', ancho del borde: 1, marginBottom: 10, paddingHorizontal: 10, ancho: '100%' }, tarea: { padding: 10, tamaño de fuente: 18, color de fondo: '#f9c2ff', marginBottom: 5, textAlign: 'center' }});

Ahora inicie la aplicación ejecutando el siguiente comando:

npm ejecutar inicio

Luego, selecciona el dispositivo en el que quieres ejecutar la aplicación. La aplicación se verá como en la siguiente captura de pantalla en iPhone:

En un navegador web, se verá como la captura de pantalla a continuación:

En los dispositivos Android se verá la siguiente captura de pantalla:

Puedes ver que todos nuestros componentes están presentes y funcionando, aunque su representación es ligeramente diferente en cada dispositivo. ¡Nuestra aplicación multiplataforma funciona correctamente!

Si quieres un estilo más consistente en todos los dispositivos, es posible que tengas que hacer algo de trabajo extra en esta etapa, pero ahora sabes que puedes crear una aplicación con Bun que funcione en diferentes plataformas.

Node.js vs. Bun vs. Deno

Node.js, Bun y Deno son entornos de ejecución de JavaScript conocidos que se desarrollaron para crear aplicaciones escalables y de alto rendimiento.

Años después de que Ryan Dahl desarrollara Node.js, cocreó Deno para solucionar algunos de los desafíos que identificó en Node. A medida que la tecnología evolucionó, los desarrolladores descubrieron otros desafíos que ni Node ni Deno solucionaron, como el rendimiento, la simplificación de JavaScript y el desarrollo con TypeScript.

Si bien Deno y Bun ofrecen mejores alternativas a Node.js, no han podido superar la adopción masiva de Node por parte de las grandes empresas tecnológicas y la comunidad de desarrolladores que lo compone. Comparemos estos tres frameworks en varios aspectos.

Tiempo de ejecución de JavaScript

Node se basa en el motor V8 y es el entorno de ejecución de JavaScript más consolidado y popular. Deno se ejecuta en el motor V8 de JavaScript, al igual que Node, pero con seguridad adicional de sandbox.

Bun es otro entorno de ejecución que está disponible para Deno o Node, no como un entorno de ejecución en sí, sino como una integración, según los requisitos del proyecto.

Capacidades del transpilador

Deno admite TypeScript por defecto, lo que elimina la necesidad de añadir una herramienta de transpilación independiente. Node.js requiere una herramienta de transpilación independiente, como Babel, para transpilar TypeScript o las nuevas funciones de JavaScript.

Al igual que Deno, Bun tiene un soporte predeterminado para la transpilación.

Compatibilidad con los módulos ESM y CommonJS

Deno admite módulos ECMAScript y también utiliza módulos CommonJS. Node.js se desarrolló inicialmente para npm con los objetivos de compilación CommonJS, pero ahora también es compatible con ESM.

Bun también admite ESM y es compatible con los módulos CommonJS.

Compatibilidad con API web

El entorno de ejecución de Deno contiene una biblioteca estándar con API integradas para HTTP, sistemas de archivos y redes. Node.js cuenta con un ecosistema más amplio de bibliotecas y módulos de terceros que se utilizan para implementar diferentes tipos de funcionalidades.

Bun depende de los entornos de ejecución de Deno o Node.js para la compatibilidad con la API web.

Funcionalidad de recarga en caliente

Deno está desarrollado para admitir la recarga en caliente de forma predeterminada. Para habilitarla en Node, deberá instalar un paquete de terceros como Nodemon.

Bun funciona con capacidades de recarga en caliente desde Deno o Node.js.

Tabla comparativa

A continuación se muestra una tabla que resume los aspectos que discutimos para Node.js, Bun y Deno:

Conclusión

A lo largo de este tutorial, aprendimos cómo crear una aplicación multiplataforma con Bun v1.1.

Comenzamos repasando qué es Bun y explorando las nuevas funciones de Bun v1.1. Después, vimos cómo crear una aplicación multiplataforma de tareas pendientes usando el entorno de ejecución de Bun y cómo integrarlo con React Native. Por último, comparamos Bun con otros entornos de ejecución de JavaScript como Node.js y Deno.

Espero que esta guía te sea útil. Si tienes alguna pregunta o problema, no dudes en dejar un comentario a continuación.

Solo el monitor 200s falló y las solicitudes de red fueron lentas en producción

Implementar una aplicación web o un sitio web basado en Node es la parte fácil. Asegúrese de que la instancia de Node siga proporcionando recursos a la aplicación es la parte más difícil. Si te interesa garantizar que las solicitudes al backend oa servicios de terceros se realicen correctamente, prueba LogRocket.

Si quieres conocer otros artículos parecidos a Desarrollo de aplicaciones multiplataforma con Bun v1.1 puedes visitar la categoría Aplicaciones.