Contenido del curso
Empaquetadores y herramientas esenciales para desarrollo frontend JS
¿Cuáles son los principales empaquetadores de JavaScript?
En el desarrollo web moderno, el empaquetamiento de archivos es esencial para optimizar la carga de las aplicaciones. Los empaquetadores, conocidos como module bundlers, combinan múltiples archivos en uno solo, lo que reduce las consultas al servidor y mejora la velocidad de carga. Entre los empaquetadores más destacados se encuentran:
Webpack: Popular por su flexibilidad y control en la configuración mediante el archivo webpack.config.js. Permite code splitting para cargar solo lo necesario.
Parcel: Famoso por su simplicidad, evitando configuraciones complejas y funcionando con una magia que agrada a muchos desarrolladores.
Rollup: Especializado en minimizar el tamaño de los archivos usando técnicas como Tree Shaking. Ideal para crear librerías de JavaScript.
Estos empaquetadores se eligen según las necesidades del proyecto, ofreciendo cada uno ventajas únicas.
¿Qué función cumplen los compiladores en JavaScript?
Los compiladores de JavaScript, aunque técnicamente no todos son compiladores, transforman código para que los navegadores puedan comprenderlo y ejecutarlo. Dentro de este ámbito, encontramos:
Babel: Un transpilador que permite usar la sintaxis más moderna de ECMAScript. Además, mediante plugins, traduce estilos de código preferenciales en JavaScript compatible.
TypeScript: No un compilador per se, sino un lenguaje tipado que amplía a JavaScript. Aporta características de orientación a objetos y facilita la gestión de dependencias.
Ambas herramientas son cruciales para modernizar el código y asegurar la compatibilidad en diversos navegadores.
¿Cómo se integra el CSS con JavaScript moderno?
La integración de estilos se ha adaptado para que los desarrolladores trabajen de manera más eficiente. Aunque tradicionalmente CSS se escribía separado de JavaScript y HTML, hoy en día encontramos métodos como:
CSS in JS: Herramientas que permiten escribir CSS directamente en componentes JavaScript. Esto facilita mantener estilos y lógicas en un solo lugar. Ejemplos prominentes son Styled Components y Emotion.
Preprocesadores CSS: Sass, Less, y Stylus ofrecen funcionalidades avanzadas como mixins y funciones, convirtiendo estos estilos en CSS puro que los navegadores entienden.
La elección de herramientas para estilos depende del flujo de trabajo preferido y necesidades del proyecto.
¿Qué roles cumplen los routers en aplicaciones web?
Los routers gestionan la navegación dentro de aplicaciones de una sola página (SPA). Aunque algunos proyectos pequeños podrían no requerir un router, con el crecimiento de la aplicación, se hacen esenciales para:
React Router es un ejemplo principal de herramientas de routing para aplicaciones React. Este elemento del desarrollo es fundamental para mantener la estructura y la organización de las aplicaciones web.
¿Qué beneficios trae trabajar con frameworks de JavaScript?
Los frameworks se destacan por ofrecer una plataforma todo-en-uno que acelera el desarrollo. Incluyen múltiples funciones integradas, desde componentes UI hasta enrutamiento y manejo de estado. Angular es un ejemplo de framework todopoderoso, aunque su integración fuera de su ecosistema puede ser más compleja. Los beneficios clave incluyen:
El dominio de un framework facilita el desarrollo rápido y sólido, siendo una inversión a largo plazo para cualquier equipo de desarrollo.
¿Cómo se realiza el manejo del estado y la consulta de datos?
La gestión del estado y la consulta de datos son componentes críticos en el desarrollo de aplicaciones complejas. Se utilizan herramientas como:
Manejo de estado: Librerías como Redux, Xstate, y Mobx proporcionan una estructura determinista para gestionar datos, asegurando que todos los componentes trabajen con un flujo de datos consistente.
Consulta de datos: Protocolos como API REST y GraphQL regulan la comunicación con el backend. GraphQL, junto con herramientas como Apollo, permite no solo consultar sino también manejar el estado con un enfoque de capas, separando responsabilidades y facilitando la evolución del proyecto.
Este enfoque modular proporciona flexibilidad y mantiene la aplicación organizada a medida que se expande.
Joel Eduardo Sánchez Herrera
Estudiante
Luis Alejandro Vera Hernandez
Estudiante
Víctor Isaac Arias García
Estudiante
Juan Castro
Profesor
Eduardo Hidalgo Díaz Rugama
Estudiante
Diego Andres Cardenas Caro
Estudiante
Gonzalo Vidal
Estudiante
Mario Barceló Sospedra
Estudiante
Omar Gabriel Aguilar Moscoso
EstudianteJuan Castro
Profesor
Miguel Angel Reyes Moreno
Estudiante
Sylvester Josué Rojas Cañón
Estudiante
Jimmy Buriticá Londoño
Estudiante
Juan Diego Quintero Calderón
Estudiante
Juan Pablo Jimenez
Estudiante
Juan Manuel Velez
Estudiante
Claudio Pedalino
Estudiante
Rodrigo Ramos Xochiteotzin
Estudiante
Sebastián Buitrago
EstudianteMario Barceló Sospedra
Estudiante
Eduardo Kiriakos Piazza
Estudiante
Rubén Cuello
Estudiante
Emerson David Cabrera Salas
Estudiante
Victor Carmona Pale
Estudiante
José Alberto Ortiz Vargas
Estudiante
roy vargas
Estudiante
Edgar Aguilar Cubas
Estudiante
Seba Cardoso
EstudianteJuan Castro
Profesor
Jorge De Jesus Tejeda Bello
Estudiante
Irving Juárez
EstudianteSylvester Josué Rojas Cañón
Estudiante
Jean Paul Yepes
EstudianteRESUMEN
Existen empaquetadores que nos ayudan a tener todos los archivos en produccion pero al momento de mandar al navegador sea lo mas ligero posible
Se dice que usemos webpack para paginas web y aplicaciones y Rollup para librerias.
Compiladores que transforman codigo Javascript que no es exactamente JS que los navegadores si pueden entender:
Las herramientas para UI son para encargarse de las vistas e interaccion con los usuarios, puede ser JS solito pero si trabajamos en Frameworks se suelen usar:
Estan los estilos donde se pueden usar diferentes cosas, pero hay que tener en cuenta que a veces escribimos mas JS que CSS:
En CSS-in-JS normalmente el html, el css y el JS estaria en cada archivo individual pero esto nos permite desarrollar en los 3 lengaujes en un mismo componente, que necesariamente no es un mismo archivo.
En los Routers son la forma en la que hacemos la navegacion de la aplicacion, muestra cierto contenido dependiendo de la URL
Los frameworks son elementos todos en uno, que se encargan de todos los apartados ya que todo lo contiene. Trabajar con un Framework acelera tu desarrollo.
Los entornos de desarrollo completos son un todo en uno, un grupo de librerias configuradas para trbajar con mas librerias. se llaman mas CLI y desde la consola podemos elegir lo que queremos y configurar todo por nuestro lado.
En el manejo de estado son las librerias que podremos definir un estandar de flujo de datos constante y predecible dentro de la aplicacion, en vez de que todos sean diferentes podremos definir un patron comun
En la consulta de datos son formas o protocolos para comunicarnos con el backend para enviar y recibir informacion, hay herramientas para hacer peticiones que no hacen diferencia, pero estas herramientas si hacen diferencia:
Gracias por el resumen
Muchas gracias por este resumen me ayudo mucho para tomar apuntes más puntuales de esta clase
:thinking: ¿A quién recomiendan seguir en Twitter para tener una buena dosis diaria de consejos sobre programación?
Definitivamente Hector Vega, Lee Robinson, y Sergio Xalambrí
@NavisCode --> sube un monton de contenido y recursos todos los dias. @sachalifs --> contenido muy didactico sobre js @carlosazaustre --> Frontend Full
Creo que la explicación de Juan DC sobre module bundlers (empaquetadores) es más entendible que el curso entero de webpack, aterriza muy bien los conceptos... ni siquiera lo entendí de la misma página oficial de webpack, creo que tiene el don de la pedagogía...algo que en un año de estudiar en platzi-desarrollo web lo he visto en contaditos profes, Freddy, De Granda, Juan DC y Jonathan Alvarez
Totalmente de acuerdo.
Si man, Juan DC, De Granda y Jonathan son lo mejor de Platzi
#HaganLogosParaRoutersYCLIs
Sería un buen reto para los alumnos de UI de Platzi.
Angular si los tiene...
6-Ecosistema de frameworks y librerías JavaScript
Empaquetadores
Cuando trabajamos en un proyecto de verdad tenemos muchos archivos, pero no se los vamos a mandar todos al navegador por que cada ida y vuelta es muy demorado, en lugar de hacer una consulta para cada archivo podemos empaquetar todos los archivos en un solo y además vamos a optimizarlo para que el navegador se demore menos.
Para esto hay varias herramientas, las más populares siendo:
"Usemos webpack para construir sitios o aplicaciones web y que usemos rollup para construir librerías de JS".
Compiladores
Su función es transformar código JS que no es exactamente JS a un JS que los navegadores si puedan entender.
Herramientas para UI
Se encargan de la parte de vistas e interacción con el usuario, puede ser JS solo pero se pueden usar frameworks. Transforman componentes en un render con el que puedan interactuar los usuarios.
CSS y Preprocesadores
Podemos escribir el CSS de manera nativa, o podemos usar preprocesadores como los vistos en los cursos anteriores que nos permiten escribirlos más cómodamente y ellos se encargan de convertir ese código en CSS que los navegadores puedan entender.
CSS-in-JS
Es la forma de escribir CSS con JS, si usamos componentes con CSS-in-JS entonces podemos desarrollar con los 3 lenguajes en un mismo componente, este componente no significa un mismo archivo. Las herramientas más populares para esto son: Styled Components y Emotion.
Routers
Son la forma de hacer la navegación de nuestra aplicación, en los proyectos más pequeños probablemente no es necesario, pero si crece la aplicación muy probablemente si. Algunos son: React Router, Vue Router, Svelte Router, LitElement Router, Whatever Router.
Frameworks (todo en uno)
Son un todo en uno, cuentan con todo de lo de arriba o casi todo. Trabajar con un framework acelera mucho el desarrollo. El problema es que por ser tan grandes, es algo difícil de integrar con otras herramientas que no sean angular o que no hayan sido construidas exclusivamente para angular.
Entornos de desarrollo (todo en uno)
Son un grupo de librerías ya configuradas para que podamos trabajar con un montón de librerías en conjunto, normalmente estas herramientas se llaman CLI y nos dejan elegir desde la consola como queremos el proyecto. Podemos crear nuestros propios entornos de desarrollo a la medida de lo que necesitamos.
Create React App, Vue CLI, Svelte CLI, Polymer CLI, Whatever CLI
Manejo del Estado
Son las librerías que nos ayudan a definir un estándar de flujo de datos constante y predecible dentro de la app, en vez de tener cada componente trabajando diferente desde sus propios datos o teniendo diferentes partes de nuestra app comunicándose entre si de manera enredada vamos a tener un patrón común, un lugar centralizado dónde este toda la información y nos permita darle un mismo orden a la comunicación entre los componentes.
Como: Redux, XState, MobX
Consulta de Datos
Son formas o protocolos con los que nos comunicamos con el backend para enviar y recibir información de nuestros usuarios. La forma correcta de trabajar es creando capas, en vez de tener todo el código en un solo lugar, lo que hacemos es crear una capa de UI y otra capa para la consulta de datos, de esta forma a la capa de UI no le importa de donde sale la información o como aparece, solo los recibe. Algunas veces las herramientas con las que hacemos peticiones de datos también nos permiten manejar el estado de la aplicación
API Rest, GraphQl
Gran clase, todo super bien sintetizado y ordenado!
Gran fuente de consulta => https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
buen aporte
ajajajaj que monton de cosas es JavaScript, si desean ver cuales son las mas populares hace poco hubo un live donde freddy habla de esto justo aqui
Esta clase es TOP.
Wow!! gracias por resumir espectacularmente tantísima información en 15 minutos de video =D Esta clase acaba de entrar en mi top de favoritos!! De esas que veo más de 5 veces =D Gracias de nuevo crack!!
A veces me siento un poco abrumado por la cantidad de conocimiento que hay que tener para dedicarse a esto :sweat_smile: . Paso gran parte de mi día estudiando acá en Platzi, y luego en la universidad, y aún así siento que todavía no me alcanza lo que sé para poder encontrar trabajo de Frontend developer.
Aveces me siento igual, pero lo único que nos queda por hacer es NO DEJAR DE APRENDER
Entre más estudiamos, más cuenta nos damos que no sabemos muchas cosas. #NoParemosDeAprender
Clase donde muestran el panorama completo de todo lo que implica hacer Frontend.
El curso de Oscar sobre Webpack es buenísimo! Recomiendo que lo vean, yo estoy esperando el curso práctico
Este video vale oro
Me llamo la atencion que mencione tanto Angular como que es grande. Yo soy de la escuela React y Vue. Nunca use Angular. Que tiene de ventaja?
¡Ya lo veremos a profundidad en el siguiente módulo!
Babel es un transpilador, el cual ayuda a convertir nuestro codigo de jsx o ts para que el navegador lo pueda intepretar.
No solo lo a javascript, si no que a todos los navegadores. Ósea, utilizando ECMA script 5 hacia adelante
Que nos diga Nicobytes si es complejo añadir librerías a Angular....
Yo tengo presente que Angular ofrece su buena documentación para añadir Libs: https://angular.io/guide/creating-libraries desde hace un buen tiempo, constantemente lo están actualizando.
Para entender mejor que son los empaquetadores. Les dejo este video 👉 Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack donde explica por qué utilizar empaquetadores y una introducción breve de cómo usar Webpack