Empaquetadores y herramientas esenciales para desarrollo frontend JS

🤔 ¿A quién recomiendan seguir en Twitter para tener una buena dosis diaria de consejos sobre programación?

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

• Webpack: Requiere que configuremos un archivo para especificar como queremos nuestro archivo.
• Parcel: Es evitarnos cualquier configuracion, trae todo listo para que construya toda su magia. No tenemos control de como empaqueta.
• Rollup: Se especializa en tener todo optimizado con una tecnica especial donde elimina el codigo inutil

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:

• Babel: Nos permite usar el codigo del futuro en proyectos que utilizan otra version, unificando todo en una version que entiendan los programadores
• TypeScript: Es un lenguaje de programacion con sus nuevas reglas que nos permiten entender mas facil los errores en JavaScript

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:

• React
• Vue
• Svelt

Estan los estilos donde se pueden usar diferentes cosas, pero hay que tener en cuenta que a veces escribimos mas JS que CSS:

• CSS
• SASS
• LESS
• STYLUS

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.

• Styled Components
• Emotion

En los Routers son la forma en la que hacemos la navegacion de la aplicacion, muestra cierto contenido dependiendo de la URL

• React Router
• Vue Router
• Svelte Router
• LitElement Router
• Whatever Router

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.

• Angular: Es todo poderoso pero por ser tan grande es bastante dificil de integrar con otras herramientas que no sean especiales para ANGULAR.

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.

• Create React App
• Vue CLI
• Svelte CLI
• Polymer CLI
• Whatever CLI

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

• Redux
• XState
• MobX

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:

• API REST
• GraphQL

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

#HaganLogosParaRoutersYCLIs

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:

• Webpack: Es la más popular, requiere que configuremos un archivo llamado webpack.config.js para especificarle como debe empaquetar los archivos.
• Parcel: Nos hacen evitar cualquier tipo de configuración, ya tienen todo listo para que solo le digamos como ponerla.
• Rollup: Se especializa en mantener muy pequeño el peso de los archivos, usa una técnica especial que se encarga de que no haya código de más, el único código que llega al archivo final es el que realmente estamos usando.

“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.

• Babel: nos permite usar la sintaxis del futuro de JS.
• Typescript: Parecido a JS pero con sus propias reglas, es un lenguaje tipado y es orientado a objetos.

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/

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 😅 . 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.

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?

Babel es un transpilador, el cual ayuda a convertir nuestro codigo de jsx o ts para que el navegador lo pueda intepretar.

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

El profesor de por si habla rápido, no le pongan el X2 porque no entenderán nada

A quién más le dio ansiedad?

Asumecha

que son los frameworks

Que buena clase!

Hola! 💚 Estas son mis notas, puedes encontrar el documento completo en mi GitHub

Ecosistema de frameworks y librerías

Empaquetadores

En vez de hacer una consulta para cad archivo se empaquetan todos los archivos en uno solo, este proceso se optimiza para que el navegador demore lo menos posible. WebPack es una de las herramientas más populares. Parcel simplifica el proceso sin tener que hacer archivos de configuración, el proceso es automático.

Webpack para construir sitios y aplicaciones web, rollup para librerías en JS.

Compiladores

(no son exactamente compiladores pero cumplen la función de transformación de código)

• Babel: Es un transpirador, permite utilizar ECMA Script, por meio de plugins permite programar de otras formas que JS no permite.

• TypeScript: Es otro lenguaje de programación (subset), tipado y orientado a objetos, una de sus mayores ventajas es la inyección de dependencias.

Herramientas para UI

Vistas e interacción con los usuarios, puede ser sólo JS peero, un framework es una mejor herramienta. Transforman componentes en un render on el que puede interactuar el usuario.

Css y preprocesadores

Permiten mayor comodidad para la escritura de los estilos.

• Css-in-JS: En un mismo componente se usan css, html y JS. Unas de las herramientas son estyled components, radium, afrodit, etc.

Routers

Son la forma en la que hacemos la navegación de nuestra aplicación.

Frameworks

Son hel todo en uno, se encargan de administrar casi todos los elementos mencionados anteriormente.

Manejo de estado

(Redux, XState o MobX)

Organización de comunicación entre componentes, cuando se cambia algo en el estado de la aplicación estas herramientas facilitan la administración de nuesvas características.

Consulta de datos

(API Rest o GraphQL)

Protocolos para comnicarse con el packet para enviar y recibir información de los usuarios.

La mejor forma de organizar una aplicación es organizarla por capas, esto es bueno en medida de que se puede trabajar en cada parte sin tener problemas con afectar las otras.

Fuentes de información

• Basic writing and formatting syntax | GitHub

• Webpack vs. Parcel vs. Rollup vs. ESBuild | Empaquetadores de JavaScript

• Webpack and Rollup: the same but different

• ¿Qué es CSS-in-JS?

Que buen paseo por todas las herramientas (frameworks y librerias) que tenemos a disposicion cuando se desarrolla con js, obvio son muchas mas pero estas son las mas usadas

3:50 jajaajjajaja xD

¿Cuando usar Webpack o Rollup? Recomendación: - webpack para desarrollar sitios y aplicaciones web - Rollup para construir librerías de javascript

Qué opinan de Vite ?
Les dejo un video de óscar Barajasm hablando de éste tema. https://www.youtube.com/watch?v=pAJLR4W0190&t=29s

typescript es un “superset” de js

Tremenda la clase!

Clase bastante cargada de contenido pero a la vez interesante ya quiero aprender como utilizar estas herramientas.

TypeScript es un subset de JavaScript, es otro lenguaje pero con tipos y Orientado a Objetos

!

Quen diria que dany lux enseñaria JavaScript

Mensaje del futuro: Create React App ha servido valientemente pero ya no está entre nosotros

Ay Diositooo me dio amsiedad

ola juan ya que te veo por aca y que toco el tema de webpack yo soy nuevo en esto estoy aprendiendo poco a poco pero quería aprender sobre test which react y los cursos que muestra platzi son muy desactualizados hay unos cursos de hace 3 años y en este momento ya a cambiado muchas cosas bueno que actualizaran estos cursos y que usted fuera el profesor sería genial.

Wasm sería un compilador?

Me parece a mi o ese cuadro de atrás esta medio degenerado? Puede que sea yo el mal pensado pero no se entiende bien🤣