Más allá de jQuery: una guía experta sobre marcos de JavaScript

La característica que define a un programador realmente bueno es la pereza. Sin embargo, eso no significa estúpido o ignorante. El programador perezoso realmente bueno no escribe (luego necesita depurar y probar) 100 líneas de código cuando 10 bastarán. En el mundo de JavaScript, el desarrollador verdaderamente perezoso dependerá de un marco eficiente, bien probado y con soporte para evitar reinventar constantemente soluciones a problemas comunes.

Los marcos “fragmentan” gran parte de la funcionalidad detallada del lenguaje JavaScript en llamadas a métodos, lo que reduce la cantidad de código que el programador perezoso necesita escribir, probar y depurar. Hay dos obstáculos que superar antes de aprovechar esa ventaja: elegir un marco para su propósito y aprenderlo.

Una vez que haya aprendido un marco, el curso obvio es ceñirse a él en todo lo que desarrolle para no tener que aprender algo más, pero eso no siempre es útil. De hecho, una de las pistas que dice que está usando el marco incorrecto para su tarea actual es que se encuentra haciendo mucho trabajo. Así que sé muy vago y sigue aprendiendo siempre.

Un poco de historia de JavaScript

La historia de JavaScript se remonta al trabajo de desarrollo que realizó Brendan Eich en el lenguaje Mocha para la empresa de navegadores web Netscape en 1995. Mocha se lanzó como LiveScript más tarde ese año y se renombró a JavaScript cuando Sun otorgó a Netscape una licencia de marca comercial. Intentar vincular el intérprete de JavaScript liviano tipo C con el Java pesado no relacionado (un lenguaje compilado de tokens y orientado a objetos) por medio de un nombre similar parecía una buena idea para fines de marketing en 1995, pero a lo largo de los años esa elección ha Causó un sinfín de confusión.

El desarrollo de JavaScript durante la próxima década estuvo marcado por desacuerdos entre los implementadores de navegadores y un esfuerzo de estándares ECMA bastante débil. Lo que cambió este malestar y revitalizó el lenguaje fue el surgimiento de Dynamic HTML y Ajax a mediados de la década de 2000, seguido rápidamente por la introducción de bibliotecas de JavaScript de código abierto como Prototype, jQuery, Dojo y MooTools, que estaban destinadas a hacer HTML dinámico. y Ajax más fácil de usar y para proporcionar "widgets" para JavaScript que mejorarían la funcionalidad de los controles de formulario HTML.

Aunque Netscape lanzó un servidor JavaScript poco después de JavaScript para el navegador, el lenguaje no despegó realmente para el uso de back-end hasta el surgimiento de Node.js a partir de 2009. Parte de lo que hizo atractivo a Node.js fue el uso de Google motor JavaScript V8 altamente optimizado para módulos de biblioteca, con código central en C ++ bastante portátil.

Este recorrido por los marcos de JavaScript es un intento de dar sentido a las principales bibliotecas de JavaScript de la actualidad en tres categorías: las que se ejecutan en servidores Node.js, las que funcionan en navegadores y las que admiten aplicaciones móviles nativas o híbridas.

Marcos de Node.js

Node.js es una tecnología de servidor basada en JavaScript y C ++ que ha atraído bastante atención y apoyo desde su introducción (con una gran ovación) por el autor Ryan Dahl en la JSConf europea en noviembre de 2009. Node.js se distingue por un Arquitectura impulsada por eventos capaz de E / S asíncrona, una pequeña huella de memoria y alto rendimiento y escalabilidad para aplicaciones web.

Si bien Node.js tiene todas las piezas necesarias para implementar un servidor web, escribir esa capa requiere algo de trabajo. TJ Holowaychuk lanzó Express 1.0 Beta en julio de 2010, y pronto se convirtió en el servidor back-end "predeterminado" para Node.js y parte de la pila MEAN, con la base de datos MongoDB y el marco front-end Angular.JS.

Sin embargo, diferentes desarrolladores y organizaciones tienen diferentes necesidades. Express ha generado directa o indirectamente Locomotive, Hapi, Koa, Kraken y Sails.js. Meteor es bastante diferente, aunque también se ejecuta en Node.js.

Rápido. Express es un marco de aplicación web Node.js mínimo y flexible, que proporciona un conjunto sólido de funciones para crear aplicaciones web de una sola página, de varias páginas e híbridas. La API Express se ocupa de la aplicación web, las solicitudes y respuestas HTTP, el enrutamiento y el middleware. A partir de Express 4.x, el middleware admitido para Express reside en varios repositorios separados.

Han aparecido varias bifurcaciones de Express y complementos para Express, incluidos Locomotive, Hapi y Koa. Koa fue creado por uno de los principales contribuyentes de Express.

