Spanish (Español) translation by Jorge Montoya (you can also view the original English article)
JavaScript ha existido por más de 20 años, y es uno de esos lenguajes que nunca deja de evolucionar. El lenguaje ha estado experimentando un crecimiento acelerado recientemente, lo que me hace preguntarme si las modernas tecnologías front-end de JavaScript que son bien conocidas hoy serán relevantes en un par de años.
Sin embargo, es importante estar a la vanguardia trabajando con las últimas herramientas y marcos para un mejor flujo de trabajo de desarrollo. Este artículo explora varias bibliotecas, marcos y herramientas de JavaScript que debería considerar aprender en este momento.
Introducción
El entorno JavaScript ha crecido enormemente. Tiene su propio ecosistema de bibliotecas, marcos, herramientas, gestores de paquetes y nuevos lenguajes que compilan hasta JavaScript. Curiosamente, npm, que es el administrador de paquetes de facto para JavaScript, también es el registro de software más grande del mundo. Aquí hay un extracto de un artículo publicado en Linux.com en enero de 2017.
Con más de 350,000 paquetes, el registro npm contiene más del doble del siguiente registro de paquetes más poblado (que es el repositorio Apache Maven). De hecho, actualmente es el registro de paquetes más grande del mundo.
Avance rápido de ocho meses, y actualmente hay alrededor de 500,000 paquetes en el registro de npm. Eso es un crecimiento masivo en comparación con otros repositorios de paquetes.
Como desarrollador de JavaScript front-end, es importante mantenerse al día con las herramientas y bibliotecas de JavaScript modernas. Cuando una tecnología se vuelve popular, la demanda es alta, lo que a su vez significa más trabajos de codificación que pagan el salario más alto en la industria. Así que he reunido una lista de las populares tecnologías de JavaScript que creo que usted debería conocer.
Bibliotecas
Una biblioteca es una pieza de código reutilizable que ofrece cierta funcionalidad. Es una colección de funciones, objetos y clases que puede usar en su aplicación. Una biblioteca abstrae diferentes capas para que no tenga que preocuparse por sus detalles de implementación.
Puede llamar a una función de biblioteca y pasarle algunos parámetros, y la biblioteca la ejecuta y le devuelve el control. Sin embargo, no establece ninguna restricción estructural que restrinja la forma en que usa la biblioteca. Las bibliotecas populares de JavaScript incluyen:
React
React es una biblioteca de JavaScript creada por los desarrolladores de Facebook e Instagram. React fue votada como la tecnología más apreciada por los desarrolladores, de acuerdo con la Encuesta Stack Overflow 2017. React también tiene el mérito de ser el proyecto de JavaScript más popular basado en el recuento de estrellas de GitHub.
Entonces, ¿por qué React está llevándose toda la atención? Con React, es posible crear una interfaz de usuario interactiva usando un enfoque declarativo donde puede controlar el estado de la aplicación diciendo "la vista debería verse así". Utiliza un modelo basado en componentes donde los componentes son elementos UI reutilizables y cada componente tiene su propio estado.
React utiliza un DOM virtual para que no tenga que preocuparse por manipular directamente el DOM. Otras características notables de React incluyen flujo de datos unidireccional, sintaxis JSX opcional y una herramienta de línea de comandos para crear un proyecto React con configuración de compilación cero.
Si crees que React es la mejor opción y le gustaría aprender React, consulte nuestra serie de tutoriales Curso Rápido de React para Principiantes.
jQuery
jQuery es una biblioteca que hizo que JavaScript sea más accesible y que la manipulación de DOM sea más fácil que antes. La sencilla curva de aprendizaje de jQuery y la sintaxis fácil dieron lugar a una generación de nuevos desarrolladores del lado del cliente. Hace unos años, jQuery se consideró una solución sólida para crear sitios web robustos con soporte para todos los navegadores cruzados. Las características principales de jQuery, como la manipulación DOM basada en selectores de CSS, el manejo de eventos y la realización de llamadas AJAX, impulsaron su popularidad.
Sin embargo, las cosas han cambiado y el entorno de JavaScript ha evolucionado constantemente. Algunas de las características de jQuery se han incorporado a la nueva especificación ECMAScript. Además, las nuevas bibliotecas y marcos actualmente en uso tienen una forma nativa de vincular el DOM, y por lo tanto, ya no se requieren técnicas de manipulación DOM. La popularidad de jQuery está disminuyendo, pero no creo que desaparezca pronto.
D3: Documentos Controlados por Datos
D3 (o D3.js) es una poderosa biblioteca de JavaScript para producir visualizaciones interactivas usando estándares web como SVG, HTML y CSS. A diferencia de otras bibliotecas de visualización, D3 ofrece un mejor control sobre el resultado visual final.
D3 funciona vinculando los datos al DOM y luego realizando la transformación al documento. También tiene un ecosistema propio, que consiste en complementos y bibliotecas que extienden su funcionalidad básica. La biblioteca ha estado presente desde 2011, y tiene toneladas de documentación y tutoriales que pueden ayudarlo a comenzar.
Si está buscando crear visualizaciones simples sin invertir demasiado tiempo en ellas, debería consultar Chart.js. Tenemos una serie introductoria sobre Chart.js que cubre la mayoría de las visualizaciones que puede crear con Chart.js
Frameworks
Un framework tiene una arquitectura que dicta el flujo de control en su aplicación. El framework describe el esqueleto y te dice cómo debe organizarse todo. Además se le proporciona la funcionalidad básica requerida para configurar y ejecutar la aplicación. Además, está obligado a seguir los principios y patrones de diseño del framework. La diferencia entre un framework y una biblioteca es que usted llama a una biblioteca, mientras que el framework le llama a usted.
Un framework a menudo se compone de muchas bibliotecas y tiene un mayor nivel de abstracción. La funcionalidad como el manejo de eventos, la realización de llamadas AJAX, el enlace de plantillas y datos y las pruebas están integradas en el framework.
Angular
AngularJS fue una vez la tecnología de JavaScript más popular entre los desarrolladores front-end. Fue respaldado por Google y una comunidad de individuos y corporaciones. A pesar de la popularidad, AngularJS tenía su propia cuota de defectos. El equipo de Angular pasó dos años trabajando en una versión más nueva de Angular, que finalmente se lanzó en septiembre de 2016.
La versión de Angular 2 fue una versión reescrita de AngularJS. Algunas de las características de Angular 2 incluyen:
- TypeScript sobre JavaScript como lenguaje predeterminado
- arquitectura basada en componentes
- rendimiento mejorado en plataformas móviles y web.
- mejores herramientas y opciones de diseño
Sin embargo, la actualización de Angular 1.x a Angular 2 es costosa porque Angular 2 es una bestia completamente diferente. Esa es una de las razones por las que Angular 2 no ha experimentado la misma tasa de adopción que la de su predecesor. Pero Angular y AngularJS continúan estando entre las tecnologías más utilizadas según Stack Overflow (2017). El proyecto Angular tiene alrededor de 28,000 estrellas en GitHub.
Vue.js
Vue.js es un framework ligero de JavaScript que ha estado en tendencia este año. Es el marco de JavaScript más popular en GitHub en términos del recuento de estrellas de GitHub. Vue afirma ser un framework menos obstinado y, por lo tanto, es fácil para los desarrolladores ponerse al día. La sintaxis de plantilla basada en HTML de Vue vincula el DOM renderizado a los datos de la instancia.
El framework ofrece una experiencia similar a React con su DOM virtual y componentes reutilizables que puede utilizar para crear widgets y aplicaciones web enteras. Además, también puede usar la sintaxis JSX para escribir las funciones de renderizado directamente. Cuando el estado cambia, Vue.js usa un sistema de reactividad para determinar qué ha cambiado y vuelve a agregar la cantidad mínima de componentes. Vue.js también admite la integración de otras bibliotecas en el framework sin mucha molestia.
Ember.js
Ember.js es un marco de front-end basado en el patrón Modelo-Vista-Modelo de Vista (MVVM). Sigue la convención sobre el enfoque de configuración que es popular entre los frameworks del lado del servidor como Ruby on Rails y Laravel. Ember.js incorpora modismos comunes y mejores prácticas en el framework para que pueda obtener una aplicación en funcionamiento sin mucho esfuerzo.
La pila de Ember generalmente comprende:
- Ember CLI: proporciona opciones básicas de diseño y admite cientos de complementos.
- Ember Data: una biblioteca de persistencia de datos que se puede configurar para funcionar con cualquier servidor back-end.
- Ember Inspector: una extensión disponible para Chrome y Firefox.
- Liquid Fire: un complemento para transiciones y animaciones.
Herramientas
Una herramienta es una colección de rutinas que lo ayudan en el proceso de desarrollo. A diferencia de una biblioteca, una herramienta generalmente ejecuta una tarea en el código del cliente. Toma su código como entrada, realiza una tarea en él y luego devuelve una salida. Las herramientas comúnmente utilizadas incluyen transpilers y herramientas de compilación, minificadores de activos, bundlers de módulos y herramientas de diseño.
Herramientas: Ejecutores de Tareas de Propósitos Generales
Los ejecutores de tareas de propósito general son las herramientas que se usan para automatizar ciertas tareas repetitivas. Los ejecutores populares de tareas de propósito general incluyen:
Gulp
Gulp es un kit de herramientas de JavaScript utilizado como un ejecutor de tareas y como un sistema de compilación en el desarrollo web. La compilación, la minificación de código, la optimización de imágenes, las pruebas unitarias, el linting, etc. son tareas repetitivas que deberían automatizarse. Gulp facilita el proceso de tareas de escritura, incluso para personas que están menos familiarizadas con JavaScript.
Gulp utiliza tuberías para transmitir los datos de un complemento a otro y el resultado final se envía a una carpeta de destino. Gulp tiene un mejor rendimiento en comparación con Grunt porque no crea archivos temporales para almacenar resultados intermedios, lo que da como resultado menos llamadas de E/S.
Grunt
Grunt es un ejecutor de tareas y una herramienta de automatización para JavaScript. Grunt tiene una interfaz de línea de comandos que le permite ejecutar tareas personalizadas definidas en un archivo llamado Gruntfile. Grunt tiene miles de complementos para elegir, que deberían cubrir la mayoría de las tareas repetitivas comunes con las que se encontraría. Con Grunt, puede ejecutar todas las tareas bajo un solo comando, haciendo su vida más fácil.
npm
Gulp y Grunt requieren que pase tiempo aprendiendo y dominando una nueva herramienta, lo que lleva tiempo. Se puede evitar la introducción de dependencias adicionales en su proyecto al elegir una alternativa que ya viene incluida con Node.js. Aunque npm es mejor conocido como administrador de paquetes, las secuencias de comandos npm se pueden usar para realizar la mayor parte de las tareas mencionadas anteriormente.
Herramientas: Pruebas
Las pruebas son el proceso de validación y verificación de que la aplicación cumple con los requisitos empresariales y técnicos esperados. El enfoque de desarrollo basado en pruebas también ayuda a descubrir errores y, por lo tanto, debe tratarse como una parte integral de la pila de desarrollo de front-end moderna.
Jest
Jest es un framework de prueba relativamente nuevo creado por Facebook y bien recibido por la comunidad React. Existe una idea errónea de que Jest está específicamente diseñada para funcionar con React; sin embargo, según la documentación de Jest:
Aunque Jest puede considerarse un ejecutor de pruebas específico de React, de hecho es una plataforma de prueba universal, con la capacidad de adaptarse a cualquier biblioteca o marco de JavaScript. Puede usar Jest para probar cualquier código JavaScript.
La mayor ventaja de usar Jest sobre otras suites de prueba es que requiere una configuración cero o mínima para comenzar a escribir pruebas. El framework tiene una biblioteca de aserciones incorporada y admite el uso de funciones simuladas o espías.
Jest tiene una función llamada prueba de instantáneas que le permite asegurarse de que la interfaz de usuario de la aplicación no cambie inesperadamente. Los desarrolladores en Facebook y otros colaboradores han estado trabajando mucho en este proyecto recientemente, por lo que no sería una sorpresa si Jest resulta ser el marco de prueba más popular para JavaScript en los años venideros.
Mocha
Mocha es un framework de prueba de JavaScript que cuenta con soporte de navegador, soporte asíncrono que incluye promesas, informes de cobertura de prueba y una API de JavaScript para ejecutar pruebas. Mocha a menudo se combina con una biblioteca de afirmaciones como Chai, should.js, expect.js o better-assert porque carece de una biblioteca de aserciones propia.
Jasmine
Jasmine es un marco de prueba basado en el comportamiento para JavaScript. Jasmine pretende ser un conjunto de pruebas independiente de navegador, plataforma y framework. Jasmine tiene su propia biblioteca de afirmaciones llamada matchers que le da una sintaxis limpia y fácil de leer. Jasmine no tiene un corrector de prueba incorporado, y es posible que tenga que usar un corrector de prueba genérico como Karma en su lugar.
Resumen
JavaScript, el lenguaje de la web, ha permanecido relevante desde los inicios de su creación en 1995. Probablemente seguirá siendo así siempre que los navegadores no decidan abandonarlo por otro idioma. Aunque hay muchos otros lenguajes que compilan bajo JavaScript, no hay otro lenguaje de scripts que reemplace a JavaScript en el futuro previsible. ¿Por qué? Porque JavaScript se ha vuelto demasiado popular para ser reemplazado.
El lenguaje no está exento de curvas de aprendizaje, y también hay muchos frameworks y bibliotecas para mantenerle ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, consulte lo que tenemos disponible en el Mercado de Envato.
El entorno JavaScript definitivamente está evolucionando, lo cual es evidente a partir de las tendencias actuales en el desarrollo web. Las bibliotecas y frameworks antiguos se han reemplazado por nuevas tecnologías. jQuery, que alguna vez fue la biblioteca de JavaScript más favorecida, está experimentando una disminución en términos de atractivo, uso y popularidad. La nueva generación de bibliotecas, frameworks y herramientas de front-end gana terreno y obtiene aceptación universal.
Adaptarse a las nuevas tendencias en tecnología también tiene beneficios. Los trabajos de codificación que requieren React tienen algunos de los salarios más altos de la industria, con un salario promedio de $ 105,000 en los EE. UU. según Stack Overflow (2016). Por lo tanto, debe continuar aprendiendo y experimentando con las últimas herramientas y marcos para obtener lo mejor de JavaScript.
Si cree que me he perdido un framework, biblioteca o herramienta JavaScript que vale la pena mencionar, hágamelo saber a través de los comentarios.
Lectura Adicional
