JavaScript ha tenido un poco de mala reputación históricamente. ¿Qué tan mal? Bueno, para ser sincero, el tipo que dejó a los desarrolladores queriendo golpearlo a mediados de la próxima semana. Pero los tiempos han cambiado. JavaScript es una vez más el chico genial en el bloque.

Gran parte de este interés revivido se ha producido debido a las bibliotecas y los marcos de JavaScript. jQuery se lanzó por primera vez en enero de 2006, y fue seguido solo días después por Prototype. En los próximos cuatro o cinco años se vieron varias bibliotecas y marcos nuevos, cada uno luchando por su lugar en la caja de lápices del desarrollador..

A medida que cada nuevo software se hizo más y más rápido, superando a los demás en las pruebas SlickSpeed, JavaScript se convirtió constantemente en una utilidad en la que los profesionales podían confiar sin ninguna preocupación..

La razón por la que JavaScript se había ganado un nombre tan pobre a lo largo de los años desde su lanzamiento en 1995 no era del todo porque era un mal lenguaje. Los problemas reales están en el DOM, que en ese entonces no se llamaba DOM..

Los navegadores implementaron lo que hoy conocemos como DOM de diferentes maneras. A menudo, y todavía hay, errores al interactuar con el DOM. De todos los problemas de rendimiento en JavaScript, trabajar con (es decir, manipular o leer) el DOM se encuentra en la parte superior por ser el que hay que evitar o minimizar. La estandarización del DOM ha ayudado enormemente a este respecto, pero, como sabe cualquier desarrollador decente, Internet Explorer no es el único que debe seguir el paquete..

Solo ahora, en el año 2010, el IE9 no lanzado finalmente es compatible con addEventListener, un requisito bastante básico cuando se trabaja con el DOM. Aquí es donde los marcos de JavaScript realmente produjeron la bala de plata. Ellos taparon las brechas que quedaron abiertas por los navegadores. A nadie le gusta tratar con errores de navegador repetitivos y estúpidos, por lo que si un marco puede hacer que el burro funcione por usted, significa que tiene más tiempo en la parte interesante: la solución de problemas real.

Los chicos grandes

Hay cinco jugadores principales en el mundo de los marcos de JavaScript, o bibliotecas, dependiendo de la fraseología que elija (Wikipedia reconoce que son lo mismo, pero no todos los desarrolladores de la comunidad están de acuerdo con esto). De cualquier manera, los grandes son jQuery, Prototype, YUI, Dojo y MooTools..

Si no has oído hablar de ellos, probablemente te has estado escondiendo bajo una gran roca en forma de JavaScript, y confía en mí, te has estado perdiendo.

Estos líderes del mercado tienen algunas cosas importantes en común: Compatibilidad con varios navegadores, especialmente para navegadores más antiguos (lea como IE6). Un equipo central de desarrolladores que saben lo que hacen pero que también trabajan abiertamente. Licencias abiertas, que permiten a los desarrolladores poner los proyectos en uso tanto en entornos privados como comerciales. Comunidades activas detrás de los emprendimientos. Funcionalidad que se puede ampliar si es necesario..

Sin embargo, a pesar de este terreno común, todos cubren los fundamentos del desarrollo web a su manera. Por ejemplo, jQuery es el más fuerte en la manipulación de DOM, y también ofrece una manera de crear cualquier efecto personalizado y una gama de métodos Ajax simples y potentes..

Prototype, por su parte, es una biblioteca de lenguaje JavaScript que amplía el conjunto de características de JavaScript pero aún así incluye una forma de manipular el DOM.

YUI parece ofrecer todo menos el fregadero de la cocina. Incluye los conceptos básicos de la manipulación de DOM y los controladores de eventos, pero también se ve bendecido por tener una gran cantidad de utilidades disponibles, que van desde la internacionalización hasta la gestión de la historia y la animación. Lo que hace que YUI sea especial es su capacidad para cargar las utilidades durante el tiempo de ejecución, por lo que no tiene que descargar la colección completa de ellas como visitante..

Dojo es similar a las aplicaciones JavaScript de nivel empresarial, y su página de inicio muestra cómo IBM, Cisco y Sun se encuentran entre los que han elegido hacer un buen uso de él. De hecho, la documentación de Dojo demuestra cuán accesible está el kit de herramientas a través del soporte ARIA que proporciona.

