Aplicaciones web renderizadas a través de un servidor Deno con Aleph JS

Aleph.js, es un framework de React para crear aplicaciones renderizadas mediante un servidor Deno

, ya abierto en una versión alfa. Aleph hace que muchas de las características principales de Next.js estén disponibles en el entorno de Deno.

El renderizado del lado del servidor configurado desde cero, es la fórmula favorita para la generación de sitios estáticos, sistemas de archivos y enrutamiento de APIs.

La librería de Javascript, Aleph, usa la sintaxis estándar de los Módulos de EcmaScript (ESM) import y no usa un paquete en desarrollo. Aleph, también proporciona un reemplazo para permitir la implementación de nuevos módulos en caliente, a través de React Fast Refresh.

Aleph.js está fuertemente inspirado en Next.js, Next se describe a sí mismo como un framework React centrado en la producción; y al igual que Next.js, Aleph proporciona funciones de productividad para una mejor experiencia de desarrollador.

La versión alfa de Aleph proporciona un sistema de enrutamiento basado en páginas (con soporte para rutas dinámicas), rutas API, soporte de internacionalización basada en rutas, generación de sitios estáticos, pre-renderizado por defecto (con renderizado configurable del lado del servidor), compatibilidad con CSS y Sass.

Los desarrolladores pueden escribir una aplicación web como un conjunto de páginas y APIs, y cada página se implementará con un componente React.

A diferencia de Next.js, Aleph trabaja con Deno, una alternativa reciente a Node.js que busca remediar los puntos débiles percibidos dentro de Node. Deno, que fue lanzado a principios de este año, es por defecto, compatible con TypeScript.

Además, Deno tiene un modelo de seguridad más estricto que no permite ningún acceso a archivos, redes o entornos, excepto que se habilite explícitamente. Deno no utiliza un archivo package.json , ni el directorio node_modules ni módulos CommonJS.

En su lugar, Deno aprovecha los módulos de EcmaScript (ESM) (agregados al estándar de JavaScript ES2015) e importa las dependencias como una URL. La documentación de Aleph explicó las ventajas de productividad del uso de los módulos de Deno con Aleph:

Cada módulo, solo necesita compilarse una vez y luego almacenarse en caché en el disco. Cuando un módulo cambia, Aleph.js solo necesita volver a compilar ese único módulo; sin la necesidad de recompilar el resto con cada cambio.

Aleph admite mapas de importación a través de un archivo dedicado import_map.json en el directorio raíz de la aplicación. Importar mapas es una propuesta del Web Incubator Community Group (WICG) que permite resolver especificadores de importación simples.

Con los mapas de importación, Aleph puede reemplazar import React from "react" con import React from "https://esm.sh/[email protected]" .

Aleph.js requiere un navegador moderno para admitir los módulos ESM y las importaciones dinámicas durante el desarrollo; y por navegador moderno, me refiero a versiones igual o superiores a Chrome 61, Edge 16, Firefox 60, Safari 11 o Opera 48.

Los desarrolladores pueden usar el tiempo de ejecución de Deno para calcular datos en el momento de la compilación y pasar esos datos a una página. Algunos frameworks, como Dojo, llaman a este enfoque: Renderizado en tiempo de construcción.

Next.js proporciona los métodos getStaticProps y getServerSideProps para obtener los datos del momento de la compilación o en cada solicitud.

Los desarrolladores pueden personalizar las páginas 404, y también pueden usar los siguientes componentes personalizados , o para controlar el inicio de la página (el diseño y los estilos globales) y personalizar el contenido de las etiquetas.

Aleph todavía está en una versión alfa y su desarrollo se mantendrá activo, con planes de admitir navegadores más antiguos como IE11 una vez se lance su versión estable.

La idea es, utilizar la librería nomodule.js de SystemJS para importar los módulos; y además, se están realizando trabajos relacionados con el soporte de PWA y AMP.

Los desarrolladores que lo deseen, pueden acceder al sitio de la documentación de Aleph. La librería de Aleph, se encuentra distribuida bajo código abierto distribuido y una licencia MIT. Las contribuciones y comentarios serán bienvenidos y deberán cumplir con las pautas de contribución del proyecto Aleph.

Relacionado

❌ Javascript con Píldoras Informáticas

[no_toc] [expand title="Índice del Vídeotutorial"] 1. Presentación. Vídeo 1 2. Introducción. Vídeo 2 3. Sintaxis Básica I. Ubicación del código. Vídeo 3 4. Sintaxis Básica II. Estructuras Básicas. Vídeo 4 5. Sintaxis Básica III. Operadores Básicos. Vídeo 5 6. Sintaxis Básica IV. Operadores y prompt. Vídeo 6 7. Sintaxis Básica V Arrays, Matrices, Arreglos. Vídeo 7 8. Sintaxis Básica V. Arrays, Matrices, Arreglos II. Vídeo 8 ¡SEGUIR LEYENDO!

❌ Javascript con Falcon Masters

[no_toc] [expand title="Índice del Vídeotutorial"] 1. Introducción 2. Variables 3. Tipos de Dato 4. Arreglos 5. Metodos y propiedades para los Arreglos 6. Condicionales 7. Ciclo Fo 8. Ciclo While 9. Funciones 10. Ejercicio con Funciones y Formularios 11. Scope de Javascript (ámbito de las variables) 12. Metodos y propiedades para Cadenas de Texto 13. Introducción al DOM (Document Object Model) 14. Creando Nodos del DOM ¡SEGUIR LEYENDO!

❌ Javascript con Eduardo Ibarra

[no_toc] [expand title="Índice del Vídeotutorial"] 1. Qué es un lenguaje de programación 2. Qué es Javascript Y nuestro primer Hola Mundo! 3. Variables 4. Control de flujo: If, Else 5. Arrays 6. Sublime text para trabajar con archivos 7. Ciclo For 8. Recorriendo un Array con un Ciclo For 9. Funciones 10. HTML 11. Respondiendo a clicks en botones eventos [/expand] [yotuwp type="playlist" id="PLYPjmy5IVxT8ohy6P2k4hNU2PtstqP8Zh" ] [expand ¡SEGUIR LEYENDO!

❌ Javascript con Código Facilito

[no_toc] [expand title="Índice del Vídeotutorial"] 1. Introducción, Hola Mundo y Variables 2. Números y operaciones aritméticas 3. Cadenas 4. Condiciones 5. Ciclo While 6. Ciclo For 7. typeof, null y undefined 8. Práctica 1 - Número mágico 9. Seleccionar elementos del DOM 10. Eventos 11. Arreglos 12. Funciones 13. Métodos para arreglos 14. Filter ES5 15. Map ES5 16. forEach ES5 17. reduce ES5 18. Closures ¡SEGUIR LEYENDO!

ZzFXM: Un pequeño renderizador de música JavaScript

ZzFXM: Un pequeño renderizador de música JavaScript, que genera pistas de música estéreo a partir de patrones de notas y datos de instrumentos musicales. Las muestras de instrumentos se crean utilizando una versión modificada, del minúsculo generador de sonido ZzFX de Frank Force. ZzfxM fue desarrollado para crear música para producciones de tamaño limitado (es decir, juegos js13k). El formato de la canción se basa libremente ¡SEGUIR LEYENDO!