Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Ecosistema de frameworks y librerías JavaScript

6/28
Recursos

Aportes 25

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

#HaganLogosParaRoutersYCLIs

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

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

Clase donde muestran el panorama completo de todo lo que implica hacer Frontend.

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!!

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

Esta clase es TOP.

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.

Este video vale oro

El curso de Oscar sobre Webpack es buenísimo! Recomiendo que lo vean, yo estoy esperando el curso práctico

Tremenda la clase!

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

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

!

3:50 jajaajjajaja xD

que son los frameworks

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🤣