Ja­va­S­cri­pt, también conocido por su abre­via­tu­ra JS, es un lenguaje de pro­gra­ma­ción con el que se pueden im­ple­me­n­tar co­n­te­ni­dos HTML dinámicos en el navegador. Este lenguaje puede uti­li­zar­se tanto para la pro­gra­ma­ción orientada a objetos (POO) como para la pro­gra­ma­ción procesual o funcional. Ja­va­S­cri­pt contiene objetos pre­de­fi­ni­dos, es decir, datos con ca­ra­c­te­rí­s­ti­cas, métodos o funciones es­pe­cia­les, para permitir el acceso a una página web pero su uso es, en parte, co­m­pli­ca­do. Hoy se encuentra un gran número de in­s­tru­c­cio­nes agrupado en diversas librerías Ja­va­S­cri­pt y en fra­me­wo­r­ks, he­rra­mie­n­tas que hacen más fácil la pro­gra­ma­ción. A co­n­ti­nua­ción, te pre­se­n­ta­mos los mejores y más conocidos.

Librería vs. framework

En primer lugar, es necesario poner de relieve sus di­fe­re­n­cias. A menudo, librería (bi­blio­te­ca) y framework se usan erró­nea­me­n­te como sinónimos. Aun cuando la tra­n­s­mi­sión se lleva a cabo de manera fluida en muchos aspectos, existen di­fe­re­n­cias su­s­ta­n­cia­les entre ambos.

Librería

En el ámbito de la pro­gra­ma­ción, el término librería hace re­fe­re­n­cia a una librería de programas, in­de­pe­n­die­n­te­me­n­te de si contiene clases o co­m­po­ne­n­tes o se trata de otro tipo de librería. Las librerías de programas siempre alojan su­b­pro­gra­mas que facilitan la pro­gra­ma­ción gracias a sus funciones de ayuda. A di­fe­re­n­cia de un framework, una librería se de­sa­rro­lla para ser usada de una manera de­te­r­mi­na­da y posee, para ello, funciones que han sido ajustadas las unas a las otras. Un ejemplo de ello es la librería Ja­va­S­cri­pt D3.js, que permite la vi­sua­li­za­ción de datos y con la cual se pueden realizar pequeñas tablas, diagramas o es­ta­dí­s­ti­cas e incluso re­pre­se­n­ta­cio­nes gráficas complejas que incluyan ani­ma­cio­nes y opciones para la in­ter­ac­ción. Las librerías o bi­blio­te­cas siempre están vi­n­cu­la­das a un software que accede a las funciones co­rre­s­po­n­die­n­tes de una librería de programas cuando las necesita. Como co­n­se­cue­n­cia, dichas bi­blio­te­cas solo funcionan en el entorno de un programa y no pueden eje­cu­tar­se de manera in­de­pe­n­die­n­te.

Framework

Un framework, que en inglés significa in­frae­s­tru­c­tu­ra o armazón, no es un programa autónomo, sino más bien un tipo especial de bi­blio­te­ca de clases. Los fra­me­wo­r­ks re­pre­se­n­tan la ar­qui­te­c­tu­ra de software (el marco) de una apli­ca­ción y de­te­r­mi­nan fu­n­da­me­n­ta­l­me­n­te el proceso de de­sa­rro­llo. Los fra­me­wo­r­ks poseen unos modelos concretos de de­sa­rro­llo que, a su vez, cuentan con diversas funciones (a menudo en forma de varias librerías) y sirven para de­sa­rro­llar apli­ca­cio­nes nuevas e in­de­pe­n­die­n­tes. Un ejemplo de ello es el Zend Framework para PHP, que puede uti­li­zar­se en los software para tiendas online de Magento y también de la he­rra­mie­n­ta de analítica web Piwik.

Inversión de control

Otra de las di­fe­re­n­cias entre un framework y una librería consiste en su control. En el caso de las librerías, se accede al código de los pro­gra­ma­do­res a través de la interfaz de pro­gra­ma­ción de un software. Sin embargo, los fra­me­wo­r­ks llevan a cabo una inversión del control (“Inversion of Control”): el código se integra en es­tru­c­tu­ras fijas del framework y se visualiza cuando es requerido. En resumen, se puede decir que las librerías son so­li­ci­ta­das por el programa, mientras que los fra­me­wo­r­ks crean las pautas para el programa.

Librerías Ja­va­S­cri­pt y fra­me­wo­r­ks

