4r soluciones - Productora Digital + Software Factory

Blog

4r soluciones - Productora Digital + Software Factory Blog

Etiqueta: javascript

AngularJS: HTML enriquecido para desarrollar aplicaciones web

Una single-page application (SPA), o aplicación web de una sola página, es aquella que concentra toda su funcionalidad en una misma página web. Todo el código fuente necesario (HTML, CSS y JavaScript) es obtenido al cargar la página por primera y única vez, o bien los recursos necesarios son añadidos a la página de manera dinámica, generalmente en respuesta a las acciones del usuario. La página no es vuelta a cargar en ningún punto del proceso, ni le transfiere el control a una página externa. Así, el usuario puede trabajar de manera fluida sin salir de la página actual, obteniendo una experiencia más cercana a la de un programa de escritorio que a la de una página web tradicional.

Tradicionalmente, para desarrollar este tipo de aplicaciones se utilizaba Ajax. Pero en los últimos años aparecieron otras opciones, como AngularJS, un framework de JavaScript que extiende HTML con un formato más expresivo y legible, especialmente indicado para crear single-page applications enriquecidas, bien estructuradas y altamente interactivas.

AngularJS ofrece etiquetas y atributos HTML no oficiales, que le añaden funcionalidad al lenguaje. Otra de sus características es que implementa la arquitectura modelo-vista-controlador (MVC), donde las estructuras de datos (modelo), la interfaz gráfica (vista) y la conexión entre ambos (controlador) se encuentran en tres capas diferentes. En ese sentido, es similar a Backbone.js, otro framework que ya comentamos. En AngularJS, estas capas están implementadas de la siguiente manera:

  • Modelo: datos guardados en objetos JavaScript.
  • Vista: elementos HTML (DOM).
  • Controlador: clases de JavaScript.

Las tres capas están debidamente separadas, pero sincronizadas entre sí. De esta manera, si se producen cambios en el modelo, la vista se actualiza automáticamente.

A medida que ingresamos nuestro nombre (modelo de datos), este se muestra en el DOM (vista) automáticamente, sin necesidad de recargar la página. Link.

Gracias a esta característica, toda la parte visual queda concentrada en nuestro código HTML, lo cual resulta más natural que manipular el DOM directamente desde JavaScript (el enfoque tradicional). Por lo tanto, el código final es más compacto, limpio, fácil de entender y menos propenso a errores.

Sin embargo, comprender el framework en profundidad no es precisamente fácil, lo cual puede traer problemas para la revisión y el mantenimiento del código. En general, se considera que es la mejor opción para desarrollar aplicaciones de una sola página, pero no para otro tipo de proyectos.

Enlaces externos

Underscore.js: haciendo JavaScript más simple

Con el correr de los años, JavaScript pasó de ser un lenguaje para insertar sencillos scripts en sitios web a convertirse en un elemento indispensable de muchas interfaces de usuario avanzadas, especialmente como parte de Ajax. También se transformó en un lenguaje multipropósito, utilizado en aplicaciones mobile, videojuegos, extensiones de browsers y hasta microcontroladores. En esta evolución tuvo mucho que ver la aparición de frameworks, plugins y bibliotecas que facilitan la programación en este lenguaje, cuya sintaxis puede ser algo complicada.

Una de estas herramientas es Underscore.js, una biblioteca de JavaScript que ofrece más de 100 funciones útiles para manipular datos. Estas funciones están clasificadas en cinco grupos. Conozcamos algunos ejemplos de cada uno:

  • Colecciones. Funciones para recorrer, buscar, filtrar, ordenar, agrupar, contar o hallar el máximo y el mínimo en un conjunto de elementos.
  • Arrays. Funciones para manipular arrays: obtener el primer o el último elemento, buscar elementos, hallar uniones o intersecciones entre arreglos, etc.
  • Funciones. Funciones para, valga la redundancia, manipular el modo, el evento o el momento en el cual se ejecutará una función.
  • Objetos. Funciones para acceder a las propiedades, los métodos y el tipo de dato de un objeto, así como para clonarlo o extenderlo.
  • Utilidad. Funciones útiles de uso variado. Nos permiten invocar una función una determinada cantidad de veces, obtener un número aleatorio, depurar cadenas de texto, obtener la hora actual, etc.

Muchas de estas tareas pueden lograrse sin ayuda de ninguna función. Pero Underscore.js las implementa a través de una sintaxis mucho más reducida y fácil de entender. Supongamos que queremos multiplicar por 10 todos los elementos de un array de números. Con JavaScript, normalmente necesitamos recorrer el arreglo con un ciclo for y aplicar la multiplicación a cada elemento. Con Underscores.js, nos basta con invocar la función _.map (las funciones de la biblioteca son identificadas con un guion bajo al principio).

Pero .map también existe oficialmente en JavaScript. Entonces, ¿por qué usar una implementación diferente? Simplemente, porque es una de las funciones pertenecientes a ECMAScript 5, un estándar no soportado por browsers antiguos. Underscores.js detecta si el navegador soporta la función; de ser así, usará la función .map convencional, pero si no, ejecutará su propia implementación.

