Marko: UI Declarativa con Renderizado del Lado del Servidor (SSR) por Streaming

En el panorama digital actual, de ritmo rápido, el rendimiento del sitio web es primordial. Un sitio web que se carga lentamente o que no responde puede generar frustración en los usuarios, mayores tasas de rebote y, en última instancia, pérdida de ingresos. Marko, un framework de UI declarativo, aborda estas preocupaciones al ofrecer un enfoque único para la construcción de aplicaciones web de alto rendimiento. Este artículo profundizará en las características principales de Marko, particularmente sus capacidades de renderizado del lado del servidor (SSR) por streaming, y explicará por qué es una opción convincente para los desarrolladores que construyen sitios web y aplicaciones web para una audiencia global.

¿Qué es Marko?

Marko es un framework de UI de código abierto creado por eBay y ahora mantenido por el equipo de Marko. Se distingue de otros frameworks por su enfoque en el rendimiento, la simplicidad y la escalabilidad. A diferencia de algunos frameworks que priorizan el renderizado del lado del cliente, Marko enfatiza el renderizado del lado del servidor, especialmente el SSR por streaming. Esto significa que el servidor pre-renderiza el HTML de su aplicación y lo envía al navegador en fragmentos (streams) a medida que está disponible, lo que lleva a un First Contentful Paint (FCP) más rápido y una mejor experiencia de usuario.

Características clave y beneficios de Marko

• Sintaxis Declarativa: Marko utiliza una sintaxis declarativa similar al HTML, lo que facilita su aprendizaje y uso. Esta simplicidad reduce la curva de aprendizaje para los desarrolladores y les permite centrarse en la construcción de funciones en lugar de lidiar con conceptos complejos del framework.
• Renderizado del Lado del Servidor (SSR) por Streaming: Esta es posiblemente la característica más poderosa de Marko. El SSR por streaming permite que el servidor envíe HTML al navegador de forma incremental, tan pronto como esté listo, en lugar de esperar a que se renderice toda la página. Esto mejora significativamente el rendimiento percibido del sitio web, especialmente para los usuarios con conexiones a Internet más lentas o aquellos que acceden al sitio desde ubicaciones geográficamente distantes. Imagine a un usuario en la India rural accediendo a un sitio web construido con el SSR por streaming de Marko. Comenzarían a ver el contenido mucho más rápido en comparación con un sitio web que se basa únicamente en el renderizado del lado del cliente, que necesita descargar todo JavaScript antes de mostrar algo.
• División automática de código: Marko divide automáticamente su código JavaScript en fragmentos más pequeños y los carga bajo demanda, minimizando el tamaño de descarga inicial y mejorando los tiempos de carga de la página. Esto es crucial para los usuarios de dispositivos móviles y aquellos con ancho de banda limitado.
• Arquitectura basada en componentes: Marko promueve una arquitectura basada en componentes, lo que le permite dividir su aplicación en partes reutilizables y manejables. Esto mejora la organización, el mantenimiento y la capacidad de prueba del código.
• Sintaxis similar a HTML con extensiones: La sintaxis de Marko extiende HTML con funciones como componentes, bucles y renderizado condicional, lo que la hace intuitiva para los desarrolladores familiarizados con HTML. Por ejemplo, puede crear fácilmente un componente de botón reutilizable y usarlo en toda su aplicación.
• Optimizado para SEO: El renderizado del lado del servidor hace que su sitio web sea más fácil de rastrear por los bots de los motores de búsqueda, lo que mejora su clasificación en los motores de búsqueda. Esta es una ventaja significativa para las empresas que buscan atraer tráfico orgánico a sus sitios web.
• Tamaño de paquete pequeño: Marko tiene un tamaño de tiempo de ejecución relativamente pequeño en comparación con otros frameworks populares, lo que contribuye aún más a tiempos de carga más rápidos.
• Mejora progresiva: Marko fomenta la mejora progresiva, lo que permite que su sitio web funcione incluso si JavaScript está deshabilitado o no se carga. Esto asegura una mejor experiencia de usuario para todos los visitantes, independientemente de las capacidades de su navegador.
• Optimizaciones integradas: Marko incluye varias optimizaciones integradas, como el almacenamiento en caché de plantillas y la diferenciación del DOM, que mejoran aún más el rendimiento.
• Fácil integración: Marko se puede integrar fácilmente con los backends de Node.js existentes y otras herramientas de front-end.

Profundizando en el renderizado del lado del servidor por streaming

Exploremos los beneficios del SSR por streaming con más detalle:

First Contentful Paint (FCP) mejorado

