27/11/2015

AngularJS: HTML enriquecido para desarrollar aplicaciones web

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

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce