22 octubre

AngularJS y el futuro del desarrollo web

: 0 Comments

En plena “era HTML5″ y Web 2.0 pocos son los que discuten que Javascript y CSS3 son los reyes absolutos en lo que respecta al desarrollo “front-end”. Los sitios web son mucho más dinámicos (algunas web´s ya parecen incluso verdaderas aplicaciones de escritorio) de forma que la experiencia del usuario mejora notablemente.

HTML es un lenguaje para definir documentos estáticos y el camino para dinamizarlos pasa irremediablemente por Javascript. Sin embargo, este proceso de dinamización de documentos HTML puede ser una tarea bastante tediosa que, a menudo, se suele hacer bastante difícil de mantener si no se diseña correctamente.

Hoy les vamos a introducir un framework (un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular) que próximamente vamos a implementar en nuestros templates para mejorar y simplificar la experiencia a quienes la usan, que es la finalidad de nuestro desarrollo web.

AngularJS es un framework Javascript que corre en el lado del cliente (navegador) y que se centra en intentar dinamizar documentos HTML, lo que comúnmente se conoce como DHTML (Dynamic HTML). Normalmente esto se consigue haciendo uso de CSS y Javascript de forma que, en función de los eventos que se produzcan en nuestra página (acciones del usuario, respuestas del servidor vía AJAX o Websockets [hacen posible una comunicación interactiva entre el navegador del usuario y un servidor, como por ejemplo traer los datos de un usuario al iniciar sesion]), se actualizan, crean o eliminan determinados componentes de nuestro DOM (una imagen, un párrafo, o lo que sea…).

El objeto “document” de Javascript nos proporciona una serie de métodos como “getElementById” o “createElement” que nos permiten manipular, crear o eliminar elementos de nuestro documento HTML. No obstante, esto suele ser una tarea relativamente tediosa y muchas veces compleja, sobre todo para la gente que no está acostumbrada a trabajar con Javascript (es cierto que JQuery facilita mucho el trabajo).

AngularJS cambia un poco el enfoque de “dinamización” de documentos HTML estáticos mediante la vinculación de elementos de nuestro documento HTML con nuestro modelo de datos (data binding). De este modo, definimos un modelo de datos (Javascript) que se corresponderá con determinadas partes de nuestro HTML y, siempre que haya cambios en una parte, automáticamente se verán reflejados en la otra.

En resumen en este blog le introducimos una nueva forma de  cómo dinamizar nuestras páginas HTML en el lado del cliente con ayuda del framework Javascript: AngularJS. Este tipo de frameworks (algunos los llaman MVC, otros MVVM) nos permiten separar la lógica de presentación de la vista mediante la vinculación de datos del modelo con componentes HTML.

Bajo nuestro punto de vista, AngularJS proporciona dos grandes ventajas:

  • Separación de la lógica de presentación de la vista, de forma que el código Javascript es independiente al código HTML por lo que podríamos rehacer la vista sin necesidad de tener que tocar ni una sola línea de nuestra lógica de negocio. Además, nuestro código es extremadamente fácil testear ya que no dependemos de ningún contexto externo (es lógica pura).

  • Facilidad a la hora de manipular los elementos del DOM y sus propiedades. Esta es una tarea que, por norma general, es bastante tediosa y a medida que la lógica de presentación crece suele ser complicado escribir código que pueda mantenerse con facilidad. AngularJS simplifica mucho la labor en este sentido.

Es por esto, por lo cual decidimos implementar este framework en nuestros proximos themes, como también lo vamos a hacer con Bootstrap (css framework que explicamos hace unas semanas atrás), para mejorar nuestros templates no solo del punto de vista de la estructura, funcionalidad y rapidez si también en la usabilidad, accesibilidad y experiencia de usuario.

This post is also available in: Inglés

Back to Top