Los 5 principales marcos JS para el desarrollo front-end en 2020. Parte 1

Probablemente, los desarrolladores front-end están familiarizados con algo similar: ingresas en el motor de búsqueda "los mejores marcos de JavaScript" y obtienes una gran cantidad de resultados en respuesta, de los cuales es muy difícil elegir exactamente lo que necesitas.

¿Qué es lo mejor para desarrollar partes del lado del cliente de proyectos web? La autora del material, cuya primera parte de la traducción publicamos hoy, dice que ella, como persona que trabaja en la programación a tiempo completo, sabe que los proveedores de servicios frontales están buscando algo que les permita acelerar el trabajo y facilitar la creación de interfaces.



La compilación de esta calificación de marcos y bibliotecas se basó en una encuesta de más de 450 desarrolladores de ValueCoders . Cinco de las herramientas más interesantes llegaron aquí.

Los desarrolladores de ValueCoders eligen React

Cuando descubrí que mis colegas estaban votando por React, no me sorprendió. La mayoría de los participantes de la encuesta consideraron a React como una de las mejores bibliotecas de JavaScript. Nuestros desarrolladores han usado React en muchos proyectos. Esto hizo posible ver claramente las fortalezas de esta herramienta. Cualquiera que use React obtiene una combinación de las siguientes características:

• Componentes reutilizables.
• Sincronización del estado de la aplicación y la interfaz.
• Sistemas de enrutamiento y estandarización.

Nuestros desarrolladores confían en gran medida en las capacidades de React para crear lógica de proyecto front-end. La herramienta es muy poderosa, pero al mismo tiempo, lo que me sorprendió, es sorprendentemente fácil de usar.

Resumen de nuestra aplicación

Nuestra aplicación está organizada de manera bastante simple. Este es un programa de maestros de música que los ayuda a administrar las actividades escolares en línea. Este proyecto ayuda a los maestros a hacer sus negocios básicos, facilitando la resolución de problemas organizacionales.

La principal dificultad para crear este proyecto fue el desarrollo de un panel de control diseñado para maestros. Les permite gestionar las actividades de los estudiantes y seguir sus logros. Resolvimos este problema utilizando el ecosistema de la biblioteca Redux como base de la aplicación. Es decir, creamos una sección de la aplicación destinada a los maestros, mediante la cual podrían recibir información sobre los logros de los estudiantes, demostrarles nuevas lecciones de música, comunicarse con ellos, comparar su juego con cualquier cosa, dejarles comentarios.


Información sobre el alumno y sus actividades.

En realidad, gané experiencia con React durante la creación de esta aplicación. ¿Significa esto que React es un líder reconocido en herramientas de front-end? No, no lo hace. Muchos, por ejemplo, pueden notar especialmente a Vue, llamando a este marco uno de los mejores y recordando el rico conjunto de herramientas auxiliares estándar disponibles en él.

En general, son los desarrolladores front-end quienes deciden qué marco es adecuado para resolver un problema específico. Al tomar tales decisiones, se enfrentan a la necesidad de responder muchas preguntas difíciles. Al mismo tiempo, dado que los desarrolladores generalmente no tienen tiempo para elegir una herramienta, generalmente se detienen ante lo que saben. Al mismo tiempo, pierden las ventajas potenciales de las tecnologías de la competencia. Por ejemplo, podemos hablar sobre el hecho de que un marco familiar para el desarrollador, si lo compara con otra cosa, puede no ser el más rápido.

Y para los principiantes, es difícil incluso hacer una elección, limitando las opciones a los tres marcos principales: Angular, React y Vue. Para facilitar tal elección, hemos seleccionado los 5 marcos y bibliotecas front-end más interesantes a los que se debe prestar atención a aquellos que realizarán desarrollo web en 2020.

Cinco grandes herramientas frontales

Según la popularidad y la prevalencia de las herramientas de desarrollo front-end, estos son los cinco marcos y bibliotecas JavaScript más notables:

• Reaccionar
• Vue
• Angular
• Ascua
• Backbone.js

Cada una de estas herramientas ha desarrollado una comunidad significativa de desarrolladores. Y si está buscando la base para su próximo proyecto web, no perderá apostando por una de estas herramientas. Aquí hay información sobre ellos durante los últimos seis meses, recopilada por npmtrends.com .


Descargue volúmenes para paquetes angulares, ember-source, react, vue y backbone


Comparación de paquetes angulares, ember-source, react, vue y backbone

Ahora hablemos de cada uno de estos proyectos. Comencemos con React.

1. Reaccionar

En el mundo de JavaScript, React es definitivamente un líder. Esta biblioteca utiliza las ideas de programación reactiva , presenta el desarrollo front-end y muchos de sus propios conceptos.

Para utilizar React de manera flexible en el desarrollo de proyectos web, debe aprender muchas herramientas adicionales. Aquí, por ejemplo, no hay una lista exhaustiva de tales herramientas proporcionadas por las bibliotecas que se pueden usar junto con React. Estos son Redux, MobX, Fluxy, Fluxible, RefluxJS. En el desarrollo React, también puede usar jQuery AJAX, Superagent, Axios y la API Fetch.

▍ Modo competitivo

