Este post del viernes está dedicado a traducir un interesante artículo publicado ayer en
Medium . Decidí aprender un nuevo género de traducciones para mí, así que por favor no patees mucho si algo está mal en alguna parte. Y si es posible, incluso notifique sobre errores y errores tipográficos en PM.
Gracias y buena lectura!
Una historia de cómo las nuevas características de la plataforma web y los marcos compilados definen la próxima era del desarrollo web.
Foto:
Stefan BucherHoy en día, los marcos como
Angular ,
React y
Ember son clave para desarrollar aplicaciones web complejas. Durante la última década (
Angular se lanzó en 2010), el uso de estos marcos se ha convertido en el estándar de facto para muchos de nosotros. Nos ayudan a estructurar nuestro código, administrar el estado de las aplicaciones y construir interfaces complejas basadas en componentes reutilizables.
Sin embargo, como saben, JavaScript es el recurso web más costoso que afecta directamente la interactividad de nuestras páginas. Y el tamaño del código JavaScript de nuestras aplicaciones web es más grande que nunca. La página web promedio es más grande que 3MB, que es más grande que el tamaño del juego original de Doom. Nosotros, como desarrolladores, podemos tener Internet rápido y planes de tarifas asequibles, pero nuestros usuarios pueden no tener todo esto.
Según
Alex Russell , exceder el tamaño de solo 130 KB para todos nuestros recursos puede significar que es imposible cumplir con el intervalo de descarga de 5 segundos en un teléfono estándar y una red móvil. Sin embargo, algunos de nuestros marcos favoritos pueden tomar más por su cuenta.
¿Podemos usar las ventajas que nos brindan los frameworks, pero al mismo tiempo evitar hinchar el código? ¿Tiene comodidad para el desarrollador y, al mismo tiempo, una excelente experiencia de usuario? Yo creo en eso. Y creo que estamos entrando en una nueva era de desarrollo web, que estará determinada por esto ... Una era en la que nuestros marcos comenzarán a desaparecer.
Esbelto
Un ejemplo de esta tendencia es
Svelte , "el marco de IU que desaparece mágicamente" (artículo "El marco de IU que desaparece mágicamente"
en Habré - aprox.).
Svelte es un marco de "tiempo de compilación" que no tiene un tiempo de ejecución específico en el cliente. Estamos acostumbrados a enviar grandes paquetes de JavaScript a nuestros usuarios y esperamos que sus navegadores analicen y ejecuten scripts. Pero
Svelte no funciona así. En su lugar, compila su aplicación en pequeños módulos independientes de JavaScript. En otras palabras, para cuando la aplicación se entregue a sus usuarios, ¡
Svelte desaparecerá!
Un ejemplo de una aplicación que se desarrolló utilizando
Svelte es
Pinafore , un cliente
Mastodon PWA para la red social descentralizada creada por
Nolan Lawson de Microsoft. Pinafore muestra
resultados muy rápidos en la Prueba de página web y una puntuación de 98 puntos en
Lighthouse .
Svelte , en sí mismo, es muy minimalista, pero también existe
Sapper (
S velte
App Mak
er - aprox.), Un marco completo basado en él. Inspirado por Next.js,
Sapper incluye renderizado del lado del servidor, separación de código, estilos de alcance, enrutamiento declarativo y recarga en caliente. Además, la plantilla de inicio
Sapper proporciona PWA de forma predeterminada, con un manifiesto de aplicación web y un trabajador de servicio con almacenamiento en caché automático de recursos.
Le pregunté a Nolan cómo se sentía al usar
Svelte y
Sapper . Me dijo que era un "sueño trabajar con"
Svelte .
Sapper es "un poco menos maduro" y tuvo algunos problemas con él, pero también está satisfecho. También comencé a usar estos dos marcos para un nuevo proyecto, y hasta ahora la combinación de funcionalidad y alta velocidad de operación realmente se siente perfecta.
Plantilla
Svelte inspiró un proyecto alternativo de Ionic:
Stencil .
Nuevamente, el objetivo es adoptar los "mejores conceptos de los marcos más populares", pero al mismo tiempo lograr un mejor rendimiento:
"Con ... los marcos tradicionales y las técnicas de agrupamiento, el equipo estaba luchando por satisfacer las demandas de latencia y tamaño de código para las aplicaciones web progresivas que funcionaban igualmente bien en redes rápidas y lentas, en una diversidad de plataformas y dispositivos". - stenciljs.com
Para comprender en qué consiste
Stencil , encontré una
introducción útil
de Rob Bearman . También hay un
video de
Maximiliano . El resultado de
Stencil es un componente web estándar (más información sobre los componentes web a continuación), no específico de
Stencil . Esto significa que puede usarlo en combinación con otro marco si lo desea (¡pero este artículo trata sobre cómo desaparecen los marcos, no se multiplican!).
Por separado, quiero señalar que a pesar del hecho de que la documentación de
Svelte no presta mucha atención a esto, pero el componente de
Svelte también se puede compilar directamente en el componente web (
aquí hay un ejemplo , si configura el
elemento personalizado aquí ,
obtenemos el resultado ). Sin embargo,
Rich Harris , el creador de
Svelte (¡y
Rollup y muchas otras cosas increíbles!) Me dijo que no creía que hubiera beneficios especiales al usar esta función en este momento.
Stencil también se parece al
polímero más conocido de Google, pero desaparece por completo al salir. Sin embargo, no utilicé demasiado Polymer para comentar con más detalle. Quizás él también merece más atención. La última y
tercera versión comenzó a usar
módulos ES (más sobre esto a continuación), en lugar de
Importaciones HTML , y
npm en lugar de
Bower . También hay un
PWA Starter Kit que recomienda a
Alex Russell como la mejor herramienta para crear aplicaciones web productivas. Le proporciona un patrón
PRPL (Push, Render, Pre-cache, Lazy-load) desde el primer momento.
Próxima generación angular
¡Gracias a Rich Harris por hacerme saber que Angular también está siguiendo esta tendencia!
Angular Elements, una innovación en
Angular 6, le permite exportar componentes angulares como componentes web autoajustables. Por el momento, todavía requiere una "versión mínima e independiente de Angular", pero "funcionan en elementos personalizados que se pueden usar en aplicaciones web creadas sobre la base de otros marcos".
Además,
Ivy es un procesador de nueva generación en Angular, diseñado para reducir drásticamente el tamaño del código resultante. (Aunque todavía vale la pena echarle un vistazo: en un espíritu de competencia amistosa, ¡Rich
comparó los resultados de la compilación
de componentes web de Svelte e Ivy!).
Es genial que los marcos populares adopten este enfoque, haciendo que su código final también sea más compacto. Esperamos que a medida que más y más aplicaciones web pasen a un nuevo enfoque, esto tenga un gran impacto en el rendimiento de Internet en su conjunto.
Además, hay más y más requisitos previos para el hecho de que pronto no necesitaremos marcos en absoluto. Los marcos pueden, por supuesto, simplificar el desarrollo y continuar proporcionando complementos útiles, pero la plataforma web en sí proporciona más funcionalidad que nunca ...
Plataforma web como marco
En mi artículo
"A Rube Goldberg Machine" y la
conversación posterior, mi colega
Ada Rose Cannon describió cómo las nuevas funciones CSS y JavaScript pueden "considerarse como marcos integrados en la plataforma web".
Por ejemplo, las propiedades personalizadas de CSS (mejor conocidas como variables CSS) pueden significar que ya no necesita un precompilador CSS como
Sass . Y CSS Grid ahora puede salvarlo de cargar Bootstrap.
“No necesitas un marco para usar CSS Grid. CSS Grid es un marco ".
- Rachel Andrew
Componentes web
Los componentes web son particularmente fuertes y son la clave de gran parte de esta tendencia. Incluyen las siguientes funciones: elementos personalizados, plantillas Shadow DOM y HTML,
todavía no están disponibles en todas partes , pero, como
dice Ada , tienen un soporte bastante bueno, y
hay archivos polifónicos que les brindan un soporte aún mejor, ¡así que puede usarlos hoy!
Ada y
Ruth John desarrollaron recientemente una aplicación web para visualizar música usando componentes web y
compartieron sus lecciones .
Además, puede sentirse más seguro con nuevas características como Web Components si usa la representación del lado del servidor (SSR) e implementa su lado del cliente con
Mejora progresiva .
Mi preferencia personal es crear una excelente experiencia de SSR y luego mejorarla a una aplicación de página única.
- Ada Rose Cannon
Módulos isomorfos de ES
¡También puede usar
módulos ES ahora! Una vez más, la compatibilidad con el navegador es bastante buena, y puede admitir navegadores más antiguos utilizando el
respaldo "nomodule" .
De hecho, si está de acuerdo con el enfoque de Mejora progresiva SSR +, incluso puede usar módulos ES sin tener que usar herramientas de
compilación para
trasladarlos a otros navegadores, ya que los navegadores más antiguos aún pueden funcionar sin JavaScript. Y usando el cargador de módulos
ESM , también podemos
usar módulos ES directamente en NodeJS .
Esto es genial porque podemos reutilizar nuestros scripts en el frontend y el backend (es decir, "Representación isomórfica"), sin bailar con una pandereta. Podemos estructurar nuestro código frontend sin tener que pegar nuestros scripts, colocar muchas etiquetas de script en una página o usar cargadores del lado del cliente.
Esto es exactamente lo que Ada demostró en su
primera charla de Twitch este mes. También hay una
entrada de blog con explicaciones.
Espero haber podido compartir mis pensamientos al comenzar a entrar en una nueva era de desarrollo web. Una era que depende menos de los marcos de interfaz de usuario tradicionales, bibliotecas CSS y paquetes. Una era en la que enviamos menos bytes y cargamos nuestras aplicaciones web más rápido. La era de los marcos en peligro de extinción.
Gracias a Nolan Lawson, Rich Harris y Ada Rose Cannon por su ayuda e inspiración para este artículo. Este artículo también se publica aquí en mi blog personal.***
Por mi parte, quiero señalar que, desafortunadamente, en este momento solo yo en Habré escribo sobre
Svelte . Por lo tanto, en ruso hay bastante información sobre este maravilloso marco.
Si lo conoció por primera vez, podría estar interesado en leer otros artículos sobre este tema:
¿Quién quiere monitorear activamente su desarrollo? Bienvenido al canal de telegramas en ruso
SvelteJS . Estaremos encantados de verte!
¡Felicitaciones a todos por el verano y las victorias de nuestro equipo! ¡Que tengan un buen fin de semana! ¡Hurra!