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 45

Preguntas 4

Ordenar por:

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

馃 驴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

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?

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

!

Les comparto mis apuntes. 馃榿 # Empaquetadores Existen empaquetadores que nos ayudan a tener todos los archivos en producci贸n lo m谩s ligero posible, vamos a empaquetar todos nuestros archivos en uno solo, minific谩ndolo y optimiz谩ndolo. Los m谩s famosos son: * Webpack. * Parcel. * Rollup ## Webpack Requiere que configuremos un archivo para especificar como queremos empaquetar nuestros archivos desde HTML, CSS, JS, fuentes, im谩genes, etc. Nos permite hacer code spliting, t茅cnica que nos permite separar c贸digo para tenerlo en una archivo aparte y usarlo cuando se requiera. ## Parcel Evitarnos que tengamos cualquier configuraci贸n, trae todo listo para que construya el proyecto. No tenemos control de como empaqueta las cosas. ## Rollup Utiliza una t茅cnica llamada tree shaking para filtrar el c贸digo que se usa del que no. Se especializa en tener todo optimizado con una t茅cnica especial donde elimina el c贸digo in煤til. > Rich Harris: 鈥淯se Webpack for apps, and Rollup for libreries鈥 # Compiladores Tanto los compiladores como transpiladores nos permite transformar JavaScript (que no es JavaScript del todo) a un JavaScript que los navegadores s铆 entienden. ## Babel Es un transpilador que nos permite utilizar la sintaxis del futuro de JavaScript. Por medio de plugins podemos trabajar de forma m谩s sensilla. ## TypeScript Es un superset de JavaScript, es un JavaScript pero con tipos. Es un lenguaje de programaci贸n, con sus propias reglas, que nos permiten evitar y corregir los errores que solemos tener con JavaScript. # Las herramientas para UI Se encargan de las vistas e interacci贸n con los usuarios, puede ser solamente JavaScript, pero si trabajamos con Frameworks se suelen usar: * React. * Vue. * Svelte. Son herramientas que utilizan el estado que nos permiten hacer aplicaciones reactivas. Se encargan de transformar un componente en un render con el que el usuario pueda interactuar. # CSS y preprocesadores Tenemos los estilos, los preprocesadores se encargan que podamos escribir CSS de una forma m谩s f谩cil y r谩pida, luego son procesados para tener al final uno o varios archivos de CSS puro. * CSS. * Sass. * Less. * Stylus. * PostCSS. # CSS in JS En CSS-in-JS, normalmente el HTML, el CSS y el JavaScript estar铆a en cada archivo individual, pero esto CSS-in-JS nos permite desarrollar en los 3 lenguajes en un mismo componente, que necesariamente no es un mismo archivo y/o carpata. * Styled Components. * Emotion. # Routers En los Routers son la forma en la que hacemos la navegaci贸n de la aplicaci贸n, muestra cierto contenido dependiendo de la URL. * React Router. * Vue Router. * Svelte Router. * LitElement Router. * Whatever Router. # Frameworks Los frameworks son un conjunto de librer铆as. Los frameworks son herramientas completas, son un todo en uno, que se encargan de todos los apartados, contiene todo para poder desarrollar. Trabajar con un framework acelera el desarrollo. Es un poco m谩s complicado integrar nuevas librer铆as a los frameworks, mientras que integrar librer铆as en librer铆as es mucho m谩s sencillo. ## Angular Angular es una plataforma, un conjunto de frameworks. Este es poderoso, pero por ser tan grande y tener tanta infraestructura lista es bastante dif铆cil de integrar con otras herramientas que no sean especiales para Angular. # Los entornos de desarrollo completos Son un todo en uno, un grupo de librer铆as configuradas para trabajar con m谩s librer铆as en conjunto. Se llaman CLI (Command Line Interface) y desde la consola podemos configurar el proyecto a nuestro gusto. * Create React App. * Vue CLI. * Svelte CLI. * Polymer CLI. * Whatever CLI. # Manejo del estado Son las librer铆as que podremos definir un est谩ndar, un flujo de datos constante y predecible dentro de la aplicaci贸n, en vez de que todos los componentes trabajen de diferente forma podremos definir un patr贸n en com煤n. Cada framework tiene su propia forma de manejar el estado, funciona bien al inicio, pero a largo plazo se vuelve muy complejo mantenerlo o escalarlo. Al usar las librer铆as de manejo de estado es dif铆cil al inicio implementar, pero a largo plazo se vuelve m谩s sencillo escalarlo y mantenerlo. * Redux. * XState. * MobX. # Consulta de datos Son formas o protocolos para comunicarnos con el backend para enviar y recibir informaci贸n, por encima de estos hay herramientas para hacer peticiones que no hacen tanto la diferencia, pero estas herramientas s铆 hacen la diferencia: * API REST. * GraphQL. Las herramientas para la consulta de datos, a veces tambi茅n, nos permiten manejar el estado de nuestra aplicaci贸n. * Apollo GraphQL. # Forma de trabajar La mejor forma de trabajar es por medio de capas, teniendo una capa para la UI y otra para la consulta de datos. De esta forma, la capa de UI solo recibe la informaci贸n, sin importarle como se hace esa petici贸n.

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.

驴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