3 Mejor marco / biblioteca de JavaScript para desarrollo front-end

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 construyendo herramientas para el idioma a diario.

Esto hace que sea abrumador a la hora de decidir qué herramienta / marco / biblioteca usar para una tarea en particular porque siempre hay múltiples opciones para literalmente cualquier cosa que desee hacer en JavaScript. Al principio, sigue siendo un desafío decidir qué biblioteca o marco aprender.

Este artículo se centra en desmitificar la ventaja de utilizar varios marcos / bibliotecas front-end de JavaScript y, en última instancia, ofrece una imagen más clara de ellos. Su objetivo es facilitar el proceso de decisión de seleccionar uno.

React

Reaccionar no es un marco, sino una biblioteca de JavaScript para crear interfaces de usuario.

Es de código abierto y es mantenido por Facebook y una comunidad de desarrolladores individuales. React fue escrito inicialmente por jordan walke como herramienta interna en Facebook. Más tarde fue fuente abierta y se lanzó al público en general en 2013, y ha ganado una amplia gama de popularidad desde entonces.

Algunas de las características incluyen las siguientes.

Proporciona componentes reactivos, personalizables y reutilizables
Utiliza un DOM virtual
Extremadamente rápido
Basado en componentes
Enlace de datos unidireccional
Código de reutilización
Tiene un ecosistema vibrante y próspero detrás de él.
Manejo conveniente de la administración del estado

Instalación / uso

React se puede utilizar en la interfaz de dos formas diferentes.

Sobre CDN
Usando Node.JS

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 según el propósito.

Por ejemplo, si se usa en un entorno de desarrollo, entonces:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Y, para la producción

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Usando Node.JS

Supongo que ya tiene NodeJS instalado. Para instalar React, simplemente escriba el siguiente comando.

sudo npm i -g create-react-app --save-dev

Una vez realizada la instalación, escriba el siguiente comando

create-react-app my-first-react-application

El comando anterior instalará todas las bibliotecas necesarias para que React funcione correctamente, lo que incluye un servidor de desarrollo, un paquete web y babel.

Navegue hasta la my-first-react-application carpeta y ejecute el siguiente comando

npm start

Lo anterior lanzará 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 de 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, por su capacidad para 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 tú y lanzado al público en febrero de 2014. Las siguientes son algunas de las características.

Proporciona componentes de vista reactiva y componible.
Utiliza un DOM virtual
Mantiene el enfoque en la biblioteca principal (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
Código de reutilización

Instalación / uso

Puede usar Vue.js en el front-end a través de CDN o con Node.js

Para utilizar el Forma CDN, puede agregar la siguiente secuencia de comandos a la sección de encabezado de su página HTML.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

El script anterior es adecuado para fines de desarrollo, ya que incluye un mensaje de consola importante. Sin embargo, para la producción, debería utilizar el siguiente.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Y para usar con Nodejs, puedes instalarlo usando npm mando.

npm install vue

Le recomiendo encarecidamente que lea el Vue JS oficial documentación para aprender más o considerar tomar este camino.

Angular

Angular es un marco de JavaScript estructural para páginas dinámicas. Permite el uso de HTML como lenguaje de plantilla y permite el uso de sintaxis HTML para expresar el componente de las aplicaciones de forma clara y concisa. Es un proyecto de código abierto mantenido por Google y otros contribuyentes.

INSTALACIÓN

Asegúrate de tener instalado el último Nodejs. Lo primero que necesitaremos instalar es la herramienta CLI de Angular.

npm install -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 npm módulo 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.

[root@lab 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.

En resumen

Entonces, lo que eliges aprender es más una preferencia personal que "cuál es mejor".

Todos los marcos / bibliotecas enumerados anteriormente son excelentes. He aquí un breve resumen;

Debe aprender Angular si desea un Framework en el que quiera confiar sin tener que lidiar con dependencias externas.
Debería aprender a React si desea compilar una aplicación de página única PWA rápida y se siente cómodo con JSX.
React tiene la comunidad más vibrante y más oportunidades laborales debido a su gran comunidad.
React es relativamente fácil de empezar.
React es altamente personalizable y trata cada pieza de la interfaz de usuario como un componente.
Vue tiene las mismas ventajas que React pero sin JSX.
El mercado laboral de Vue aumenta constantemente.

Aquí hay un gráfico de Tendencias de Google que muestra una comparación de la tasa de popularidad de los 3 de ellos.

Si el desarrollo de front-end es su interés, puede consultar este Curso Udemy.