Lo más im­po­r­ta­n­te de Ja­va­S­cri­pt es que se trata de un lenguaje de pro­gra­ma­ción idóneo del lado del navegador. Sin embargo, para muchos pro­gra­ma­do­res resulta pro­ble­má­ti­ca la interfaz de la página web: el DOM (Modelo de objetos del documento). Aquí es pre­ci­sa­me­n­te donde entran en juego los fra­me­wo­r­ks JS y sus librerías, que facilitan el trabajo de de­sa­rro­lla­do­res en este y otros campos de la pro­gra­ma­ción. Las ex­te­n­sio­nes de Ja­va­S­cri­pt que aparecen a co­n­ti­nua­ción pueden de­s­ca­r­gar­se de forma gratuita.

Las bi­blio­te­cas Ja­va­S­cri­pt más populares

Las bi­blio­te­cas Ja­va­S­cri­pt son in­s­tru­c­cio­nes de código re­uti­li­za­bles por medio de las que se asignan ca­ra­c­te­rí­s­ti­cas y funciones (por ejemplo, para una página web). jQuery es la más conocida y esta ofrece numerosas y valiosas funciones, aunque también hay otras que pueden ser de utilidad.

jQuery

jQuery es la más utilizada de todas las librerías Ja­va­S­cri­pt. Esto se debe, entre otras razones, a que po­si­bi­li­ta la escritura de código jQuery en cualquier tipo de navegador y que para ello existen numerosos plugins. La librería de código abierto está incluida en numerosos sistemas de gestión de co­n­te­ni­dos como WordPress, Drupal o Joomla!. jQuery se utiliza sobre todo como una práctica interfaz de DOM y ofrece numerosas funciones: los se­le­c­to­res de CSS3 permiten se­le­c­cio­nar y manipular fá­ci­l­me­n­te los elementos de las páginas web, pero jQuery resulta es­pe­cia­l­me­n­te popular debido a la po­si­bi­li­dad de integrar las consultas rea­li­za­das con Ajax (so­li­ci­tu­des HTTP que no requieren volver a cargar la página web).

Ventajas In­co­n­ve­nie­n­tes
Asi­s­te­n­cia de Ajax En co­m­pa­ra­ción con CSS puede ser muy lenta
Muy popular Tiende al código espagueti
Bi­blio­te­ca extensa Se vuelve algo superflua con las nuevas funciones de Ja­va­S­cri­pt
Fácil de usar
Gran cantidad de plugins

jQuery UI jQuery UI, cuya te­r­mi­na­ción UI hace re­fe­re­n­cia a las siglas en inglés para User Interface (interfaz de usuario), es una extensión gratuita para jQuery que se emplea para diseñar y crear in­te­r­fa­ces de usuario, como por ejemplo de páginas o apli­ca­cio­nes web. Lo esencial de esta bi­blio­te­ca de co­m­po­ne­n­tes es que con ella se pueden generar efectos e in­ter­ac­cio­nes muy fá­ci­l­me­n­te. Entre las funciones de jQuery UI se encuentra la creación de opciones para la in­ter­ac­ción (drag and drop, aumento y di­s­mi­nu­ción de elementos web, etc.), de ani­ma­cio­nes y efectos, así como de widgets (como Au­to­co­m­ple­te, Slider, Da­te­pi­c­ker, etc.). Con el editor gráfico The­me­Ro­ller se pueden crear temas propios, aunque también se pueden utilizar y adaptar otros que ya estén di­s­po­ni­bles. También ofrece la po­si­bi­li­dad de im­ple­me­n­tar los co­m­po­ne­n­tes ne­ce­sa­rios por medio del diseño modular.

Ventajas In­co­n­ve­nie­n­tes
Manejo sencillo por medio deFácil de usar gracias a widgets Progreso lento
The­me­Ro­ller Requiere jQuery

Dojo Toolkit

Dojo Toolkit está diseñado para realizar apli­ca­cio­nes web y co­n­te­ni­dos web dinámicos. Como una de las bi­blio­te­cas de Ja­va­S­cri­pt más antiguas que todavía sigue teniendo re­le­va­n­cia en el me­r­ca­doo­fre­ce gran cantidad de funciones adi­cio­na­les. Sus co­m­po­ne­n­tes más im­po­r­ta­n­tes son Dojo, el programa principal, y Dijit, un módulo para in­te­r­fa­ces gráficas de usuario que permite in­co­r­po­rar elementos en la página con ayuda de widgets pre­de­fi­ni­dos. Dojo puede uti­li­zar­se con el DOM y con Ajax.