Underscore.js es ideal cuando necesitamos contar con funciones de bajo nivel para manipulación de datos. Claramente, su objetivo es muy diferente al de jQuery, otra biblioteca de JavaScript popular, pero orientada a la manipulación de los elementos del DOM.

Enlaces externos

Desarrollo web: ¿debemos pensar en los usuarios que deshabilitan JavaScript?

El lenguaje JavaScript es responsable de muchas de las características que más nos sorprenden de la Web actual, como el efecto de paralaje o las animaciones sobre imágenes y bloques de texto (por ejemplo, las que vemos en los slideshows que dominan la portada de muchos sitios web). JavaScript es un ingrediente irreemplazable de cada vez más sitios y aplicaciones, una explosión en la que tiene mucho que ver el crecimiento de la biblioteca jQuery.

Sin embargo, la ejecución de scripts puede ser deshabilitada fácilmente desde la mayoría de los navegadores. Los usuarios que tomen esa decisión no podrán ver ninguna de las características que desarrollemos en JavaScript, que probablemente sean indispensables para el pleno funcionamiento de nuestro sitio web. Quienes deshabilitan JavaScript suelen hacerlo para navegar más rápido (los scripts ralentizan la carga de la página), para simplificar la interfaz o como medida de seguridad (a través de JavaScript se puede recolectar información de los usuarios, aunque la mayoría de las aplicaciones del lenguaje son inofensivas).

Lo ideal es respaldar los elementos generados con JavaScript con otros, generados solo con HTML y CSS, para que los usuarios que hayan deshabilitado los scripts puedan acceder a un sitio web tan completo y funcional como el que ven los demás. Pero esta medida, que forma parte del concepto de «mejora progresiva», rara vez es adoptada. De hecho, dado que los componentes JavaScript son cada vez más complejos, imitarlos con HTML y CSS puede ser imposible. A lo sumo podemos generar una versión simplificada del sitio web para que, al menos, todo el texto y las imágenes sean visibles, los formularios puedan utilizarse y los enlaces internos funcionen incluso sin JavaScript. Sin embargo, esto puede incrementar enormemente el tiempo de desarrollo. Si algunas características importantes son directamente invisibles sin JavaScript, podemos sugerirle al usuario que lo habilite para disfrutar de una mejor experiencia.

Si bien siempre es una buena práctica desarrollar la menor cantidad de características posible con JavaScript, se estima que la porción de usuarios de Internet que lo deshabilita no llega al 2% del total.

Efectos visuales: ¿Flash, HTML5 o JavaScript?

La tecnología Adobe Flash siempre tuvo muchos detractores. Sin embargo, durante muchos años no hubo ninguna opción mejor para incluir juegos, animaciones y efectos interactivos en sitios web. Desde 2008, HTML5 promete terminar con el reinado de Flash reemplazándolo en muchas de sus aplicaciones habituales, pero, evidentemente, la transición es lenta. Por otra parte, JavaScript no suele formar parte de esta contienda, pero en los últimos años empezó a imponerse como un lenguaje de peso para el desarrollo de gráficos animados. Entonces, ¿cuál es la mejor opción para mostrar contenido visualmente impactante en nuestro sitio web? Adobe Flash Es soportado por casi todos los navegadores, aunque requiere de un plugin que presenta problemas de seguridad y estabilidad. En 2011, Adobe abandonó el desarrollo de esta plataforma para dispositivos móviles (nunca soportada en iOS) y empezó a centrarse en HTML5. Sin embargo, aun hoy la enorme mayoría de los juegos online (incluyendo los más populares de Facebook) están desarrollados en Flash. Su soporte para imágenes 3D sigue siendo el mejor. Y se trata de una tecnología madura, nacida en 1996. HTML5 Si bien no requiere de ningún plugin, no es plenamente soportado por todos los navegadores (especialmente, por versiones de Internet Explorer previas a la 9). Como cada navegador lo interpreta de manera diferente, algunos juegos y animaciones ni siquiera pueden verse en ciertos browsers. A diferencia de Flash, no es una tecnología madura sino que todavía se encuentra en estado de borrador. Sin embargo, HTML5 es compatible con dispositivos móviles y genera código visible por los buscadores, algo imposible para Flash. Si bien Flash todavía mantiene su prominencia, la mayoría de los desarrolladores tiende a reemplazarlo por HTML5. JavaScript Existen muchos frameworks para desarrollar animaciones y videojuegos a través de JavaScript. Es soportado por todos los navegadores, pero algunos usuarios pueden tenerlo desactivado por motivos de seguridad. Además, invocar scripts ralentiza notablemente la carga del sitio. Por último, si lo que se desea no es más que implementar animaciones sencillas o efectos sobre elementos de imagen o texto, es bueno recordar que CSS3 ofrece amplios horizontes en ese campo.

Buscador