JavaScript ha ganado cada vez más popularidad a lo largo de los años, la comunidad está creciendo rápidamente y los desarrolladores están continuamente desarrollando y creando herramientas para el lenguaje a diario.
Esto hace que sea abrumador cuando se trata de decidir qué herramienta/marco/biblioteca usar para una tarea en particular porque siempre hay múltiples opciones para literalmente cualquier cosa que quieras hacer en JavaScript. Al principio, todavía es un desafío decidir qué biblioteca o marco aprender.
Este artículo se enfoca en desmitificar la ventaja de usar varios marcos/bibliotecas front-end de JavaScript y, en última instancia, brinda una imagen más clara de ellos. Su objetivo es facilitar el proceso de decisión de seleccionar uno.
Tabla de contenido
Reaccionar
Reaccionar no es un marco sino una biblioteca de JavaScript para construir interfaces de usuario.
Es de código abierto y lo mantiene Facebook y una comunidad de desarrolladores individuales. React fue escrito inicialmente por jordan walke como una herramienta interna en Facebook. Más tarde fue de código abierto y lanzado al público en general en 2013, y ha ganado una amplia gama de popularidad desde entonces.
Algunas de las características incluyen lo siguiente.
- Proporciona componentes reactivos, personalizables y reutilizables.
- Utiliza un DOM virtual
- Extremadamente rápido
- basado en componentes
- Enlace de datos unidireccional
- Reutilización de código
- Tiene un ecosistema vibrante y próspero detrás de él.
- Manejo práctico de la gestión de estado
Instalación/Uso
React se puede usar en la interfaz de dos maneras diferentes.
sobre CDN
Puede consultar sus sitio oficial para obtener un enlace de secuencias de comandos, que puede incluir en la etiqueta de encabezado en su marcado HTML. Elija los enlaces en función del propósito.
Por ejemplo, si se usa en un entorno de desarrollo, entonces:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Y, para la producción
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Usando Node.JS
Supongo que ya tienes instalado NodeJS. Para instalar React, simplemente escriba el siguiente comando.
sudo npm i -g create-react-app –save-dev
Una vez finalizada la instalación, escriba el siguiente comando
crear-reaccionar-aplicacion mi-primera-reaccionar-aplicacion
El comando anterior instalará todas las bibliotecas necesarias para que React se ejecute correctamente, lo que incluye un servidor de desarrollo, un paquete web y Babel.
Navegue a la carpeta my-first-react-application y ejecute el siguiente comando
inicio de npm
Lo anterior iniciará un servidor de desarrollo en el puerto 3000. Y, cuando acceda a la IP de su servidor con el puerto 3000, debería ver algo como a continuación.
React está ganando popularidad y bajo demanda por parte de varias organizaciones grandes. Si está interesado en aprender, le recomiendo que tome este curso completo.
Vue.js
Vue.js es un marco JavaScript progresivo para crear interfaces de usuario interactivas y aplicaciones de una sola página. Es un marco de vista de modelo con la biblioteca principal, que se centra en la capa de vista. Vue es popular, ya que es la capacidad de impulsar aplicaciones de una sola página. A diferencia de React, Vue usa HTML sin procesar y no JSX.
Vue.js es de código abierto e inicialmente fue creado por evan tu y lanzado públicamente en febrero de 2014. Las siguientes son algunas de las características.
- Proporciona componentes de vista reactivos y componibles.
- Utiliza un DOM virtual
- Mantiene el enfoque en la biblioteca central (es decir, enrutamiento y administración de estado)
- El alcance en CSS se maneja sin CSS-In-Js
- Enlace unidireccional dentro de los componentes.
- Soporte para complementos esenciales
- Reutilización de código
Instalación/Uso
Puede usar Vue.js en el front-end a través de CDN o con Node.js
Para usar la forma CDN, puede agregar el siguiente script a la sección de encabezado de su página HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
La secuencia de comandos anterior es adecuada para fines de desarrollo, ya que incluye un mensaje de consola importante. Sin embargo, para la producción, debe usar el siguiente.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Y, para usar con Nodejs, puede instalarlo usando el comando npm.
npm install vue
Le recomiendo encarecidamente que lea el Vue JS oficial documentación para aprender más o considerar tomar este sendero.
Angular
Angular es un marco JavaScript estructural para páginas dinámicas. Permite el uso de HTML como lenguaje de plantillas y permite el uso de sintaxis HTML para expresar componentes de aplicaciones de forma clara y concisa. Es un proyecto de código abierto mantenido por Google y otros colaboradores.
Instalación
Asegúrese de tener instalado el último Nodejs. Lo primero que necesitaremos instalar es la herramienta Angular CLI.
npm instalar -g @angular/cli
Una vez instalado, podemos crear un nuevo proyecto con el siguiente comando.
ng new my-first-angular-app
Siga las instrucciones en pantalla. Esto genera algunos de los archivos y carpetas y usa el módulo npm para descargar bibliotecas de terceros necesarias para que Angular funcione correctamente.
Para iniciar la aplicación recién creada, ejecute el siguiente comando desde la carpeta de aplicaciones.
ng server
Esto debería iniciar automáticamente el servidor en el puerto 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Conclusión
Entonces, lo que eliges aprender es más una preferencia personal que «cuál es mejor».
Todos los marcos/bibliotecas enumerados anteriormente son geniales. Aquí hay un breve resumen;
- Deberías aprender Angular si quieres un Framework en el que quieras confiar sin tener que lidiar con dependencias externas.
- Debe aprender React si desea crear una aplicación rápida, PWA, de una sola página y se siente cómodo con JSX.
- React tiene la comunidad más vibrante y más oportunidades de trabajo debido a su gran comunidad.
- Es relativamente fácil comenzar con React.
- React es altamente personalizable y trata cada parte de la interfaz de usuario como un componente.
- Vue tiene las mismas ventajas que React pero sin JSX.
- El mercado laboral para Vue está en constante crecimiento.
Aquí hay un gráfico en Google Trends que muestra una comparación de la tasa de popularidad de los 3.
Si el desarrollo front-end es de su interés, puede consultar este Curso de Udemy.