¿Qué es AngularJS? Primeros pasos para aprenderlo

AngularJS  es un framework MVC de JavaScript para el Desarrollo Web Front End que permite crear aplicaciones SPA Single-Page Applications. Entra dentro de la familia de frameworks como BackboneJS o EmberJS.

Con tanta oferta de frameworks se nos hace difícil elegir cuál usar en nuestras aplicaciones, qué ventajas tienen unos frente a otros, etc. En esta entrada voy a comentar que hace a AngularJS diferente al resto y unos cuantos enlaces a recursos online donde aprender a usar este framework y coger soltura. Allá vamos.

☝️ACTUALIZACIÓN: Nueva entrada en el blog con un sencillo tutorial de cómo crear una aplicación web con Angular JS y una API REST en Node.

Anteriormente en la parte Front-End de las aplicaciones web sólo teníamos a jQuery (además de otras librerías parecidas como Mootools, Prototype,…) para ayudarnos con el código JavaScript del cliente. Podíamos manipular el DOM de una forma más sencilla, añadir efectos, llamadas AJAX, etc… pero no teníamos un patrón a seguir. Todo el código JS iba en funciones que íbamos creando según necesitáramos, lo que provocaba que con el tiempo el código fuera difícilmente manejable y se convirtiese en el temido Spaguetti Code.

Por suerte surgieron frameworks que implementaban el patrón MVC (Modelo, Vista, Controlador) y nos ayudaban a separar conceptos. El más conocido es BackboneJS, que surgió en 2010 creada por Jeremy Ashkenas (Creador también de CoffeeScript ) y depende de otras 2 librerías: jQuery y Underscore.js Es usado por múltiples Start-ups como Pinterest , Foursquare , AirBnB , Trello , etc…

BackboneJS te permite crear tu app rápidamente aunque en ocasiones es complicado de utilizar. La mayoría de los desarrolladores eligen BackboneJS porque parece la opción más segura, lleva más tiempo entre nosotros, hay mucha documentación sobre él y está mantenido por una gran comunidad.

Sin embargo AngularJS está pisando fuerte. Aunque su primera versión es de 2009, se ha hecho muy popular a finales de 2012 y ahora en 2013 está en pleno auge. Tanto que ya se habla de una nueva technology stack como antes era LAMP (Linux + Apache + MySQL + PHP) ahora la tendencia es MEAN (MongoDB/Mongoose + ExpressJS + AngularJS + NodeJS), lo que también se traduce a aplicaciones JavaScript End-to-End. AngularJS está mantenido por Google y bastante comunidad. También como punto a su favor está lo sencillo que crear Tests unitarios y End-to-End con Jasmine y Karma , algo que suele ser un poco costoso al principio.

Este es un ejemplo de como se implementa el patrón MVC en AngularJS:

//Model: Objetos JavaScript
$scope.files = ["foo", "bar", "baz"];

<!-- View: HTML -->
<div ng-repeat="f in files"></div>

//Controller: Código Javascript
function addFile(fileName) {
  $scope.files.push(fileName);
}

lo que da como resultado:

foo
bar
baz

AngularJS permite extender el vocabulario HTML con directivas y atributos, manteniendo la semántica y sin necesidad de emplear librerías externas como jQuery o Underscore.js para que funcione. Para aprender a utilizar este framework en poco tiempo os recomiendo sigáis estos pasos que Joel Hooks cita en su blog :

1. Tutorial oficial de AngularJS

Google ha puesto a disposición de nosotros en la página oficial del proyecto un tutorial paso a paso a través de una sencilla aplicación web (Un catálogo de Smartphones) que nos sirve para entender lo básico y el vocabulario. La única contra de este material es que utiliza como plantilla el proyecto angular-seed que aunque es bueno para aprender, no es recomendable para un proyecto real que necesite escalar. Aun así, empezar por aquí es un buen paso.

2. Video-Tutoriales de Egghead.io.

Una vez completado el tutorial el siguiente paso es echar un vistazo a los videos de John Lindquist, un experto desarrollador en AngularJS . Son vídeos cortos, de no más de 8 minutos cada uno, en los que entra en detalle en los conceptos más difíciles de AngularJS. Aunque no entiendas todo de primeras no importa, ten estos vídeos presente para más adelante.

3. Un vistazo a una Aplicación AngularJS real

Ahora es momento de ver las “tripas” de una aplicación AngularJS que funciona en el mundo real. El mejor ejemplo es el código que desarrollaron Peter Bacon Darwin y Pawel Kozlowski para el libro Mastering Web Application with AngularJS . El código fuente está disponible en GitHub y podemos ver la estructura de directorios, el uso de módulos, testing, comunicación con un API RESTful en el Back-End, seguridad, etc. Es una aplicación 100% MEAN !:)

4. Crea tu primera aplicación con Ng-Boilerplate.

Llegados a este punto ya deberíamos tener bastantes conocimientos para construir una aplicación con AngularJS. Para ello podemos utilizar el proyecto ng-boilerplate  el cual es una buena base para empezar a desarrollar una aplicación válida para un entorno de producción al contrario que angular-seed el cual solo es válido para aprender la tecnología.

Si consigues llegar hasta aquí, tendrás un buen conocimiento del desarrollo de aplicaciones web usando AngularJS, yo me encuentro ahora mismo entre la 2ª y 3ª etapa y voy viendo los avances, por lo tanto recomiendo seguir estos pasos si estás interesado en este nuevo framework, el cuál creo que en poco tiempo pasará a ser bastante más usado que Backbone.