Ventajas In­co­n­ve­nie­n­tes
Fácil de usar gracias a widgets Difícil de aprender a usarla
Asi­s­te­n­cia de Ajax Progreso lento
Bi­blio­te­ca amplia y modular

React

React fue utilizada por primera vez en 2011 en el newsfeed de Facebook. En 2013 se publicó como una librería Ja­va­S­cri­pt de código abierto para crear in­te­r­fa­ces de usuario. Lo ca­ra­c­te­rí­s­ti­co de React es que no solo se puede utilizar en clientes de páginas web, sino también en el servidor o durante el de­sa­rro­llo de apli­ca­cio­nes. Esto se atribuye al uso de un DOM virtual, lo que también facilita el análisis de apli­ca­cio­nes web. Asimismo, esta bi­blio­te­ca de Ja­va­S­cri­pt destaca también por el one direction data flow (flujo de datos en una dirección): esta técnica pro­po­r­cio­na un código estable en el que los cambios en el código je­rá­r­qui­ca­me­n­te inferior no pueden influir en el superior. Así, los cambios solo pueden tener efecto en la dirección opuesta.

Ventajas In­co­n­ve­nie­n­tes
DOM virtual Difícil de aprender a usarlo
One way data flow
Re­n­de­ri­za­ción del lado del servidor
Po­si­bi­li­dad de uti­li­za­ción en apli­ca­cio­nes móviles

Zepto

Zepto es una librería Ja­va­S­cri­pt muy liviana: mientras que jQuery convence, sobre todo, por su fu­n­cio­na­li­dad, esto mismo es lo que intimida a muchos de­sa­rro­lla­do­res, y es que dicha bi­blio­te­ca de Ja­va­S­cri­pt puede resultar muy compleja. La mi­ni­ma­li­s­ta Zepto es mucho más ligera, por lo que se carga más rápido y ocupa menos espacio, pudiendo in­te­grar­se así en apli­ca­cio­nes móviles. Para que el volumen de archivos sea mínimo, Zepto reduce, por ejemplo, la co­m­pa­ti­bi­li­dad con los na­ve­ga­do­res más antiguos. Asimismo, para permitir el uso de Ajax y de ani­ma­cio­nes, se debe recurrir a módulos adi­cio­na­les.

Ventajas In­co­n­ve­nie­n­tes
Muy ligera No soporta los na­ve­ga­do­res más antiguos
Fácil de aprender a usarla Se necesitan módulos adi­cio­na­les para Ajax y para ani­ma­cio­nes
Casi ninguna ventaja en co­m­pa­ra­ción con jQuery

CreateJS

No una única bi­blio­te­ca, sino varias: CreateJS es una suite compuesta por cuatro bi­blio­te­cas di­fe­re­n­tes: EaselJS (gráficos e in­ter­ac­ti­vi­dad), TweenJS (ani­ma­cio­nes), SoundJS (audio) y PreloadJS (pre­loa­di­ng). No existe de­pe­n­de­n­cia entre ellas, lo que significa que no es necesario im­ple­me­n­tar las cuatro en un mismo proyecto cuando solo se necesita una. Además, se ofrecen algunas he­rra­mie­n­tas para si­m­pli­fi­car el trabajo con las librerías de Ja­va­S­cri­pt. El foco de atención es el de­sa­rro­llo de apli­ca­cio­nes HTML5 y Flash. En general, el equipo de CreateJS trabaja es­tre­cha­me­n­te con Adobe, por lo que también hay he­rra­mie­n­tas que ga­ra­n­ti­zan la co­la­bo­ra­ción fluida de la suite con los productos de Adobe.

Ventajas In­co­n­ve­nie­n­tes
Bi­blio­te­cas in­de­pe­n­die­n­tes Comunidad pequeña
He­rra­mie­n­tas adi­cio­na­les
In­te­gra­ción en Adobe Animate

Librerías Ja­va­S­cri­pt: tabla co­m­pa­ra­ti­va

jQuery jQuery UI Dojo Toolkit React Zepto CreateJS
Año de pu­bli­ca­ción 2006 2007 2005 2013 2010 2012
Ma­n­te­ni­mie­n­to JS Fou­n­da­tion JS Fou­n­da­tion Dojo Fou­n­da­tion Facebook Thomas Fuchs gskinner.com
Licencia MIT MIT BSD/AFL MIT MIT MIT
Co­la­bo­ra­do­res en GitHub 270 aprox. 300 aprox. 100 aprox. 1.100 aprox. 180 aprox. 40 aprox.
Pa­r­ti­cu­la­ri­da­des Bi­blio­te­ca más popular Foco de atención en GUI Foco de atención en apli­ca­cio­nes web DOM virtual Mi­ni­ma­li­s­ta In­te­gra­ción en Adobe Animate

