Next.js, Nuxt.js, Astro, Remix...

Clase 7 de 15 • Audiocurso de Frameworks y Arquitecturas Frontend: Casos de Estudio

Giuliano De Leonardis

student•

Framework Es un conjunto de herramientas y patrones ya definidos, que nos crean restricciones, a cambio de tener un entorno de trabajo estandarizado, con soluciones comunes a problemas frecuentes.

Existen muchos frameworks que nos ayudan a aplicar patrones de diseño, y además nos ofrecen los diferentes modos de renderizado.
La elección de un framework tiene un impacto en la forma en la que diseñamos nuestra arquitectura.

Next.js

Es el framework que usa Platzi. Es un framework de React que nos ofrece: - Server-side rendering - Static-site generation - Incremental static regeneration

Nos ayuda a ordenar el código, ya que debemos seguir una estructura de carpetas para poder generar las rutas de nuestra aplicación. Ventajas de Next.js
Tiene cero configuración
Las compilaciones son súper rápidas
Solución de internacionalización.
Posibilidad de crear endpoints para tu backend, simplemente creando archivos en la carpeta "pages/api"
Nos ofrece todo lo que necesitamos para crear una aplicación web completa.

Remix

Lo más destacable es la posibilidad de crear rutas anidadas
Simplifica la gestión de los estados en la validación de datos de formularios

Nuxt.js

Ofrece renderizado en el servidor, en el cliente y la generación de páginas estáticas de forma incremental.

Frameworks que ofrecen Islas

Astro Es agnóstico a la biblioteca de UI que quieras usar.
Deno Fresh No tiene un paso de compilación, ya que la transformación de nuestro código se hace al vuelo. Esto nos permite tener un entorno de desarrollo muy rápido, con despliegues casi instantáneos, y que podemos hacer cambios casi en tiempo real.

¿Cuál framework debería elegir?

Depende de tus necesidades y preferencias.

Next.js es la opción más segura. Es el framwork que más está creciendo.

Frameworks que no están basados en JavaScript

Django (basado en Python)
Laravel (basado en PHP)
Ruby on Rails (basado en Ruby)

Miguel Ángel Durán García

teacher•

Gracias por ese resumen!

Leonardo Andres Martinez Guevara

student•

Buen resumen, gracias bro !

Axel Enrique Galeed Gutierrez

student•

Frameworks

Es un conjunto de herramientas y patrones ya definidos, que nos crean restricciones, a cambio de tener un entorno de trabajo estandarizado, con soluciones comunes a problemas frecuentes.

En el frontend existen muchos frameworks que nos ayudan a aplicar patrones de diseño, y además nos ofrecen los diferentes modos de renderizado.

Arquitectura

Cuando hablamos de arquitectura en el frontend esto va mucho más allá que el uso de un framework. La elección de un framework tiene un impacto en la forma en la que diseñamos nuestra arquitectura.

Next.js

Es el framework que utiliza Platzi.

Es un framework de React que nos ofrece: SSR, SSG y ISR. Nos ayuda a ordenar el código, ya que debemos seguir una estructura de carpetas para poder generar las rutas de nuestra aplicación.

Next.js hace que nuestra arquitectura tienda a ser un monolito.

Ventajas

Tiene cero configuración.
Las compilaciones son superrápidas.
Solución de internacionalización.
Posibilidad de crear endpoints para tu backend, simplemente creando archivos en la carpeta pages/api.
Nos ofrece todo lo que necesitamos para crear una aplicación web completa.

Futuras features

Rutas anidadas.

Curiosidad

Tiene muchas más estrellas en GitHub que los demás frameworks.

Remix

Es una alternativa a Next.js, de los creadores de React Router.

Lo más destacable es la posibilidad de crear rutas anidadas. Su forma de gestionar los formularios simplifica la gestión de los estados en la validación de datos del mismo.

Nuxt.js

Utiliza Vue, ofrece renderizado en el servidor, en el cliente y la generación de páginas estáticas de forma incremental.

Svelte kit

Es la alternativa para Svelte y pronto tendrá su primer versión estable.

Angular Universal

Es la opción para Angular.

Asto

Utiliza la arquitectura de islas, es agnóstico a la biblioteca de ui, es decir, podemos usar componentes de cualquier librería/framework.

Para crear una isla solo tenemos que cargar el componente que queremos convertir en una isla interactiva e indicar con una directiva cuando se le debe dar vida a ese componente en el cliente.

Por defecto, los componentes que se cargan en astro son estáticos.

Uso

Para proyectos con muy como interactividad como landing pages o portafolios.

Deno Fresh

Usa Deno y Preact, este no tiene un paso de compilación, la transformación de nuestro código se hace al vuelo. Esto nos permite tener un entorno de desarrollo muy rápido, con despliegues casi instantáneos, y que podemos hacer cambios casi en tiempo real.

¿Qué framework elegir?

Respuesta

Depende. Depende de las necesidades, preferencias y conocimientos tantos propios como los del equipo de desarrollo.

Según Midudev, Next.js es la opción más segura, ya que es el framework que más está creciendo y más impacto está teniendo en la comunidad.

Otros frameworks

Django (basado en Python)
Laravel (basado en PHP)
Ruby on Rails (basado en Ruby)
- Curiosidad, sigue estrictamente el patrón de MVC.

Kevin Daniel Hincapie Lumbaque

student•

Ha salido Astro 3.0!! Estoy un poco ansioso porque he visto como funciona y me parece una locura, ya quiero que saquen mas cursos de Astro Aqui en platzi .

Matias Ezequiel Rivero

student•

Comparto cuadro comparativo:

Consideraciones

Si buscas SEO y rendimiento inicial, frameworks como Next.js, Nuxt.js y Astro son ideales.
Para dinamismo e interactividad, React, Vue.js y Svelte ofrecen flexibilidad y facilidad de uso.
Herramientas modernas como Remix y Deno son excelentes para proyectos que priorizan estándares web y experiencias optimizadas.

Félix Alejandro Zelaya Orellana

student•

Interesante!

Juan Camilo Moreno

student•

Un framework es un conjunto de herramientas, bibliotecas y convenciones que facilitan el desarrollo de aplicaciones al proporcionar una estructura base sobre la cual construir. En el contexto del desarrollo frontend, los frameworks permiten crear interfaces más eficientes y escalables, facilitando tareas como el manejo del estado, la interacción con APIs y la estilización de componentes. Ejemplos populares incluyen React, Angular y Vue.js. Utilizar un framework ayuda a estandarizar procesos, mejorar la colaboración en equipo y optimizar el tiempo de desarrollo.

Next.js, Nuxt.js, Astro, Remix...

Introducción

¿Qué aprenderás en este curso?

Arquitectura de Frontend: Conceptos

¿Qué es la Arquitectura en el Frontend?

Patrones de arquitectura clásicos

Clean Architecture en el Frontend

Screaming Architecture

Frameworks

Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

Next.js, Nuxt.js, Astro, Remix...

Más allá del código

Monorepositorios vs. Multirepositorios

Flujos de trabajo en Git para trabajar en equipo

Objetivo: crear una plataforma web

Tendencias en la arquitectura

La mala fama de los monolitos

Microfrontends: ¿qué son y cuándo usarlos?

Backend for Frontend

Síguientes pasos

¿Cómo elegir mi arquitectura de frontend y framework?

¿Y ahora por dónde sigo?