Por supuesto, puede usar cada una de estas herramientas para cualquier cantidad de tareas: no hay nada que le impida usar Dojo para realizar una manipulación DOM simple, y Ajax o jQuery para la gran escala, complicado, wham-bam-thank-you-ma'am aplicaciones Puedes combinar herramientas como mejor te parezca; esa es tu prerrogativa.

En general, sin embargo, usted desea utilizar la mejor herramienta para el trabajo, por lo que es aconsejable considerar siempre sus opciones..

Ensanchar la red

Si está comenzando un proyecto desde cero y sabe que incluir una biblioteca o marco de JavaScript le ahorrará tiempo y, por lo tanto, dinero, tendrá la ventaja de poder buscar al candidato perfecto..

Junto con los 'cinco grandes' mencionados anteriormente, también hay una serie de otras herramientas que podría considerar. Tienen cualidades similares, pero pueden ser más nuevas o tienen licencias que no permiten que los proyectos viajen tan lejos.

Por ejemplo, Sencha, anteriormente conocido como Ext JS, es bueno para formar interfaces realmente ricas. Tiene un conjunto completo de módulos para crear aplicaciones, y los ejemplos van desde visores de feeds y escritorios web hasta la documentación completa de API de Sencha, construida con su propia biblioteca..

Hace algunos años, utilicé Ext JS durante una revisión de los marcos que se adaptarían a nuestro negocio. En ese entonces, la documentación aún era relativamente difícil de trabajar, por lo que no fue la mejor experiencia para mí, pero puede que se adapte a sus necesidades y se vea bonita.

El cierre de Google es el último marco que se lanzará con una fanfarria detrás de él. Es una decisión molesta de nombrar por Google; ya tenemos Prototype, lo que hace que sea casi imposible buscar información sobre prototipos de JavaScript, y ahora Closure hará que las cosas no sean divertidas para los principiantes que buscan cómo funcionan los cierres de JavaScript.

Pero lo que sí tiene a su favor son su sistema de plantillas y sus herramientas de desarrollo, en particular, el Closure Compiler, que actualmente es la mejor herramienta de compresión disponible para JavaScript..

Marcos de interfaz de usuario

Ya hemos analizado YUI, que proporciona una gran cantidad de widgets de UI, y mencioné JavaScript, lo que nos obligó a seguir una estricta ruta de modelo / vista / controlador, pero eso no es particularmente malo. El resultado final es un marco de aplicaciones web extremadamente pulido que incluye todos los widgets típicos de aplicaciones de escritorio que esperaría sentir, por falta de una palabra mejor, 'aplicación-y'.

Una validación simple de esto es que el texto generado por SproutCore no se puede seleccionar de forma predeterminada, algo que esperamos cuando navegamos por la web y hacemos clic en la página. ¿Es algo bueno o algo malo? Tú decides.

Una cosa que no me interesa demasiado es la dependencia de SproutCore en JavaScript. Definitivamente no es un marco para los amantes de la mejora progresiva. Originalmente, MobileMe se lanzó con una página completamente en blanco si JavaScript estaba desactivado. Si elige usar SproutCore, querrá cubrir a los usuarios que visitan con JavaScript deshabilitado, como mínimo.

No hay duda de que existen muchos más marcos de UI, así que mantén los ojos bien abiertos..

Especialistas

Las bibliotecas y los marcos que hemos visto hasta ahora ofrecen herramientas genéricas y resolverán la mayoría de los problemas de un desarrollador web. Pero a pesar de que cada uno tiene sus puntos fuertes, ninguno de ellos es especialmente especializado..

Las bibliotecas especializadas hacen un trabajo realmente bien. Hay muchos proyectos en la web, y la lista no se está acortando, así que les presentaré dos de los mejores marcos de dibujo que existen..

Processing.js por John Resig, también conocido como Mr jQuery, es un puerto JavaScript del lenguaje de procesamiento que se usa a menudo para visualizaciones y animaciones. Processing.js permite a un autor escribir utilizando el lenguaje de procesamiento real en una etiqueta de script, utilizando la aplicación o el procesamiento como el atributo de tipo. El marco también representará una animación de lienzo HTML5 que ejecuta constantemente el método de dibujo.

