Contenido del curso
Elección de Frameworks y Librerías JavaScript para Proyectos Web
Elegir frameworks o librerías de JavaScript para tu próximo proyecto web es una gran responsabilidad. Tus preferencias personales deben ser el último factor a considerar. Lo realmente relevante son el tiempo, presupuesto, requisitos técnicos y el conocimiento + experiencia del equipo de desarrollo con cada tecnología.
¿Necesitas un framework o una librería? 📚
Un framework te provee casi todas las herramientas que necesitas para construir un sitio o aplicación web (guía de estilos predefinida, manejo de formularios, facilidad para elegir el tipo de routing o la estrategia de render que necesites...).
Por su parte, las librerías responden a un objetivo más específico y menos general. Una parte importante del desarrollo será elegir qué librerías integrar y realizar la configuración para que funcionen correctamente en conjunto.
También debes considerar que el costo/dificultad de integrar librerías con librerías suele ser muy bajo. Donde realmente aumenta la complejidad es configurando frameworks de JavaScript para trabajar en conjunto con librerías que no fueron específicamente diseñadas para ese framework en particular.
O al menos eso es a lo que estamos acostumbrados.
Rangos de flexibilidad, integrabilidad y responsabilidad 🚧
No todos los frameworks son 100% frameworks. Ni todas las librerías son 100% librerías.
Las herramientas de desarrollo frontend no tienen que ser a fuerza un framework o una librería. Más bien, las conocemos de una u otra forma dependiendo de sus rangos de flexibilidad.
Veámoslo en una gráfica para que quede más claro.
Ubica tus herramientas favoritas de JavaScript en el siguiente plano cartesiano, donde el eje X representa el nivel de integrabilidad y el eje Y representa el nivel de responsabilidad.
Al desarrollar ejercicio tendrás mucho más claro en qué casos va a valer la pena integrar tus herramientas favoritas al stack de tu aplicación.
¡Espero tu solución en los comentarios!
Carlos Eduardo Gomez García
Profesor
Stanley Melgar
Estudiante
Juan Esteban Galvis
Estudiante
Juan José Mamani Tarqui
Estudiante
Guillermo Castaño Vèlez
Estudiante
Juan Castro
ProfesorJuan José Mamani Tarqui
Estudiante
Hector Rubio
Estudiante
David Castillo
Estudiante
Daniel Riveros
Estudiante
Luis E. Gama Ramirez
Estudiante
Diego Dorado
EstudianteJuan Castro
Profesor
William Armando Forero Bermeo
Estudiante
DANIEL DIAZ
Estudiante
Eduardo Rafael Romero Bernal
Estudiante
Jorge De Jesus Tejeda Bello
Estudiante
Rony Porraz Vargas
Estudiante
Andre Huaman Yovera
Estudiante
Gilbert Ardila
Estudiante
Luis Eduardo
Estudiante
Omar Gabriel Aguilar Moscoso
Estudiante
Victor Marquez
Estudiante
Hector Romero
EstudianteJuan Castro
ProfesorRony Porraz Vargas
Estudiante
Gilberto Espinoza Maciel
Estudiante
Carla Limachi
Estudiante
Jesus Daniel Castro Flores
EstudianteSupongamos que soy el único desarrollador de la empresa... para ese caso, ¿puedo poner mis preferencias primero? Jaja . Esta gráfica la vi durante un live, me encantó la explicación para esta gráfica, yo recomendaría ampliar esta lectura a por lo menos la ubicación de Angular, Vue, React y Svelte más el por qué se ubican ahí, siento que puede ser una herramienta muy útil al momento de elegir con qué framework/librería trabajar 💚
Concuerdo, lo visto en ese live fue muy buena información y los que no pudieron verla debería tener la oportunidad.
Suponiendo que la decisión depende totalmente de mi y que maneje bien los 4 frameworks:
Si será una app grande que necesitará muchas herramientas probablemente usaría Angular
Para una página web no tan grande usaría Svelte (aun no aprendo Sapper)
Para una aplicación complejo pero no de gran tamaño o que no requiera manejar una enorme cantidad de información (por ahora no manejo bien Redux jaja) usaría React
Y en todos los casos anteriores si conozco librerías que pueda integrar usaría Vue (dado que puedo integrar librerías externas e ir agregando a medida que las necesito).
Además es imposible saber el 100% de todo, pero si habrá uno o dos que manejas mejor, en mi caso me siento muy cómodo en Vue
Todo es posible solo la muerte...
Personalmente, y por experiencia, prefiero por el momento dominar Svelte y Sapper. Habiendo intentado con todos los frameworks, este me parece más "empalmable", si esa palabra existe. Me refiero a que es muy fácil migrar todos los conocimientos de HTML CSS y JS a Svelte, por su distribución dentro del componente. Es más sencillo comprender conceptos de componentes y routing en Svelte, para luego migrar a React o Vue por ejemplo que pueden ser más robustos.
Excelente elección :clap:
Pero no hay una ruta para aprender fronted con svelte en platzi :(
Amos por react, que hay mucho jale
x2
que puedo decir... que locura es el mundo de la programación, pero eso es lo que me gusta, actualmente manejo un equipo de desarrollo y nos metimos de cabeza con React y Redux, nos ha ido muy bien, pero este curso dejó un panorama muy amplio de todas las posibilidades. Por el momento seguiremos con React, Redux y seguramente Next.JS pero me gustó mucho la forma como se trabaja en Svelte y en Vue. Gracias por el Curso Juan. mucho conocimiento y muy poca edad :)
En un trabajo supongo que se llega a un acuerdo con las personas que son desarrolladores o desarrolladores del proyecto.
La idea es resolver un problema, y cualquier herramienta que hemos visto cumple la funcion.
Hablando de un enfoque personal, creo que es bueno aprender todos estos frames. Quiza no a profunddidad por que es muy complicado pero si saber las bases.
Para estar preparado para un trabajo y para un equipo de trabajo que quiera implementar cualquier Frame y tu ya sepas que hacer.
Pienso yo. Al menos eso hare, si hay alguien que me diga que estoy mal. Pues no . :P
Yo estoy empezando y me estrelle con Angular apenas “aprendi” Js y me frustre… taambien por el curso que tome no fue nada bueno(no fue en platzi) en ese momento decidi estudiar mas a profundidad JS (no solo traer elementos y llamar funciones) siento que esto fue de gran ayuda… ahora en paltzi estoy tomando la ruta de React y me ha gustado mucho… algo des ordenado pero se entiende por que es js y me gusta tener html y la logica en el mismo archivo… pero pero pero!!! un amigo me esta ofreciendo trabjar con el pero en Angular y ser ademas mi mentor… entonces estoy haciendo el curso de Angular de platzi y el de Redux… mi pregunta es… Que hago?? sigo a mi corazon? jajaja ahora que se algo de React y que he estudiado JS he entendido mucho mejor Angular y me gusta porque es ordenado entonces… algun consejo?? por cierto… que buen carisma el de Juan. gracias!
Yo aprovecharía la oferta de tu amigo. Tener un mentor así de cercano le ayudará muchísimo a tu crecimiento profesional.
Además, que lo aceptes, así sea con Angular, no significa que no puedas seguir aprendiendo React. Vas a aprender mucho de JavaScript, TypeScript y desarrollo web en general. ¡Ese entrenamiento será valiosísimo!
Hola Diego!
Yo te diria que aproveches la mentoría y aprendas nuevas cosas, el hecho que aprendas angular no es un impedimento para que sigas aprendiendo react; adicional a esto si es un buen empleo deberías aprovechar con el fin de incrementar tu conocimiento.
En cuanto al órden de los proyectos es como todo , depende de los dev que esten trabajando en los mismos como ordenen su código , sus componentes y la estructura del proyecto.
Con platzi he aprendido manejar todos los frameworks que estan enseñando, pero en mis proyectos y trabajos yo uso vuejs, será por su sencillez.
Todos los puntos para VUE, es el mejor.
En mi caso en particular para desarrollar un proyecto y elegir entre un framework o una libreria, primero debo saber el alcance del proyecto, si es un proyecto que sera enorme tipo un ERP entonces optaría por un framework ya que me ahorrare la mitad del camino en cuanto a la arquitectura y la construcción del mismo, pero si es un proyecto el cual es puede ir creciendo poco a poco entonces optaría por una libreria ya esta la incertidumbre de que puede que sea pequeño o puede que no.
A lo que me diran pero mejor usa un framework y te ahorras el problema de si crece o no, el tema de un framework es que al traer todo montado, quizas no lo vayas a necesitar y estarías desperdiciando el potencial del framework, imagina hacer una pagina super sencilla con un framework, es como matar una hormiga con una bazooka.
Por lo menos ahora que soy el unico front en mi empresa yo use react al final lo hice por gusto y por flexibilidad
Responsabilidad | | | | | | Integrabilidad | Vue Router Next | | | | | | | | | | | Vue React | | | | | | | | | Svelte Angular | | | | | | +------------------------------------ Nivel de Integración
Ten en cuenta que esta es solo una representación visual sugerida y la ubicación exacta puede variar según tus preferencias y la perspectiva de integrabilidad y responsabilidad que tengas en mente para cada herramienta. ¡Espero que esto te ayude a visualizar mejor tus elecciones! . Permíteme explicar con más detalle la ubicación de cada herramienta en el plano cartesiano basado en sus niveles de integrabilidad y responsabilidad.
En el plano cartesiano, el eje X representa el nivel de integrabilidad, es decir, qué tan fácil es integrar una herramienta en tu aplicación existente. El eje Y representa el nivel de responsabilidad, es decir, cuántas decisiones y tareas importantes la herramienta maneja en tu aplicación.
Aquí está la ubicación de las herramientas que mencionaste:
Vue Router: Vue Router es una herramienta para manejar la navegación en aplicaciones Vue.js. Se encuentra en un punto intermedio en el eje de integrabilidad, ya que se integra bien con aplicaciones Vue, pero no está necesariamente diseñado para ser tan independiente. En cuanto a la responsabilidad, asume una parte significativa de la gestión de rutas, lo que lo coloca en un nivel medio en el eje Y.
Next: Next.js es un framework para React que se centra en el rendimiento y la escalabilidad. Dado que se basa en React, su nivel de integrabilidad es alto. En términos de responsabilidad, Next.js maneja la renderización del lado del servidor (SSR) y otras optimizaciones, lo que le da un nivel alto en el eje Y.
Vue: Vue.js es un framework progresivo que es fácil de integrar en aplicaciones existentes y puede utilizarse de manera incremental. Esto lo coloca en un nivel alto de integrabilidad. En cuanto a responsabilidad, Vue.js se encarga de la capa de vista, lo que lo coloca en un nivel medio en el eje Y.
React: React es ampliamente conocido por su capacidad de integrarse en aplicaciones existentes y por su enfoque en la interfaz de usuario. Esto lo coloca en un nivel alto en el eje de integrabilidad. En términos de responsabilidad, React se centra principalmente en la capa de vista, aunque puede ampliarse con otros componentes, lo que lo coloca en un nivel medio en el eje Y.
Svelte: Svelte es un enfoque novedoso que compila componentes en JavaScript simple y optimizado. En términos de integrabilidad, puede requerir más adaptación, lo que lo coloca en un nivel medio en el eje X. En cuanto a responsabilidad, Svelte maneja la capa de vista y parte de la lógica, lo que lo coloca en un nivel medio en el eje Y.
Angular: Angular es un framework completo que se integra bien en aplicaciones, pero puede requerir más esfuerzo para adaptarse a aplicaciones existentes. En términos de responsabilidad, Angular maneja muchas partes de la aplicación, lo que lo coloca en un nivel alto en el eje Y.
Redux: Redux es una librería de gestión de estado que se integra bien con aplicaciones React y otros frameworks. En cuanto a responsabilidad, Redux se enfoca exclusivamente en la gestión del estado, lo que lo coloca en un nivel bajo en el eje Y.
Vue Router: Vue Router es una herramienta que maneja la navegación en aplicaciones Vue.js. Se encuentra en un punto intermedio en el eje de integrabilidad, ya que se integra bien con aplicaciones Vue, pero no está necesariamente diseñado para ser tan independiente. En cuanto a la responsabilidad, asume una parte significativa de la gestión de rutas, lo que lo coloca en un nivel medio en el eje Y.
Nuxt: Nuxt.js es un framework para aplicaciones Vue con enfoque en el rendimiento y la facilidad de desarrollo. Su nivel de integrabilidad es alto, ya que está diseñado para trabajar con Vue.js. En términos de responsabilidad, Nuxt.js maneja la renderización del lado del servidor (SSR) y otras optimizaciones, lo que le da un nivel alto en el eje Y.
Ten en cuenta que esta ubicación es una interpretación general y simplificada. Pueden existir matices y excepciones en la ubicación de cada herramienta según los detalles específicos de tu proyecto y preferencias personales. Utiliza esta representación como una guía para tomar decisiones informadas sobre la integración y la responsabilidad de estas herramientas en tu stack de aplicación.
Bueno personalmente me encantó vue.js, pero por temas de mercado acá en latinoamerica creo que es más vendible React, lo integraría con next.js y styled, de hecho creo que voy a empezar con React para ser más atractivo al mercado laboral y cuando lo tenga dominado aprenderé vue.js
Yo vi las ofertas laborales en mi ciudad y vi que React es la mejor pagada, asi que elegire ese framework para empezar
sin pensarlo react para ganar 100k usd al mes como junior 3 meses de experiencia
Opinion 🧠 Yo me quedo con React, profesionalmente creo que es la libreria que tiene mas campo gracias a su flexibilidad y adaptacion como entornos mobile con React Native (que es un poco inmaduro en su campo a comparacion de otros) y React Native, Tambien es mantenido por una gran empresa como facebook y la utiliza en sus aplicaciones que como bien sabemos son unas de las mas famosas y usadas en el mundo. personalmente me gusto mucho gracias a su manejo del estado que al principio es complicado de entender pero cuando ya tienes un estado inicial y integras un redux la vida se hace mas facil para jugar con esos estados y cambiarlos en el componente.
💁♀️CSS in JS no me convencio gracias a que soy fan eterno de SASS (aunque los pre-procesadores estan muriendo) pero el uso de estilos dinamicos en react me gusto demasiado, resuelve mucho lo complejo que es jugar con los estilos en js vanila y css.
En resumen me quedo con react aunque respeto a los otros frameworks como dice el profesor todos tienen sus pro y contras y estoy abierto a aprender Vue o angular( mas que todo por nest.js ), muchas gracias por este curso que me resolvio demasiadas dudas sobre los frameworks y otros conceptos.✨
No me quedo tan claro cuál es la mejor forma de organizar los archivos ¿Cuál es la mejor estrategia para organizar los archivos y carpetas de tu aplicación?
No existe una "mejor" forma de organizar archivos y carpetas.
Depende de cada proyecto y tus gustos personales.
A mí me encanta Feature First.
hay muchas formas, puedes usar las que encuentres en internet, vi esta y me parecio genial para reactjs https://codewithghazi.com/best-scalable-react-app-structure-2021/
Puedo comentar esta última clase que los contenidos son fundamentales, continúan evolucionando todas las herramientas aquí presentadas. Mi decisión de Stack será web -> Svelte y cuando sean app -> angular. . Tener presente que en cada proyecto se te presentarán herramientas diferentes y te adaptarás a ellas con tu conocimiento ya construido. . Los encuentro en los demás cursos ;D
Me quedo con Vue. sera un reto aprender mas!!! :)
Y la parte mas importante es conocer de todo un poco porque no siempre te van a preguntar en el trabajo cual quieres usar, alguien mas lo elegirápor ti 😁😂😂😂