Aquí hay un tweet del 24 de octubre de este año, que informa sobre la introducción en React de una capacidad experimental para soportar el modo competitivo (Modo concurrente). Los desarrolladores de React están mejorando constantemente este modo. Aquí puede encontrar enlaces a actuaciones de React Conf 2019 en modo competitivo y otras innovaciones de React, como renderizar componentes perezosos (creados con React.lazy ) dentro de los componentes React.Suspense . Ambas tecnologías hacen que las aplicaciones React sean más receptivas al renderizar sin bloquear el hilo principal. Esto permitirá que React no demore el procesamiento de tareas de alta prioridad, como dar forma a la respuesta de la aplicación a las interacciones del usuario.

▍Suspense y otras tecnologías

React.Suspense tecnología React.Suspense mejora el procesamiento de la carga de datos asíncrona en las aplicaciones React. Si describimos esta tecnología en pocas palabras, podemos decir que le permite organizar la espera del componente para que se cumplan ciertas condiciones y al mismo tiempo no interrumpir el funcionamiento de toda la aplicación.

Otra innovación introducida en React 16.8 son los ganchos. Los ganchos React permiten a los desarrolladores aprovechar las capacidades esenciales de React sin tener que usar componentes basados ​​en clases. Entre estas características están la gestión del estado del componente y el trabajo con métodos de su ciclo de vida. React contiene varios ganchos integrados, pero le permite al programador crear sus propios ganchos.

Las aplicaciones React consisten en componentes que contienen la lógica de la aplicación y el marcado HTML para formar la interfaz. Para mejorar la interacción entre los componentes, el desarrollador puede usar Flux o una biblioteca de JavaScript similar.

La programación de React utiliza conceptos como el estado y las propiedades de un componente. Están representados por objetos relevantes. Su uso permite organizar el almacenamiento de datos en un componente y el intercambio de datos entre componentes. Por ejemplo, transferir datos desde la lógica del programa implementado por un componente a la interfaz de la aplicación, o transferir datos desde componentes principales a componentes secundarios.

▍ Reaccionar elementos del ecosistema

Alrededor de la biblioteca React, ha surgido un ecosistema completo, representado por varias herramientas y bibliotecas de soporte. Estos son algunos de los componentes de este ecosistema:

• La biblioteca React y el propio React Router son una herramienta para administrar rutas en la aplicación.
• El paquete react-dom diseñado para trabajar con DOM.
• Reaccionar herramientas de desarrollador para Firefox y Chrome.
• JSX es un lenguaje de marcado que le permite describir elementos HTML en código JavaScript.
• La herramienta de línea de comandos create-react-app , que está diseñada para crear proyectos de plantilla React.
• Varias bibliotecas de apoyo. Entre ellos, por ejemplo, podemos mencionar la biblioteca Redux utilizada para controlar el estado de las aplicaciones, y la biblioteca Axios utilizada para intercambiar datos con las API del servidor.

Concluyendo la charla sobre React, podemos decir que esta biblioteca puede ser la mejor opción para aquellos que planean crear un proyecto web avanzado.

2. Angular

En la conferencia AngularConnect 2019, el equipo de desarrollo de Angular hizo declaraciones que permiten que Angular 9 se considere un punto de inflexión en el desarrollo de este marco. En particular, está previsto que el compilador Angular Ivy sea una herramienta estándar disponible para todas las aplicaciones. Las principales ventajas de esta tecnología son que su aplicación le permite acelerar el proceso de desarrollo, reducir el tamaño de las aplicaciones, aumentar su rendimiento y fiabilidad.

Modern Angular es un marco modular avanzado para el desarrollo front-end. Anteriormente, para conectar Angular a una página, era suficiente simplemente agregar la etiqueta apropiada a su código HTML, ahora el desarrollador puede importar los módulos Angulares que necesita en su proyecto.

Angular es conocido por su flexibilidad. Es por eso que las versiones de Angular 1.x siguen siendo relevantes. Sin embargo, muchos desarrolladores de hoy usan Angular 2+ debido a la arquitectura de marco MVC, que ha cambiado significativamente hacia la arquitectura basada en componentes.

Cualquiera que quiera usar Angular tendrá que enfrentar algunas dificultades mientras domina este marco. Entonces, para crear aplicaciones angulares, es casi obligatorio usar TypeScript. Aunque esto complica el trabajo con Angular, esta situación tiene sus ventajas. En particular, aumenta la confiabilidad de las aplicaciones debido al control de tipo avanzado, esto le da al programador herramientas de desarrollo adicionales.

▍Elementos del ecosistema angular

Aquí hay algunas partes del ecosistema angular:

• Herramientas de línea de comandos para simplificar la creación de preajustes de aplicaciones.
• Un conjunto de módulos que se pueden usar al desarrollar proyectos de Angular: @angular/common , @angular/compiler , @angular/core , @angular/forms , @angular/http , @angular/platform-browser , @angular/platform-browser-dynamic , @angular/router y @angular/upgrade .
• La biblioteca Zone.js, que le permite controlar el contexto de ejecución del código.
• Lenguajes TypeScript y CoffeeScript.
• El intercambio de datos en aplicaciones angulares se puede organizar utilizando RxJS y objetos observables.
• Angular Augury es una herramienta para depurar aplicaciones angulares.
• Tecnología Angular Universal para organizar la representación del lado del servidor de aplicaciones angulares.

Angular es un marco JS completo que brinda al programador web moderno todo lo necesario para un trabajo productivo. Angular debe prestar atención a aquellos que desean tener a su disposición un amplio conjunto de herramientas estándar y minimizar el uso de bibliotecas de terceros.

Continuación, parte 2

Estimados lectores! Si le ofrecieran nombrar el mejor marco para el desarrollo front-end, ¿qué elegiría?