Fra­me­wo­r­ks JS más uti­li­za­dos

El número de librerías Ja­va­S­cri­pt es no­ta­ble­me­n­te mayor que el de fra­me­wo­r­ks. Estos últimos sirven, sobre todo, para apli­ca­cio­nes web complejas y son muy efectivos en caso de que los de­sa­rro­lla­do­res in­te­r­ve­n­gan en la co­n­ce­p­tua­li­za­ción y es­pe­ci­fi­ca­ción del framework co­rre­s­po­n­die­n­te.

AngularJS

El framework creado por Google tiene, con di­fe­re­n­cia, la mayor comunidad entre los fra­me­wo­r­ks Ja­va­S­cri­pt. AngularJS se utiliza para crear apli­ca­cio­nes web de una sola página (apli­ca­cio­nes web que constan de un solo documento HTML), al igual hace su principal co­m­pe­ti­dor, este es, la bi­blio­te­ca de Facebook React. A causa del patrón MVVM (Model-View-ViewModel), se pueden de­sa­rro­llar apli­ca­cio­nes web es­pe­cia­li­za­das en la in­ter­ac­ción con los usuarios. Los pro­vee­do­res de este framework JS, no obstante, definen a AngularJS más bien, en parte en broma, como un modelo MVW o Model-View-Whatever, es decir, modelo-vista-lo que sea. La re­n­de­ri­za­ción de la apli­ca­ción se lleva a cabo, en este caso, del lado del cliente. El framework está basado en jQuery Lite, una versión reducida de jQuery.

Ventajas In­co­n­ve­nie­n­tes
Comunidad muy am­pliae­x­te­n­sa Hoy ya re­em­pla­za­do por Angular
Forma pParte del conjunto de sistemas MEAN Stack Notables di­fi­cu­l­ta­des iniciales

Angular

Angular, a menudo también llamado Angular 2, es el sucesor de AngularJS. Este framework de Ja­va­S­cri­pt está orientado pri­n­ci­pa­l­me­n­te al de­sa­rro­llo de apli­ca­cio­nes web de una sola página, aunque Google ha realizado cambios muy im­po­r­ta­n­tes en la segunda versión. La mayor di­fe­re­n­cia es, en este sentido, que ya no se utiliza Ja­va­S­cri­pt para programar, sino Ty­pe­S­cri­pt. Dado que el lenguaje de scripts de Microsoft se basa en Ja­va­S­cri­pt y es co­m­pa­ti­ble con él, no se dan re­s­tri­c­cio­nes directas en el de­sa­rro­llo de JS. Asimismo, Angular se adapta de tal manera que el de­sa­rro­llo de apli­ca­cio­nes en diversas pla­ta­fo­r­mas (es­cri­to­rio, móvil, tablet) no supone ningún problema.

Ventajas In­co­n­ve­nie­n­tes
Más po­si­bi­li­da­des gracias a Ty­pe­S­cri­pt Migración de AngularJS a Angular co­m­pli­ca­da
De­sa­rro­llo cross-plattform Di­fi­cu­l­ta­des mucho mayores que en el caso de su pre­de­ce­sor

Ember.js

Ember.js también es un framework del lado del cliente con el que se pueden crear apli­ca­cio­nes web de una sola página y apli­ca­cio­nes de es­cri­to­rio. Uno de sus rasgos di­s­ti­n­ti­vos con respecto a AngularJS es que los creadores de Ember.js han incluido a la comunidad de una manera más intensiva en el proceso de de­sa­rro­llo del framework y que los cambios im­po­r­ta­n­tes rea­li­za­dos en el framework se discuten en dicha comunidad antes de ser eje­cu­ta­dos. Ember.js se co­me­r­cia­li­za como un framework con el que se pueden de­sa­rro­llar apli­ca­cio­nes web am­bi­cio­sas, por lo que está orientado, en primer lugar, a de­sa­rro­lla­do­res que ya tienen cierta ex­pe­rie­n­cia en la creación de apli­ca­cio­nes web.

Ventajas In­co­n­ve­nie­n­tes
De­sa­rro­lla­do por una comunidad open source Muy complejo para pri­n­ci­pia­n­te­si­ne­x­pe­r­tos
También apto para apli­ca­cio­nes de es­cri­to­rio

Vue.js

