Audiocurso de Frameworks y Arquitecturas Frontend: Casos de Estudio
Contenido del curso
Next.js, Nuxt.js, Astro, Remix...
Giuliano De Leonardis
Estudiante
Miguel Ángel Durán García
Profesor
Leonardo Andres Martinez Guevara
Estudiante
Axel Enrique Galeed Gutierrez
Estudiante
Kevin Daniel Hincapie Lumbaque
Estudiante
Matias Ezequiel Rivero
Estudiante
Félix Alejandro Zelaya Orellana
Estudiante
Juan Camilo Moreno
EstudianteNext.js
Es el framework que usa Platzi. Es un framework de React que nos ofrece: - Server-side rendering - Static-site generation - Incremental static regeneration
Remix
Nuxt.js
Ofrece renderizado en el servidor, en el cliente y la generación de páginas estáticas de forma incremental.
¿Cuál framework debería elegir?
Depende de tus necesidades y preferencias.
Frameworks que no están basados en JavaScript
Gracias por ese resumen!
Buen resumen, gracias bro !
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
pages/api.Futuras features
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
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 .
Comparto cuadro comparativo:
Consideraciones
Interesante!
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.