Express es más antiguo que sus vástagos y tiene una huella más grande. Sin embargo, también tiene una comunidad más grande y más estabilidad. Constantemente veo Express incorporado en otros frameworks y herramientas sin comentarios, como si fuera la única opción posible para construir un servidor web en Node.js. En GitHub, el marco tiene más de 23,000 estrellas y 4,000 bifurcaciones.

Hapi. Hapi es un marco de trabajo centrado en la configuración y fácil de usar con soporte integrado para validación de entrada, almacenamiento en caché, autenticación y otras instalaciones esenciales para crear aplicaciones web y de servicios. Hapi permite a los desarrolladores centrarse en escribir lógica de aplicación reutilizable de una manera altamente modular y prescriptiva. Fue desarrollado por Walmart Labs y es una buena opción para equipos grandes y proyectos grandes.

Hapi se construyó originalmente sobre Express, pero luego se rediseñó para ser independiente. Se basa en las ideas de que "la configuración es mejor que el código" y "la lógica empresarial debe aislarse de la capa de transporte". En el ejemplo anterior, observe cuán clara y limpia aparece en el código la configuración de las rutas del servidor.

Koa. Koa es un nuevo marco web diseñado por el equipo detrás de Express, pero independiente del código Express. Koa pretende ser una base más pequeña, más expresiva y más sólida para las aplicaciones web y las API. Koa usa generadores ES6 para middleware en lugar de usar devoluciones de llamada de Node.js. La siguiente es una aplicación Koa de "hola, mundo" que utiliza un generador, que hace una yield nexttransferencia del control al siguiente generador:

La diferencia entre los generadores de middleware, como los usa Koa, y las devoluciones de llamada, como los usan Express y Connect, es que se obtiene más flexibilidad con los generadores. Por ejemplo, Connect simplemente pasa el control a través de una serie de funciones hasta que una regresa, mientras que Koa cede el control "aguas abajo", luego el control fluye hacia atrás "aguas arriba". En el ejemplo anterior, el tiempo de respuesta x "envuelve" el generador de respuesta, con la yield nextdeclaración marcando la llamada. El rendimiento es más flexible que las llamadas a funciones explícitas, ya que facilita la inserción de otro generador en la secuencia, por ejemplo, un registrador web entre el temporizador y la respuesta.

Kraken. Kraken, un proyecto de código abierto de PayPal, es una capa segura y escalable que se extiende a Express proporcionando estructura y convenciones, al igual que Locomotive. Aunque Kraken es el pilar principal de su marco, los siguientes módulos también se pueden usar de forma independiente: Lusca (seguridad), Kappa (proxy NPM), Makara (LinkedIn Dust.js I18N) y Adaro (LinkedIn Dust.js Templating).

Kraken confía en yogenerar proyectos, como se muestra en la captura de pantalla de la izquierda. Al igual que Locomotive, organiza sus proyectos en directorios tipo Rails convencionales, incluidos modelos, controladores y config. Como se genera, Kraken se vincula a Express como middleware estándar, definido como an app, que luego tiene sus métodos app.use()y app.listen()llamados. Cada ruta en un servidor Kraken vive en su propio archivo en la carpeta de controladores.

Locomotora. Como marco web para Node.js, Locomotive admite patrones MVC, rutas RESTful y convención sobre configuración (como Rails), mientras se integra perfectamente con cualquier motor de base de datos y plantilla. Locomotive se basa en Express y Connect, que es un marco de unión simple para middleware utilizado por varios marcos de Node.js.

Locomotive agrega a Express algo de estructura similar a Ruby on Rails, que puede ver en la imagen de arriba, que Express de otra manera carece. Las vistas de locomotoras suelen ser archivos JavaScript incrustados (html.ejs), como se muestra aquí, pero Locomotive también admite Jade y otros motores de plantilla compatibles con Express. La funcionalidad REST está controlada por rutas, como suele ser el caso en los servidores basados ​​en Express. Puede usar cualquier capa de base de datos y ORM (mapeo relacional de objetos) que desee con Locomotive. La guía demuestra el uso de MongoDB con Mongoose, además de trabajar con Passport para la autenticación de usuarios.

Meteorito. Meteor le ofrece una forma radicalmente más sencilla de crear aplicaciones web y móviles en tiempo real, completamente en JavaScript, a partir de una base de código. En lugar de enviar HTML por cable, Meteor envía datos desde el servidor para que el cliente los procese. Además de funcionar de forma independiente, Meteor puede integrarse con AngularJS y React. Meteor no se parece en nada a Express, aunque también está construido sobre Node.js y es compatible con las plantillas Handlebars, Blaze y Jade.

