Island Architecture

y Astro

Stiven Castillo
@stivencastillo_

Once upon a time

historia

http://site.com/home.html
http://site.com/about.html

Sinple Page Application

SPA

Es una aplicación web ó un sitio web que cabe en una sola página con el propósito de dar una experiencia más fluida a los usuarios, como si fuera una aplicación de escritorio.

Server

download HTML

download JS

Runtime

Reconciliation

Interactive

Server Side Rendering

SSR

Es una técnica que se basa en la posibilidad de poder renderizar el HTML de nuestros componentes en cadenas de texto en la parte servidor y no en tiempo de ejecución

Server

download HTML

download JS

Hydratation

Interactive

Lazy Loading

Island Architecture

Arquitectura basada en islas

Partial Hydratation
Search input
Menu
carousel
Banner
Filter
Products
Viewport

Pros

  • El JS enviado al cliente solo contiene lo necesario
  • Performance
  • SEO, al igual que el SSR, todo el contenido que se envia al cliente es estático y es good pa'l SEO.
  • Se prioriza contenido importante
  • Basado en componentes, como cualquier framework js moderno.
  • Podría usar cualquier librería js para los componentes.

Cons

  • Concepto relativamente nuevo
  • No es adecuada para páginas altamente interactivas como redes sociales.
  • Implementación en sistemas existentes

Astro

Astro es un constructor de sitios estáticos capaz de generar páginas HTML estáticas ligeras utilizando componentes de interfaz de usuario construidos en otros frameworks como React, Preact, Svelte, Vue y otros.

Caracteristicas

  • Basado en islas de componentes
  • Server-first API design
  • Cero JS, por defecto
  • Preparado para el cualquier entorno
  • Personalizable
  • Agnóstico para la interfaz de usuario

 

Basado en MPA

Multi Page Application

Let's code

Conclusiones

Island Architecture

By Stiven Castillo

Island Architecture

  • 70