No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ecosistema de frameworks y librer铆as JavaScript

6/28
Recursos

Aportes 43

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃 驴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鈥lgo 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.

鈥淯semos 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!

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.

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

A qui茅n m谩s le dio ansiedad?

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.

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

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 鈥渟uperset鈥 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

!

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.

驴Ahora que builders adem谩s de Vite se est谩n usando? Detesto vite y me gustaba mucho Webpack, pero he visto que Webpack no ha hecho m谩s que caer en desuso鈥 (Reite que destesto Vite)

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馃ぃ

Me encanta como entre las herramientas UI no est谩 Angular lol

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