Fuente: principales marcos de JavaScript, bibliotecas y herramientas y cuándo usarlos
¡Parece que casi cada dos semanas hay una nueva biblioteca de JavaScript que asalta a la comunidad web! La comunidad web es cada vez más vibrante, diversa y se está moviendo rápidamente en múltiples frentes. Sería una hazaña imposible encuestar a todos los principales marcos y bibliotecas de JavaScript. En cambio, compartiré algunos de los más famosos e influyentes para el desarrollo front-end. Así que echemos un vistazo al marco de front-end web, las bibliotecas y las herramientas principales de JavaScript y cuándo usarlos.
También:
- No se ofenda si no incluí su elemento JavaScript favorito aquí.
- Recuerde siempre mantener actualizados sus marcos y bibliotecas. La última versión a menudo tiene la mejor compatibilidad entre navegadores y dispositivos cruzados. Puede usar herramientas como este escáner para ayudar a determinar si una versión anterior es compatible con el conjunto más grande de dispositivos.
Muy bien, vamos a la lista!
AngularJS
Angular es el marco empresarial popular que muchos desarrolladores están utilizando para construir y mantener aplicaciones web complejas. La popularidad de Angular es inmensa, y las compañías que lo usan son tan diversas como Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, Google. Angular es un marco de código abierto compatible con Google. Angular se describe a sí mismo como una extensión de HTML para crear aplicaciones web complejas. Además, si está familiarizado con TypeScript, así es como se escribió Angular 2.
Más de este autor
- 3 complementos que todo Gruntfile y Gulpfile necesita
- Un resumen de las mejores características nuevas en ES2015
Angular es un marco de tipo MVC. Ofrece enlace de datos bidireccional entre modelos y vistas. Este enlace de datos permite una actualización automática en ambos lados siempre que haya un cambio de datos. Le permite crear componentes de vista reutilizables. Proporciona un marco de servicios para permitir fácilmente la comunicación del servidor back-end-frontend. Finalmente, es simplemente JavaScript.
¿Cuándo usar AngularJS? Cuando está creando una aplicación web front-end compleja y necesita un marco modular único para manejar todo.
GitHub: https://github.com/angular/angul …
Versión actual: 1.4.7 / 1.2.29
Sitio web: angularjs.org
Reaccionar
¡React es el proyecto JavaScript favorito de este año! Todo el mundo parece estar hablando de ReactJS. Cada conferencia a la que he asistido en el último año tuvo al menos un par de charlas sobre React y otras bibliotecas de la misma familia (Flux, Redux) React es de código abierto y desarrollado principalmente por Facebook con contribuciones de otras grandes empresas tecnológicas. React se describe a sí mismo como una biblioteca de JavaScript para construir interfaces de usuario.
Reaccionar es principalmente la V en MVC. Se enfoca completamente en esa pieza de MVC y no tiene en cuenta la arquitectura del resto de su aplicación. Proporciona una capa de componentes que hace que sea más fácil crear elementos de la interfaz de usuario y combinarlos. Abstrae el DOM para optimizar el procesamiento y le permite renderizar React desde node.js. Además, implementa un flujo de datos reactivo unidireccional que facilita su comprensión y uso que otros marcos.
Siendo la V en MVC, varios proyectos combinan React con los gustos de Angular o Ember.
¿Cuándo usar React? Cuando desee una capa de Vista potente pero no necesite un marco elaborado para el resto de su aplicación o cuando desee que una capa de Vista vaya con su aplicación Angular, Backbone o Ember. Cuando intentas crear un marco web isomorfo.
GitHub: https://github.com/facebook/react
Versión actual: v0.14.0
Sitio web: Facebook.github.io/react/
Columna vertebral
Backbone es un marco famoso y simple que cabe en un solo archivo JavaScript. La columna vertebral ha existido por un tiempo; desarrollado por Jeremy Ashkenas de CoffeeScript y Underscore fama. Backbone es especialmente popular entre los equipos que buscan una estructura simple para sus pequeñas aplicaciones web sin incorporar un marco grande como Angular o Ember.
Backbone proporciona un marco MVC completo junto con enrutamiento. Los modelos permiten el enlace de clave-valor y eventos para manejar cambios de datos. Los modelos (y colecciones) pueden conectarse a las API RESTful. Las vistas tienen un manejo de eventos declarativo, y el enrutador hace un excelente trabajo al manejar su URL y administración de estado. Todo lo que necesita para crear una aplicación de página única sin ofrecer demasiado y sin una complejidad innecesaria.
¿Cuándo usar Backbone? Backbone es mi marco GOTO para aplicaciones web simples.
GitHub: https://github.com/jashkenas/bac …
Versión actual: 1.2.3
Sitio web: backbonejs.org
Ascua
Ember es un marco de aplicación web obstinado que se centra en la productividad del programador. Ember es relativamente popular, y el equipo central incluye personas inteligentes como Yehuda Katz, quien formó parte de los equipos Ruby on Rails y jQuery Core. Ember se describe a sí mismo como “un marco para crear aplicaciones web ambiciosas” que no te hace perder el tiempo. Es muy obstinado y hace muchas elecciones para usted.
Ember también es un marco MVC. Incluye un motor de plantillas y vistas que se actualiza automáticamente cuando los datos cambian, al igual que Angular, Backbone y React. Incluye el concepto de componentes web que le permiten extender HTML con sus propias etiquetas (al igual que Angular). También tiene un motor de enrutamiento y modelo que sabe cómo trabajar con su API RESTful.
¿Cuándo usar Ember? Cuando solo quieres un marco que simplemente funcione. Use Ember cuando no necesite flexibilidad porque tiene un presupuesto ajustado o una fecha límite difícil.
GitHub: https://github.com/emberjs/ember.js
Versión actual: 2.1.0
Sitio web: emberjs.com
jQuery
jQuery es la biblioteca que no necesita presentación. Es el único responsable de hacer realidad los sitios entre navegadores y de llevar la web a donde está hoy. Los estándares web han sido adoptados y respetados genuinamente por la mayoría de los principales fabricantes de navegadores y jQuery es una de las razones. La misión de la Fundación jQuery es “mejorar la web abierta, haciéndola accesible para todos, a través del desarrollo y soporte de software de código abierto, y la colaboración con la comunidad de desarrollo”.
jQuery es la biblioteca de JavaScript más utilizada en el mundo, y ninguna aplicación debería funcionar sin ella a menos que no le guste la productividad del programador. Hace que el recorrido del DOM, el manejo de eventos, la animación, AJAX sea mucho más simple y fácil en todos los navegadores.
¿Cuándo usar jQuery? Siempre, a menos que desee utilizar una versión más ligera como Zepto.
GitHub: https://github.com/jquery/jquery
Versión actual: v1.11.3 o v2.1.4
Sitio web: jquery.com
Subrayado y lodash
A veces, lo que viene incorporado a JavaScript no es suficiente para que los programadores sean realmente productivos. Siempre falta una función de utilidad o una función que simplifique el código. El subrayado (y lodash) es una biblioteca de JavaScript que proporciona un conjunto completo de funciones de utilidad sin parches de los objetos de JavaScript incorporados. Ambas bibliotecas proporcionan más de 100 ayudantes funcionales y otros artículos especializados; incluidas funciones como map
,
filter
,
invoke
,
reduce
,
template
,
throttle
,
bind
,
extend
,
pick
,
clone
y mucho más.
¿Cuándo usar el subrayado? Cuando desee un solo archivo JavaScript que aumente de inmediato la productividad del programador.
Subraya GitHub: https://github.com/jashkenas/und …
Versión actual de subrayado : 1.8.3
Sitio web de subrayado : underscorejs.org
¿Cuándo usar lodash? Cuando desee una versión amodular y ligeramente más eficiente de Underscore con soporte más fácil para AMD y complementos comunitarios.
LodashGitHub: https://github.com/lodash/lodash
Versión actual de Lodash : v3.10.1
Sitio web de Lodash: lodash.com
D3.js
La visualización de datos y gráficos es un requisito común para las aplicaciones web. D3.js es el estándar de facto cuando se trata de cualquier manipulación y visualización de datos. Es uno de los proyectos más populares en GitHub y es utilizado por cientos de organizaciones. Muchas bibliotecas de gráficos, diagramas y visualización construidas sobre D3.
D3 le permite manipular documentos de datos de cualquier fuente y aplicar una transformación en DOM o / y SVG o / y CSS. D3 se centra en los estándares web modernos y garantiza que esté libre de cualquier formato propietario como Flash o Silverlight.
¿Cuándo usar D3.js? Siempre que necesite visualización de cualquier tipo.
GitHub: https://github.com/mbostock/d3
Versión actual: 3.5.6
Sitio web: d3js.org
Babylon.js
¿Busca construir un videojuego que se ejecute completamente en los estándares web modernos y en todos los navegadores? Echa un vistazo a Babylon.js, un motor de juegos en 3D basado en WebGL y JavaScript. Puedes crear juegos increíblemente de alta calidad completos con sistemas de física, audio y partículas, entre otras cosas.
¿Cuándo usar Babylon.js? Siempre que estés construyendo un videojuego o una compleja escena 3D de cualquier tipo.
GitHub: https://github.com/BabylonJS/Bab …
Versión actual: 2.2
Sitio web: babylonjs.com
Three.js
¿Desea crear una visualización en 3D pero no necesita un motor de juego completo? Three.js proporciona una biblioteca 3D liviana que permite renderizar 3D en un lienzo HTML5, SVG y WebGL. Es una biblioteca bastante sencilla, y hay cientos de hermosos ejemplos en el escaparate de three.js.
¿Cuándo usar Three.js? Siempre que necesite una visualización 3D simple que pueda salir a un lienzo.
GitHub: https://github.com/mrdoob/three.js/
Versión actual: r73
Sitio web: threejs.org
Mocha y Chai
Probar JavaScript ha sido increíblemente molesto durante mucho tiempo. Deseche eso, probar cualquier código generalmente se considera molesto, pero es algo que todo desarrollador debería hacer. En lugar de probar su código, cada desarrollador parece siempre despreciarlo e ignorarlo. Hay una solución para este odio, y viene en forma de Mocha y Chai. Si bien ambas bibliotecas toman sus nombres de deliciosas bebidas calientes, ambas bibliotecas lo ayudan a probar su código, pero de diferentes maneras.
Mocha es un marco de prueba de JavaScript que facilita la prueba del código asíncrono en su módulo de nodo o aplicación de navegador. Las pruebas de Mocha pueden ejecutarse en serie y tienen la calidad adicional de excepciones de rastreo para los casos de prueba correctos.
Chai es una biblioteca de afirmación de desarrollo basada en comportamiento / desarrollo basada en pruebas que se puede combinar con Mocha. Hace que sea sencillo expresar lo que está probando en un estilo legible.
¿Cuándo usar Mocha & Chai? ¡SIEMPRE! Pruebe su código y haga del mundo un lugar mejor.
Mocha GitHub: https://github.com/mochajs/mocha
Versión actual de Mocha: 2.3.3
Sitio web de Mocha: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai versión actual: v3.4.1
Sitio web de Chai: chaijs.com
Karma
Habiendo incluido a Mocha y Chai en esta lista, sería incompleto no incluir un corredor de prueba para ejecutar estas pruebas o quizás configurar pruebas de integración continua. Karma es una herramienta diseñada para ayudar a automatizar la ejecución de sus pruebas en diferentes navegadores. Le ayudará a ejecutar sus pruebas de Mocha y Chai en todos los navegadores que existen.
No todos los navegadores se ejecutan en todas las plataformas, pero afortunadamente hay un par de herramientas gratuitas que puede usar para probar otros navegadores, eche un vistazo a las capturas de pantalla del navegador. Si está ejecutando en OS X y desea probar Edge o Internet Explorer, puede usar esta herramienta de forma gratuita.
¿Cuándo usar Karma? Siempre que tenga un conjunto completo de pruebas para sus aplicaciones y desee asegurarse de que las pruebas pasan en todos los navegadores.
GitHub: https://github.com/karma-runner/ …
Versión actual: v0.13
Sitio web: karma-runner.github.io
PhantomJS
Ejecutar navegadores completos para probar su código requiere mucha memoria y CPU. PhantomJS le permite ejecutar un WebKit sin cabeza, el motor de renderizado detrás de Safari y anteriormente Chrome (ahora Blink). Le permite ejecutar sus pruebas, capturar capturas de pantalla, monitorear la red y automatizar la navegación de páginas desde una API de JavaScript.
Cuando a PhantomJS? Cuando necesite hacer más pruebas, manipule las páginas y monitoree las solicitudes de red.
GitHub: https://github.com/ariya/phantomjs
Versión actual: v2.0
Sitio web: phantomjs.org
Grunt & Gulp
La creación de sitios web para la producción generalmente implica algunas tareas para mejorar el rendimiento, como la minificación de JavaScript y CSS, la compilación de CoffeeScript / TypeScript, pruebas unitarias, lintin. Tal vez ya tenga una cadena de herramientas lista para preparar su sitio web para la producción, pero si no lo hace, desea utilizar un corredor de tareas como Grunt o Gulp. Ambos tienen complementos infinitos para hacer casi cualquier transformación en su sitio web para prepararlo para la producción.
¿Cuándo usar Grunt? Cuando prefiera escribir archivos de configuración y no le importe que su corredor de tareas genere archivos intermedios.
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt versión actual: v0.4.5
Sitio web de Grunt: gruntjs.com
¿Cuándo usar Gulp? Cuando prefiera escribir código sobre la configuración y quiera aprovechar las capacidades de transmisión de node.js para una ejecución de tarea más rápida. Gulp GitHub: https://github.com/gulpjs/gulp
Versión actual de Gulp: v3.9.0
Sitio web de Gulp: gulpjs.com
Babel
JavaScript como lenguaje está evolucionando rápidamente. ECMAScript2015 se lanzó el verano pasado y muchas de sus nuevas funciones se implementan en los últimos navegadores. Si desea ver la compatibilidad de ECMAScript 2015, puede ver esta tabla en @kangax. Notarás que las últimas versiones de Edge, Firefox y Chrome tienen una compatibilidad casi completa.
No vivimos en un mundo perfecto. Como desarrolladores, necesitaremos continuar admitiendo navegadores antiguos que no tengan las últimas y mejores funciones de JavaScript. Queremos avanzar en la web y mejorar nuestras bases de códigos. Babel es un compilador de JavaScript que compila el último estándar de JavaScript para JavaScript compatible con ES5, lo que le permite ejecutar en navegadores tan antiguos como IE9. Tiene algunos complementos que facilitan el desarrollo con React e incluso utilizan funciones que no forman parte de la especificación (por ejemplo, ES7).
¿Cuándo usar Babel? Cuando desee utilizar nuevas funciones de lenguaje JavaScript y aún admitir navegadores antiguos.
GitHub: https://github.com/babel/babel
Versión actual: 6.1.2
Sitio web: babeljs.io