Todos sabemos cómo la web se ha transformado con el tiempo. ¿Recuerdas los días de los sitios web estáticos? Luego vino la era de los sitios generados por servidores que utilizaban herramientas como Perl y PHP, allanando el camino para marcos potentes como Laravel, Django y Rails. Estas herramientas agregaron un nivel completamente nuevo de complejidad y posibilidades a la web. Los dispositivos móviles cambiaron el juego. Nos hicieron repensar cómo usamos la web. Los sitios web empezaron a parecer aplicaciones, gracias a marcos especiales como React y AngularJS. Estas páginas web hicieron que funcionaran sin problemas sin tener que recargarlas. Sin embargo, estas sofisticadas aplicaciones web tenían un inconveniente. Tardaron más en cargarse debido a la gran cantidad de código adicional, especialmente JavaScript. Además, lograr que aparecieran bien en los motores de búsqueda fue difícil. Ahora llega Astro, un nuevo enfoque que nos devuelve a lo básico sin dejar de aprovechar lo mejor de lo que hemos aprendido. Astro es un marco web todo en uno para crear sitios web rápidos y centrados en contenido que ayuda a los desarrolladores web a crear sitios web interesantes utilizando herramientas populares como React, Preact, Vue y Svelte. Los sitios web de Astro se componen de diferentes piezas que funcionan juntas. Lo especial de Astro es que ayuda a que las páginas se carguen súper rápido. Elimina cosas innecesarias, como JavaScript adicional, y prepara las páginas con anticipación. Si una parte de la página necesita hacer algo interactivo, Astro agrega la cantidad justa de código para que funcione. ¿Por qué Astro? Astro centrado en el contenido fue diseñado para crear sitios web ricos en contenido. Esto incluye la mayoría de los sitios de marketing, sitios de publicación, sitios de documentación, blogs, portafolios y algunos sitios de comercio electrónico. Esta es una de las diferencias más importantes que hay que entender sobre Astro. El enfoque único de Astro en el contenido le permite hacer concesiones y ofrecer características de rendimiento inigualables que no tendrían sentido para implementar marcos web más centrados en aplicaciones. El enfoque de AMP de Astro Astro es un marco de AMP. Sin embargo, Astro también se diferencia de otros marcos de AMP. Su principal diferencia es que utiliza JavaScript como lenguaje de servidor y tiempo de ejecución. En Astro, siempre estás escribiendo JavaScript, HTML y CSS. De esa manera, puedes renderizar tus componentes de UI (como React y Svelte) tanto en el servidor como en el cliente. Primer enfoque del servidor Astro aprovecha al máximo la representación del lado del servidor sobre la representación del lado del cliente. Este es el mismo enfoque que los marcos tradicionales del lado del servidor como PHP, WordPress, Laravel, Ruby on Rails, etc. Este enfoque contrasta con otros marcos web JavaScript modernos como Next.js, SvelteKit, Nuxt, Remix y otros. Estos marcos requieren la representación del lado del cliente de todo su sitio web e incluyen la representación del lado del servidor principalmente para abordar problemas de rendimiento. El modelo SPA tiene sus beneficios. Sin embargo, esto se produce a expensas de una complejidad adicional y compensaciones en el rendimiento. Estas compensaciones perjudican el rendimiento de la página, incluidas métricas críticas como el tiempo de interacción (TTI), que no tiene mucho sentido para sitios web centrados en contenido donde el rendimiento en la primera carga es esencial. Zero JS, por defecto Sin sobrecarga de tiempo de ejecución de JavaScript que lo ralentice. En muchos marcos web, es fácil crear un sitio web que se vea genial durante el desarrollo pero que se cargue terriblemente lento una vez implementado. JavaScript suele ser el culpable, ya que los teléfonos de los usuarios y los dispositivos de menor potencia rara vez igualan la velocidad de la computadora portátil de un desarrollador. La magia de Astro está en cómo combina los dos valores explicados anteriormente (un enfoque en el contenido con una arquitectura MPA centrada en el servidor) para hacer concesiones y ofrecer características que otros marcos no pueden. El resultado es un rendimiento web sorprendente para cada sitio web, islas de componentes listas para usar. Una de las características interesantes de Astro son sus islas de componentes (también conocidas como islas Astro). El término «Astro Island» se refiere a un componente de interfaz de usuario interactivo en una página estática de HTML. Pueden existir varias islas en una página y una isla siempre se representa de forma aislada. Piense en ellos como islas en un mar de HTML estático y no interactivo. En Astro, puedes usar cualquier marco de interfaz de usuario compatible (React, Svelte, Vue, etc.) para representar islas en el navegador. Puedes mezclar y combinar diferentes marcos en la misma página, o simplemente elegir tu favorito. La técnica sobre la que se basa este patrón arquitectónico se conoce como hidratación parcial o selectiva. Astro aprovecha esta técnica entre bastidores, alimentando tus islas automáticamente. Directivas de cliente Estas directivas controlan cómo se hidratan los componentes de UI Framework en la página. De forma predeterminada, un componente de UI Framework no está hidratado en el cliente. Si no se proporciona ninguna directiva client:*, su HTML se representa en la página sin JavaScript. Una directiva de cliente solo se puede utilizar en un componente del marco de la interfaz de usuario que se importa directamente a un componente .astro. Hay cinco niveles de hidratación con diferentes prioridades: client:load hidrata el componente lo antes posible. client:idle hidrata el componente cuando la página termina de cargarse. Útil para componentes de baja prioridad que no necesitan interactividad inmediata. client:visible={string} hidrata el componente tan pronto como aparece en la ventana gráfica. client:media={string} toma una consulta CSS como argumento y carga el componente tan pronto como se cumple. cliente: solo omite por completo la representación HTML y presenta el componente en el navegador. En un mundo donde la velocidad y facilitar las cosas a los usuarios son muy importantes, Astro se destaca como una nueva forma genial de crear sitios web. Es como una mezcla de lo antiguo y lo nuevo que hace que la Web sea aún mejor. ¡Únase y vea cómo Astro está cambiando el juego del desarrollo web! ¡Estén atentos al boletín de la próxima semana! Porque compararemos los marcos web y lo haremos mucho más interesante para usted.

Source link