Hay innumerables demostraciones que muestran lo que es posible con Processing.js, e incluso hay un sitio dedicado a las demostraciones de HasCanvas, que muestra todo lo que se ha guardado y jugado..

Una pequeña palabra de advertencia: Processing.js se parece mucho a Java. Aunque hay muchos cruces entre los estilos sintácticos de Java y JavaScript, es posible que tenga que desempolvar los viejos libros de Java en los estantes para recordar cómo crear clases y esas tonterías sin JavaScript. De lo contrario, es un marco poderoso para aprovechar el poder de dibujo del elemento lienzo HTML5.

Raphaël es otro marco de dibujo pero va en una dirección diferente, utilizando SVG para lograr sus efectos de dibujo. De hecho, Raphaël puede ser una de las razones por las cuales SVG ha captado tantas atenciones de JavaScripters durante el último año..

Para evitar la falta de compatibilidad con SVG de Internet Explorer (aunque viene en IE9), Raphaël emplea VML para producir los mismos efectos en IE6 y en versiones posteriores, lo que le da soporte completo para todos los navegadores. Se ha escrito una gran cantidad de demostraciones de animación utilizando el lienzo HTML5 cuando deberían haber usado SVG, y Raphaël es un marco absolutamente excelente para lograrlo..

De hecho, utilizando Raphaël, el JavaScript para lograr un efecto simple pero impresionante es bastante similar a jQuery:

paper.circle (320, 240, 60) .animate (fill: "# 223fa3", stroke: "# 000", "stroke-width": 80, "stroke-opacity": 0.5, 2000);

Micro-bibliotecas

Dado que las bibliotecas como jQuery y Prototype se han convertido en una herramienta estándar para desarrolladores web, hemos visto un aumento en las micro bibliotecas. Para ser justos, así es como se entregaron las bibliotecas en los días de DHTML, pero hay algo muy diferente en los recién llegados..

La mayoría de las veces, una micro biblioteca será de código abierto, con licencia gratuita para que pueda usarla tanto en su trabajo personal como comercial y, por lo general, se alojará en GitHub para que cualquiera pueda encontrarla y mejorarla..

Las micro bibliotecas son como la antimateria de los grandes. Abordan una sola tarea y tratan de manejarla realmente bien. De hecho, la mayoría de las micro bibliotecas son tan minimalistas que a menudo no tienen un sitio web adjunto, solo sus páginas de GitHub.

He seleccionado algunas micro-bibliotecas para hablar aquí, pero se están creando muchas más. Incluso soy culpable de escribir algunos de los míos. Emile.js es "un marco de JavaScript de animación de CSS independiente y sin emoción, que lleva el nombre de Émile Cohl, animador inicial".

Escrito por Thomas Fuchs, el famoso guionista de Scriptaculous y Scripty 2, es una biblioteca Gzip de 50 líneas y 946 bytes (sí, en realidad es tan pequeña) que animará cualquier propiedad de CSS que desee. La única excepción es que no funcionará con la opacidad de IE, aunque hay un parche disponible en la rama de opacidad.

Lawnchair es una tienda JSON ligera para el cliente que funciona en muchas, muchas plataformas diferentes. Es un proyecto de Brian LeRoux, uno de los piratas informáticos detrás de PhoneGap, y proporciona una API simple para almacenar cantidades arbitrarias de datos en prácticamente cualquier tipo de plataforma, incluidas las aplicaciones Adobe AIR, Android, iPhone, Palm webOS y navegadores de escritorio de Chrome a ES DECIR. Muy simple y mucho más fácil que escribir código de cookie.

Moustache.js es una implementación de JavaScript de Moustache (bigote. Github.com) para "plantillas sin lógica". Escrito por Jan Lehnardt, uno de los organizadores de JSConf.eu, la segunda mejor conferencia de JavaScript en Europa (¡vea mi sitio para ver lo mejor!),

Mustache.js está disponible como un script o complemento de vainilla para YUI, jQuery y Dojo. Es una micro biblioteca que sirve solo para combinar datos de un objeto de JavaScript en un dummy HTML sin el dolor habitual que traen algunos sistemas de plantillas. No solo puede usar este sistema en el navegador, sino que también puede ejecutarlo muy fácilmente en entornos de JavaScript del lado del servidor como Node.