Empaquetadores y herramientas esenciales para desarrollo frontend JS
Contenido del curso
Joel Eduardo Sánchez Herrera
Luis Alejandro Vera Hernandez
Víctor Isaac Arias García
Juan Castro
Profesor
Eduardo Hidalgo Díaz Rugama
Diego Andres Cardenas Caro
Gonzalo Vidal
Mario Barceló Sospedra
Omar Gabriel Aguilar Moscoso
Juan Castro
Profesor
Miguel Angel Reyes Moreno
Sylvester Josué Rojas Cañón
Jimmy Buriticá Londoño
Juan Diego Quintero Calderón
Juan Pablo Jimenez
Juan Manuel Velez
Claudio Pedalino
Rodrigo Ramos Xochiteotzin
Sebastián Buitrago
Mario Barceló Sospedra
Eduardo Kiriakos Piazza
Rubén Cuello
Emerson David Cabrera Salas
Victor Carmona Pale
José Alberto Ortiz Vargas
roy vargas
Edgar Aguilar Cubas
Seba Cardoso
Juan Castro
Profesor
Jorge De Jesus Tejeda Bello
Irving Juárez
Sylvester Josué Rojas Cañón
Jean Paul Yepes
RESUMEN
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