FCP es una métrica clave para medir el rendimiento del sitio web. Representa el tiempo que tarda el primer contenido (texto, imagen, etc.) en aparecer en la pantalla. El SSR por streaming reduce significativamente el FCP porque el navegador comienza a recibir y renderizar HTML mucho antes que con el renderizado del lado del cliente. En lugar de esperar a que se descargue y ejecute todo el paquete de JavaScript, el navegador puede comenzar inmediatamente a mostrar el contenido inicial de la página. Imagine un sitio web de comercio electrónico que muestra listados de productos. Con el SSR por streaming, el usuario ve las imágenes y descripciones de los productos casi instantáneamente, incluso antes de que los elementos interactivos estén completamente cargados. Esto crea una experiencia de usuario mucho más atractiva y receptiva.

Mejor experiencia de usuario

Un FCP más rápido se traduce en una mejor experiencia de usuario. Es menos probable que los usuarios abandonen un sitio web si ven el contenido rápidamente. El SSR por streaming proporciona una experiencia más fluida y receptiva, especialmente en redes o dispositivos más lentos. Esto es particularmente importante para los usuarios de dispositivos móviles en los países en desarrollo donde la conectividad a Internet puede ser poco fiable. Por ejemplo, un sitio web de noticias que utiliza SSR por streaming puede entregar titulares y resúmenes de noticias de última hora al instante, incluso a usuarios con ancho de banda limitado.

Beneficios de SEO

Los bots de los motores de búsqueda confían en el contenido HTML para comprender la estructura y el contenido de un sitio web. El renderizado del lado del servidor proporciona HTML disponible, lo que facilita que los motores de búsqueda rastreen e indexen su sitio. Esto mejora su clasificación en los motores de búsqueda y aumenta el tráfico orgánico. Si bien Google ha mejorado en la renderización de JavaScript, el SSR aún proporciona una ventaja significativa, especialmente para los sitios web con aplicaciones complejas y pesadas en JavaScript. Un sitio web de agencia de viajes que utiliza SSR tendrá sus páginas de destino indexadas correctamente, lo que garantiza que aparezcan en los resultados de búsqueda relevantes.

Accesibilidad mejorada

SSR contribuye a una mejor accesibilidad al proporcionar contenido HTML que puede ser fácilmente analizado por lectores de pantalla y otras tecnologías de asistencia. Esto asegura que su sitio web sea utilizable por personas con discapacidades. Al renderizar el contenido inicial en el servidor, proporciona una base sólida para la accesibilidad, incluso antes de que JavaScript se haya cargado por completo. Por ejemplo, un sitio web gubernamental que utiliza SSR se asegurará de que todos los ciudadanos, independientemente de sus capacidades, puedan acceder a información importante.

Marko vs. Otros Frameworks

¿Cómo se compara Marko con otros frameworks de UI populares como React, Vue y Angular?

Marko vs. React

React es una biblioteca ampliamente utilizada para crear interfaces de usuario. Si bien React se puede utilizar con el renderizado del lado del servidor (usando Next.js o frameworks similares), normalmente se basa en el renderizado del lado del cliente por defecto. El SSR por streaming de Marko proporciona una ventaja de rendimiento sobre el enfoque tradicional de SSR de React. El ecosistema de React es vasto, ofrece muchas bibliotecas y herramientas, pero esto también puede generar complejidad. Marko se centra en la simplicidad y el rendimiento, ofreciendo una experiencia de desarrollo más optimizada. Considere una aplicación de panel de control compleja. Si bien React ofrece un enfoque basado en componentes, el SSR por streaming de Marko podría proporcionar un impulso de rendimiento para la carga inicial de la página, especialmente cuando se muestran grandes conjuntos de datos.

Marko vs. Vue

Vue es otro framework popular conocido por su facilidad de uso y enfoque progresivo. Vue también admite el renderizado del lado del servidor (usando Nuxt.js). Marko y Vue comparten algunas similitudes en términos de simplicidad y arquitectura basada en componentes. Sin embargo, el SSR por streaming de Marko ofrece una clara ventaja de rendimiento, particularmente para sitios web con mucho tráfico o UI complejas. Vue a menudo requiere más optimización manual para el renderizado del lado del servidor para lograr un rendimiento óptimo. Por ejemplo, un sitio web de redes sociales podría beneficiarse del SSR por streaming de Marko para mostrar rápidamente fuentes y actualizaciones de los usuarios.

Marko vs. Angular

Angular es un framework completo que proporciona una solución integral para crear aplicaciones web complejas. Angular admite el renderizado del lado del servidor a través de Angular Universal. Sin embargo, Angular puede ser más complejo de aprender y usar en comparación con Marko y Vue. La simplicidad y el enfoque en el rendimiento de Marko lo convierten en una alternativa convincente para proyectos donde el rendimiento es una prioridad principal. Una gran aplicación empresarial podría elegir Angular por sus características robustas y escalabilidad, pero una startup más pequeña podría optar por la velocidad y la facilidad de desarrollo de Marko.