Meteor permite la creación rápida de prototipos y produce código multiplataforma (Web, Android, iOS). Se integra con MongoDB, utilizando el Protocolo de datos distribuidos y un patrón de publicación-suscripción para propagar automáticamente los cambios de datos a los clientes sin necesidad de que el desarrollador escriba ningún código de sincronización. En el cliente, Meteor depende de jQuery y se puede usar con cualquier biblioteca de widgets de IU de JavaScript.

Meteor es desarrollado por Meteor Development Group, una startup incubada por Y Combinator. Meteor ahora tiene la madurez suficiente para admitir media docena de libros tutoriales. El proyecto ha atraído más de 32,000 estrellas en GitHub.

Meteor en sí es un software gratuito de código abierto, pero el grupo Meteor lo monetiza vendiendo suscripciones Meteor Galaxy DevOps, que incluyen espacio en el servidor AWS y soporte básico de Meteor, y una suscripción de soporte Premium separada.

Sails.js. Con Sails, puede crear aplicaciones Node.js personalizadas de nivel empresarial. Está diseñado para emular el patrón familiar modelo-vista-controlador (MVC) de marcos como Ruby on Rails, pero con soporte para los requisitos de las aplicaciones modernas: API basadas en datos con una arquitectura escalable orientada a servicios. Es especialmente bueno para crear aplicaciones de chat, paneles de control en tiempo real o juegos multijugador, pero puede usarlo para cualquier proyecto de aplicación web. Sails admite WebSockets y envía automáticamente mensajes de socket a las rutas de su aplicación.

Al igual que Rails, Sails valora la convención sobre la configuración, proporciona generadores y andamios para construir API REST rápidamente a partir de planos y utiliza un patrón de diseño MVC / registro activo. Sails está construido sobre Express y utiliza Waterline para su ORM, con soporte para uniones ORM. Waterline admite bases de datos SQL y NoSQL.

Sails es un marco de back-end diseñado para ser compatible con cualquier marco web de front-end, como Angular o Backbone, o dispositivo móvil, como iOS o Android, que le guste o necesite admitir. Hay un libro en proceso en Sails.js, todavía parcialmente completo.

Marcos HTML5 / JavaScript

Tradicionalmente, pensamos que las bibliotecas y marcos de JavaScript se ejecutan en navegadores. Como mencioné anteriormente, algunos de estos (jQuery, Dojo y MooTools) surgieron a mediados de la década de 2000 principalmente para facilitar la escritura de HTML dinámico y Ajax. Desde entonces, algunos de estos se han expandido a áreas adicionales de funcionalidad, como widgets de interfaz de usuario e interfaces de dispositivos móviles.

Otros han surgido más recientemente. AngularJS es un marco front-end que extiende HTML con marcado para vistas dinámicas y enlace de datos. Backbone.js y Ember están diseñados para desarrollar aplicaciones web de una sola página. React sirve para crear una interfaz de usuario o una vista, normalmente para aplicaciones de una sola página.

Otros marcos persiguen áreas de especialización más limitadas. D3 hace visualización de datos y animaciones. Socket.IO implementa aplicaciones web en tiempo real. Knockout es una forma de alto nivel de vincular un modelo de datos a una interfaz de usuario web. Polymer ofrece una capa liviana de "azúcar" sobre las API de componentes web para ayudarlo a crear sus propios componentes web. Underscore es una biblioteca de utilidad general.

Como era de esperar, tiene una gran cantidad de riquezas entre las que elegir para el desarrollo web del lado del cliente.

AngularJS.  AngularJS (o simplemente Angular, entre amigos) es un marco Ajax de JavaScript modelo-vista-lo que sea (MVW) que extiende HTML con marcado para vistas dinámicas y enlace de datos. Angular es especialmente bueno para desarrollar aplicaciones web de una sola página y vincular formularios HTML a modelos y controladores JavaScript.

El patrón modelo-vista-lo que sea que suena extraño es un intento de incluir los patrones modelo-vista-controlador, modelo-vista-vistamodel (MVVM) y modelo-vista-presentador (MVP) bajo un solo nombre. Si bien a los programadores les encanta discutir las diferencias entre estos tres patrones estrechamente relacionados, los desarrolladores de Angular decidieron excluirse de la discusión.

Básicamente, Angular sincroniza automáticamente los datos de su interfaz de usuario (vista) con sus objetos JavaScript (modelo) a través de un enlace de datos bidireccional. Para ayudarlo a estructurar mejor su aplicación y facilitar la prueba, Angular le enseña al navegador cómo realizar la inyección de dependencia y la inversión de control.

Angular fue creado por Google y de código abierto bajo la licencia MIT. El repositorio de GitHub tiene más de 47.000 estrellas y 22.000 bifurcaciones. Made with Angular muestra cientos de sitios web creados con Angular, muchos de ellos propiedades web de alto perfil.