🤔 ¿A quién recomiendan seguir en Twitter para tener una buena dosis diaria de consejos sobre programación?
Fundamentos del Desarrollo Web Profesional
Frameworks y Librerías de JavaScript para Aplicaciones Web
Creación y Composición de Componentes en Desarrollo Web
Transformación de Páginas Web a Componentes Reutilizables
Reactividad y Estrategias de Renderizado en JavaScript
Diferencias entre Librerías y Frameworks en Desarrollo Web
Empaquetadores y herramientas esenciales para desarrollo frontend JS
Contexto y funcionamiento de los Frameworks JavaScript
Desarrollo de Aplicaciones con React.js: Componentes y Hooks
Ciclo de vida de componentes en ReactJS
Desarrollo de Aplicación RIA en Code Sandbox
Estado y Eventos en React para Aplicaciones Interactivas
Arquitectura y Funcionamiento de Angular: Componentes y Servicios
Demo de Aplicación Angular para Gestión de Películas
Vue.js: Características y Ventajas frente a Otros Frameworks
Creación de un Demo con Vue.js desde HTML Básico
Desarrollo de sitios web con Svelte: optimización y rendimiento
Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos
Estilos con CSS, preprocesadores y CSS-in-JS
CSS en JS: Integración y Ventajas en Aplicaciones React
Estilos en Angular con CSS: Aplicación de Películas
Componentes en Vue.js y Preprocesadores CSS
Estilos avanzados con SASS en View Components
"Uso de Styled Components para Estilos Dinámicos en React"
Estilos Dinámicos con Theme Provider y Style Components
Variables CSS y Emotion en Svelte: Mejora tus Componentes
Cómo escalar sitios o aplicaciones web
Escalamiento de Aplicaciones Web: SPA, SSR y Generadores Estáticos
Desarrollo de Aplicaciones con Next.js: Rutas y Renderizado Dinámico
Organización de Proyectos en React: Contenedores y Presentacionales
Elección de Frameworks y Librerías JavaScript para Proyectos Web
Desarrollo Frontend: Próximos Pasos y Evaluación Final
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En el desarrollo web moderno, el empaquetamiento de archivos es esencial para optimizar la carga de las aplicaciones. Los empaquetadores, conocidos como module bundlers, combinan múltiples archivos en uno solo, lo que reduce las consultas al servidor y mejora la velocidad de carga. Entre los empaquetadores más destacados se encuentran:
Webpack: Popular por su flexibilidad y control en la configuración mediante el archivo webpack.config.js
. Permite code splitting para cargar solo lo necesario.
Parcel: Famoso por su simplicidad, evitando configuraciones complejas y funcionando con una magia que agrada a muchos desarrolladores.
Rollup: Especializado en minimizar el tamaño de los archivos usando técnicas como Tree Shaking. Ideal para crear librerías de JavaScript.
Estos empaquetadores se eligen según las necesidades del proyecto, ofreciendo cada uno ventajas únicas.
Los compiladores de JavaScript, aunque técnicamente no todos son compiladores, transforman código para que los navegadores puedan comprenderlo y ejecutarlo. Dentro de este ámbito, encontramos:
Babel: Un transpilador que permite usar la sintaxis más moderna de ECMAScript. Además, mediante plugins, traduce estilos de código preferenciales en JavaScript compatible.
TypeScript: No un compilador per se, sino un lenguaje tipado que amplía a JavaScript. Aporta características de orientación a objetos y facilita la gestión de dependencias.
Ambas herramientas son cruciales para modernizar el código y asegurar la compatibilidad en diversos navegadores.
La integración de estilos se ha adaptado para que los desarrolladores trabajen de manera más eficiente. Aunque tradicionalmente CSS se escribía separado de JavaScript y HTML, hoy en día encontramos métodos como:
CSS in JS: Herramientas que permiten escribir CSS directamente en componentes JavaScript. Esto facilita mantener estilos y lógicas en un solo lugar. Ejemplos prominentes son Styled Components y Emotion.
Preprocesadores CSS: Sass, Less, y Stylus ofrecen funcionalidades avanzadas como mixins y funciones, convirtiendo estos estilos en CSS puro que los navegadores entienden.
La elección de herramientas para estilos depende del flujo de trabajo preferido y necesidades del proyecto.
Los routers gestionan la navegación dentro de aplicaciones de una sola página (SPA). Aunque algunos proyectos pequeños podrían no requerir un router, con el crecimiento de la aplicación, se hacen esenciales para:
React Router es un ejemplo principal de herramientas de routing para aplicaciones React. Este elemento del desarrollo es fundamental para mantener la estructura y la organización de las aplicaciones web.
Los frameworks se destacan por ofrecer una plataforma todo-en-uno que acelera el desarrollo. Incluyen múltiples funciones integradas, desde componentes UI hasta enrutamiento y manejo de estado. Angular es un ejemplo de framework todopoderoso, aunque su integración fuera de su ecosistema puede ser más compleja. Los beneficios clave incluyen:
El dominio de un framework facilita el desarrollo rápido y sólido, siendo una inversión a largo plazo para cualquier equipo de desarrollo.
La gestión del estado y la consulta de datos son componentes críticos en el desarrollo de aplicaciones complejas. Se utilizan herramientas como:
Manejo de estado: Librerías como Redux, Xstate, y Mobx proporcionan una estructura determinista para gestionar datos, asegurando que todos los componentes trabajen con un flujo de datos consistente.
Consulta de datos: Protocolos como API REST y GraphQL regulan la comunicación con el backend. GraphQL, junto con herramientas como Apollo, permite no solo consultar sino también manejar el estado con un enfoque de capas, separando responsabilidades y facilitando la evolución del proyecto.
Este enfoque modular proporciona flexibilidad y mantiene la aplicación organizada a medida que se expande.
Aportes 47
Preguntas 4
🤔 ¿A quién recomiendan seguir en Twitter para tener una buena dosis diaria de consejos sobre programación?
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:
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
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/
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
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.
(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.
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.
Permiten mayor comodidad para la escritura de los estilos.
Son la forma en la que hacemos la navegación de nuestra aplicación.
Son hel todo en uno, se encargan de administrar casi todos los elementos mencionados anteriormente.
(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.
(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.
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🤣
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?