Click para empezar.

microfrontend.dev - @anfibiacreativa

Rendimiento

en tiempo de ejecución.

microfrontend.dev - @anfibiacreativa

microfrontend.dev - @anfibiacreativa

https://www.statista.com/statistics/263437/global-smartphone-sales-to-end-users-since-2007/

2007

2011

2015

2019

2022

250 M

750 M

1,250 M

1000X

MOVILES

CRECIMIENTO

TERMINALES

microfrontend.dev - @anfibiacreativa

28%

iPhone*

*14% EN LATAM/16% APAC

microfrontend.dev - @anfibiacreativa

https://infrequently.org/2021/03/the-performance-inequality-gap/

Presupuesto medio móvil EU

200

€

microfrontend.dev - @anfibiacreativa

https://infrequently.org/2021/03/the-performance-inequality-gap/

Presupuesto rendimiento*

150

kb

* performance budget, para el 'critical path'

microfrontend.dev - @anfibiacreativa

microfrontend.dev - @anfibiacreativa

microfrontend.dev - @anfibiacreativa

Natalia Venditto

aka anfibiacreativa

Principal JavaScript e2e Developer Experience and Tools Lead @Microsoft Azure

Google Developer Expert for Angular and Web Technologies

Autora de https://microfrontend.dev

2021 Microsoft Most Valuable Professional

MPAs

Los sitios web -quasi estáticos- de toda la vida, vamos...

microfrontend.dev - @anfibiacreativa

Cliente

Servidor

microfrontend.dev - @anfibiacreativa

PETICIÓN

RESPUESTA

Cliente

Servidor

microfrontend.dev - @anfibiacreativa

PETICIÓN

RESPUESTA

Cliente

Servidor

microfrontend.dev - @anfibiacreativa

PETICIÓN

RESPUESTA

Frameworks

y librerías...

microfrontend.dev - @anfibiacreativa

10/2010
12/2011
05/2013
02/2014
09/2016
12/2016

microfrontend.dev - @anfibiacreativa

Tree-shaking

Bundle(s)

Minification

Build System

TRANSPILATION

OPTIMIZATION

IN

microfrontend.dev - @anfibiacreativa

Compression

OUT

Dead-code el.

OPTIMIZATION

Tree-shaking

Bundle(s)

Minification

Build System

TRANSPILATION

OPTIMIZATION

IN

microfrontend.dev - @anfibiacreativa

Compression

OUT

Dead-code el.

OPTIMIZATION

Core Web Vitals

Runtime
CLIENT

¿Dónde ocurre?

¿Cuándo ocurre?

¿Qué ocurre?

Client-side rendering

La lógica y el cómputo, el routing, el manejo de los datos, la renderización del HTML, el cacheado, todo ocurre en el lado cliente.

010101

 

101010

 

010101

 

AST

Bytes

Optimized Code

Script

PARSER

INTERPRETER

COMPILER

microfrontend.dev - @anfibiacreativa

010101

 

101010

 

010101

 

AST

Bytes

Machine code

Script

PARSER

INTERPRETER

COMPILER

010101

 

101010

 

microfrontend.dev - @anfibiacreativa

microfrontend.dev - @anfibiacreativa

Hora de teatro.

crédito del emoji: @freezydorito

Buildtime
BUILD S.

¿Dónde ocurre?

¿Cuándo ocurre?

¿Qué ocurre?

Static site generation

La lógica y cómputo, el routing, el manejo de los datos, la renderización del HTML, todo ocurre mayoritariamente en el build-system, durante la compilación. *

microfrontend.dev - @anfibiacreativa

Buildtime
SERVER 

¿Dónde ocurre?

¿Cuándo ocurre?

¿Qué ocurre?

Server-side rendering

-

La lógica y el cómputo, el routing, el manejo de los datos, la renderización del HTML, el cacheado, todo ocurre mayoritariamente en el servidor, a demanda.

Server Redendered Components

Nuxt
v.17.1+
Svelte Kit

microfrontend.dev - @anfibiacreativa

Next.js

etc

Nativo

Metaframeworks

Analog.js

Metaframeworks

Frameworks que se desarrollan por encima de otros frameworks o librerías JavaScript y que ofrecen capacidades adicionales, (entre ellas el Server Side Rendering, o renderizado a demanda de páginas estáticas que luego se hidratan o modifican).

microfrontend.dev - @anfibiacreativa

Hidratación parcial o progresiva

 

Nos permite dinamizar ciertas regiones o componentes selectivamente, con JavaScript y la serialización del estado (y datos relativos).

Ver: Island Architecture

microfrontend.dev - @anfibiacreativa

Frameworks basados en web-standards y HTML-First 

Los frameworks HTML-First puros ofrecen una experiencia que no requiere de compilación ni transpilado.