En resumen: Si bien React, Vue y Angular admiten el renderizado del lado del servidor, el SSR por streaming integrado de Marko proporciona una ventaja de rendimiento significativa. Marko prioriza el rendimiento y la simplicidad, lo que lo convierte en una excelente opción para proyectos donde estos factores son críticos.

Primeros pasos con Marko

Empezar con Marko es relativamente sencillo. Aquí hay un esquema básico:

1. Instalar Node.js: Asegúrese de tener Node.js instalado en su sistema.
2. Instalar la CLI de Marko: Ejecute `npm install -g marko-cli` para instalar la interfaz de línea de comandos de Marko globalmente.
3. Crear un nuevo proyecto Marko: Use el comando `marko create my-project` para crear un nuevo proyecto Marko.
4. Explorar la estructura del proyecto: El proyecto contendrá archivos como `index.marko` (su componente principal), `server.js` (su punto de entrada del lado del servidor) y `marko.json` (la configuración de su proyecto).
5. Ejecutar el servidor de desarrollo: Use el comando `npm start` para iniciar el servidor de desarrollo.
6. Empezar a crear sus componentes: Cree nuevos archivos `.marko` para sus componentes e impórtelos en su componente principal.

Ejemplo de componente Marko (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>¡Hola, Mundo!</h1>
  <p>Este es un componente Marko simple.</p>
</body>
</html>

            

              
                Copy
              
            
          

Ejemplo de renderizado del lado del servidor (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

            

              
                Copy
              
            
          

Estos son solo ejemplos básicos para comenzar. Marko ofrece una gran cantidad de funciones y opciones para la creación de aplicaciones web complejas. Consulte la documentación oficial de Marko para obtener información más detallada.

Ejemplos del mundo real de Marko en acción

Si bien eBay desarrolló originalmente Marko, ahora lo utilizan varias empresas en diferentes industrias:

• eBay: eBay utiliza Marko ampliamente para su plataforma principal, lo que demuestra su capacidad para manejar alto tráfico e interfaces de usuario complejas.
• Lazada (Sudeste Asiático): Una importante plataforma de comercio electrónico en el sudeste asiático (propiedad de Alibaba) utiliza Marko para mejorar el rendimiento y ofrecer una mejor experiencia de compra a sus usuarios en varios países con diferentes velocidades de Internet.
• Numerosas startups y empresas: Muchas otras empresas están adoptando Marko por sus beneficios de rendimiento y facilidad de uso.

Estos ejemplos muestran la versatilidad de Marko y su idoneidad para una amplia gama de aplicaciones web.

Mejores prácticas para usar Marko

Para aprovechar al máximo Marko, considere estas mejores prácticas:

• Aprovechar el SSR por streaming: Aproveche al máximo las capacidades de SSR por streaming de Marko para mejorar el FCP y la experiencia del usuario.
• Optimizar sus componentes: Optimice sus componentes de Marko para el rendimiento minimizando las actualizaciones del DOM y evitando re-renders innecesarios.
• Usar la división de código: Utilice la función de división de código automática de Marko para reducir el tamaño de descarga inicial de su código JavaScript.
• Considerar la accesibilidad: Asegúrese de que su sitio web sea accesible siguiendo las pautas de accesibilidad y utilizando HTML semántico.
• Probar su aplicación a fondo: Pruebe su aplicación en diferentes dispositivos y navegadores para garantizar una experiencia de usuario consistente y confiable.

Conclusión: Marko: una opción poderosa para el desarrollo web moderno

Marko es un framework de UI potente y versátil que ofrece una solución convincente para la creación de aplicaciones web de alto rendimiento. Su sintaxis declarativa, sus capacidades de SSR por streaming y su enfoque en la simplicidad lo convierten en una excelente opción para los desarrolladores que buscan mejorar el rendimiento del sitio web, mejorar la experiencia del usuario e impulsar el SEO. Al adoptar Marko, los desarrolladores pueden crear sitios web y aplicaciones web que sean rápidas, receptivas y accesibles para los usuarios de todo el mundo. Ya sea que esté construyendo un pequeño sitio web personal o una gran aplicación empresarial, vale la pena considerar a Marko como su framework de UI preferido. Su énfasis en la entrega de contenido de forma rápida y eficiente lo hace especialmente relevante en el panorama digital actual, globalizado y orientado al rendimiento.

Recursos adicionales:

• Sitio web oficial de Marko
• Repositorio de GitHub de Marko
• Documentación de Marko