Vue.js es, asimismo, un framework de Ja­va­S­cri­pt para el de­sa­rro­llo de apli­ca­cio­nes web de una sola página que recuerda a Angular y React. Los de­sa­rro­lla­do­res de este proyecto re­la­ti­va­me­n­te reciente han diseñado Vue.js de tal manera que iniciarse con él sea re­la­ti­va­me­n­te sencillo. Así es posible, por ejemplo, integrar pla­n­ti­llas en HTML. Asimismo, Vue.js es mucho más flexible que otros fra­me­wo­r­ks que no­r­ma­l­me­n­te pre­s­cri­ben de una forma un tanto rígida cómo utilizar el framework.

Ventajas In­co­n­ve­nie­n­tes
Rápido de apre­n­de­r­Se aprende rápido a usarlo Menos complejo
Soporta HTML y CSS Comunidad re­la­ti­va­me­n­te pequeña
Po­si­bi­li­da­des flexibles de de­sa­rro­llo flexible

Meteor

Meteor, también conocido como MeteorRJ, es un framework JS es­pe­cia­l­me­n­te apto para el de­sa­rro­llo cross-platform que permite a los de­sa­rro­lla­do­res crear apli­ca­cio­nes web y móviles con el mismo código. Otra ventaja es que los cambios en el código pueden enviarse di­re­c­ta­me­n­te a los clientes gracias a un Di­s­tri­bu­ted Data Protocol (DDP) propio. Para este framework gratuito, los pro­vee­do­res de Meteor también ofrecen Galaxy, una pla­ta­fo­r­ma de pago. Los de­sa­rro­lla­do­res pueden utilizar el servicio en la nube para publicar y alojar sus proyectos. El framework de Ja­va­S­cri­pt funciona con Node.js, por lo que para el de­sa­rro­llo con Meteor resulta aco­n­se­ja­ble tener co­no­ci­mie­n­tos sobre el entorno de de­sa­rro­llo. Con Meteor se pueden crear tanto backend como frontend de una pieza sin modificar el lenguaje, un concepto re­vo­lu­cio­na­rio que todavía no se ha impuesto.

Ventajas In­co­n­ve­nie­n­tes
De­sa­rro­llo cross-plattform Solo funciona con MongoDB y no con otras bases de datos Da­te­n­ba­n­k­t­y­pen
Pla­ta­fo­r­ma de hosting Galaxy Es necesario modificar el backend
Se puede combinar con Angular, React y otros fra­me­wo­r­ks/bi­blio­te­cas Problemas de re­n­di­mie­n­to y con los bu­s­ca­do­res

Fra­me­wo­r­ks Ja­va­S­cri­pt: resumen general

AngularJS Angular Ember.js Vue.js Meteor
Año de pu­bli­ca­ción 2009 2016 2011 2014 2012
Ma­n­te­ni­mie­n­to Goo­gle­v­Goo­gle Ember Core Team Evan You­v­Me­teor De­ve­lo­p­me­nt Group
Licencia MI­T­v­MI­T­v­MIT MIT MIT
Co­la­bo­ra­do­res en GitHub 1. 600 aprox. 570 aprox. 700 aprox. 700 aprox. 370 aprox.
Ar­qui­te­c­tu­ra MVVM/MVW MVC MVVM MVVM MVVM
Pa­r­ti­cu­la­ri­da­des Se puede utilizar con apli­ca­cio­nes móviles y de es­cri­to­rio Se puede utilizar con apli­ca­cio­nes móviles y de es­cri­to­rio Se puede utilizar con apli­ca­cio­nes de es­cri­to­rio In­te­gra­ción se­n­ci­llaEs fácil aprender a usarlo Combina backend y frontend

He­rra­mie­n­tas de utilidad en diversos sectores

Los fra­me­wo­r­ks y las librerías Ja­va­S­cri­pt pueden si­m­pli­fi­car el trabajo de manera co­n­si­de­ra­ble. Las he­rra­mie­n­tas an­te­rio­r­me­n­te de­ta­lla­das tan solo co­n­s­ti­tu­yen una pequeña parte de las que están di­s­po­ni­bles en el mercado. Tanto GitHub como www.ja­va­s­cri­p­ti­ng.com son idóneos para obtener librerías, plugins y fra­me­wo­r­ks Ja­va­S­cri­pt adi­cio­na­les. En dichas páginas web se pueden encontrar ex­te­n­sio­nes de Ja­va­S­cri­pt apro­pia­das para cada objetivo.

Ir al menú principal