s el caso de enhance.dev, que promueve el 'progressive enhancement', es decir, agregar JavaScript solo cuando se requiere.

https://enhance.dev

DE INTERÉS:

microfrontend.dev - @anfibiacreativa

Static site generation

// static site generation - cacheada/ no se invalida

async function getBilboSessions() {
  const sessions = await fetch('http://www.bilbostack.com/api/v1/sessions');
 
  const data = await sessions.json();
  return data;
}

export default async function Page() {
  const data = await getBilboSessions();
  
  return (
  	<>
    {data.sessions.map(({id, title, description, speaker, time, track}) => {
    	<div key={id}>
          <h2>{title} | {speaker}</h2>
          <span>{track}</span><span>{time}</span>
          <p>description</p>	
        </div>
    ))}
    </>
   );
}

Server-side rendering (dynamic)

// server-side rendering - dynamic fetching no cacheado

async function getBilboRegistrations() {
  const registrations = await fetch('http://www.bilbostack.com/api/v1/registrations', {cache: 'no-store'});
 
  const data = await registrations.json();
  return data;
}

export default async function Page() {
  const data = await getBilboRegistrations();
  
  return (
  	<>
    {data.sessions.map(({id, name, pronouns, session}) => {
    	<div key={id}>
          <h2>{session} | {id}</h2>
          <span>{name}</span><span>{pronouns}</span>
        </div>
    ))}
    </>
   );
}

Server-side rendering (dynamic)

// server-side rendering - dynamic fetching no cacheado

async function getBilboRegistrations() {
  const registrations = await fetch('http://www.bilbostack.com/api/v1/registrations', { next: { revalidate: 3600 });
 
  const data = await registrations.json();
  return data;
}

export default async function Page() {
  const data = await getBilboRegistrations();
  
  return (
  	<>
    {data.sessions.map(({id, name, pronouns, session}) => {
    	<div key={id}>
          <h2>{session} | {id}</h2>
          <span>{name}</span><span>{pronouns}</span>
        </div>
    ))}
    </>
   );
}

Client-side rendering

// next.js 13 hybrid directiva para ejecución del lado cliente
'use client';

//....imports

async function getBilboRegistrations() {
  const registrations = await fetch('http://www.bilbostack.com/api/v1/registrations');
 
  const data = await registrations.json();
  return data;
}

export default async function Page() {
	// lógica y renderizado
}

Client-side rendering

// astro client:load para crear islas

import Component from '../clientside/component.jsx';

<Component client:load />

MPA o SPA + cacheada en CDN

SSG

SSR

Data Request

AT BUILDTIME

Data Request

ON THE FLY

La naturaleza de la experiencia, de los datos y la necesidad de dinamismo dictan el mecanismo de renderizado y la vida de la caché.

Data Request

AT RUNTIME

(Containerized) Microservice App.

Serverless Func. (Origin)

Edge Computing/Composable

API Gateway, Cache, Validación y Proxy

Homepage

Landing page

Blog page

User page

E-commerce

Hibridos

Arquitectura de 

Establecer limitaciones que nos lleven a desarrollar experiencias ajustadas al los presupuestos de rendimiento, con la experiencia en primer lugar.

Caso de uso

Arquitectura

Decisión

Tech-stack

Definición

Desarrollo

Ciclo de

Despliegue

Opciones de

aplicaciones

experiencias

Arquitectura

Decisión

Tech-stack

Definición

Desarrollo

Ciclo de

Despliegue

Opciones de

microfrontend.dev - @anfibiacreativa

Infraestructuras

en la nube, 'at the edge of the network', y cacheado

microfrontend.dev - @anfibiacreativa

LOAD

CDN

Blob

Cliente

PETICIÓN

REDIRECCION

microfrontend.dev - @anfibiacreativa

HTML

Función

COMPUTE

COMPOSICIÓN

BOOTSTRAP

CACHE

BALANCER

LOAD

CDN

Blob

Cliente

PETICIÓN

REDIRECCION

microfrontend.dev - @anfibiacreativa

HTML

Función

COMPOSICIÓN

BOOTSTRAP

CACHE

RESPUESTA

BALANCER

Protocolos

y redes, y esas cosas...

microfrontend.dev - @anfibiacreativa

Covertura 5G mundial 2024

45

%

microfrontend.dev - @anfibiacreativa

https://www.helpnetsecurity.com/2019/06/14/5g-subscriptions-forecast/

* predicción. 60% de ciudades T-1 (Gartner).

Gracias.

@anfibiacreativa - https://www.microfrontend.dev

microfrontend.dev

Imágenes de Dall-E con Bing Image Creator excepto cuando son de Unsplash y sus autores, y acreditadas como tal.

SSR Optimizando el frontend desde el backend

By Natalia Venditto

SSR Optimizando el frontend desde el backend

  • 49

More from Natalia Venditto