AngularJS

El enfoque adecuado

#LaunchpadBCN

Diciembre 2014

whoami

Gonzalo Ruiz de Villa Suárez

CoFounder @adesis

Google Developer Expert in Angular

+GonzaloRuizdeVilla

@gruizdevilla

Elementos de enfoque

• Testing unitario

• Testing e2e

• Inyección de dependencias

• Automatización

• Estructura del proyecto

• Módulos y bower

• Componentes de AngularJS
  • Plantillas
  • Controllers
  • Servicios
  • Filtros
  • Directivas
  • Interceptors/decorators

Testing unitario

• AngularJS está diseñado pensando desde el primer instante en los tests unitarios.
• La inyección de dependencias facilita el mocking.
• (Con)céntrate solo en el elemento que tengas entre manos.
• Bad smell detector:

Encontrando el enfoque adecuado:

La importancia del primer test.

  beforeEach(inject(function($filter) {
    items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
    str = "tuvwxyz";
    number = 100.045;
    limitTo = $filter('limitTo');
  }));


  it('should return the first X items when X is positive', function() {
    expect(limitTo(items, 3)).toEqual(['a', 'b', 'c']);
    expect(limitTo(items, '3')).toEqual(['a', 'b', 'c']);
    expect(limitTo(str, 3)).toEqual("tuv");
    expect(limitTo(str, '3')).toEqual("tuv");
    expect(limitTo(number, 3)).toEqual("100");
    expect(limitTo(number, '3')).toEqual("100");
  });

Tests e2e

  it('should filter results', function() {

    element(by.model('user')).sendKeys('jacksparrow');

    element(by.css(':button')).click();

    expect(element.all(by.repeater('task in tasks')).count()).toEqual(10);

    element(by.model('filterText')).sendKeys('groceries');

    expect(element.all(by.repeater('task in tasks')).count()).toEqual(1);
  });

Inyección de dependencias

 “Pedid y se os dará.”

Inyección de dependencias 

  module.controller("MyController", function ($scope, myService){
    myService
        .doSomething()
        .then(function (value){
            $scope.value = value;
        });
  });

  var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
  var FN_ARG_SPLIT = /,/;

  fn.toString()
    .match(FN_ARGS)
    .split(FN_ARG_SPLIT)

¿Queremos minificar?

  someModule.controller('MyController', ['$scope', 'greeter', function($scope, myService) {
    // ...
  }]);

Notación de array

Anotación mediante propiedad $inject

  var MyController = function($scope, myService) {
      // ...
  }
  MyController.$inject = ['$scope', 'myService'];
  someModule.controller('MyController', MyController);

And be DRY!

with ng-annotate

Automatización

Porque lo repetitivo distrae y nos hace perder el foco.

Para gustos colores

Broccoli

gulp.js

Grunt

¿Qué puedes automatizar?

• JSHint
• Minificación de HTML, CSS y JS
• Concatenación de ficheros
• ng-annotate
• livereload
• ¡mock server!
• tests, tests, tests
• Jade
• i18n
• ES6 transpile, coffescript, ...
• bump de versiones
• ....

¿Qué MÁS puedes automatizar?

Aquello que repitas habitualmente.

* "Puff, estoy hasta arriba, ya lo haré cuando termine esta entrega"

No te obsesiones con automatizar todo al principio y después tampoco seas "vago"* para automatizar lo que te haga perder tiempo.

Reduce el ruido

y simplifica la automatización, refactorización, el rediseño, etc.

• ¿Donde están los componentes?
  • Carpetas
  • Nombres de ficheros
• ¿Cómo se llaman los componentes?
• ¿Cómo se llaman los tests?
• ¿Cómo se llaman los módulos?
• ¿Cómo son los estados?
• ¿Cómo son mis APIs?
• ¿Cómo se llaman mis entidades?
• ¿Cómo formateo el código?

Mantén las cosas relacionadas juntas y ordenadas

• Elementos específicos
  • ​Vistas, controladores y servicios
• Elementos comunes
  • Servicios
  • Interceptors
  • Filtros
  • Directivas

Inspírate en el equipo de Angular

https://github.com/angular/angular-seed

Cada vez van a ser más "opinionated" sobre la estructura del código.

No tengas miedo de cambiar la convención.

Pero hazlo de golpe

Una convención bien seguida se cambia muy rápido.

La mezcla de convenciones no es una convención.

Si tu proyecto crece, trocealo

Gestiona las partes independientes de forma independiente.

Utiliza repositorios independientes para cada parte.

bower y .bowerrc

• Tu proyecto web tendrá dependencia de distintos componentes.
• Si esos componentes están en repos privados, apóyate en el shorthand-resolver
• Utiliza 'semver' para gestionar y etiquetar las versiones.
• En el proyecto principal, "bower install usuario/componente --save"

 
     angular.module('myApp', ['miModule1', 'miModule2', 'miModule3'])

Otra vez, minimiza la configuración

main-bower-files

https://github.com/ck86/main-bower-files

Todo lo anterior multiplica la potencia de

Dirección de las dependencias

HTML y Controladores

Separación de responsabilidades.

.signup(ng-controller="SignupCtrl")
    form(name="signupForm" ng-show="state = 'START'")
        h1 Sign up
        label User
            input(ng-model="signup.user", required)
        label Name
            input(ng-model="signup.name", required)
        button(
            ng-disabled="signup_form.$invalid", 
            ng-click="createAccount()") Create account
    div(ng-show="state == 'LOADING'") Creating account
    div(ng-show="estado == 'CREATED'") Account {{signup.user}} created! 

    module.controller('SignupCtrl', function ($scope, signupService){
        $scope.state = "START";
        $scope.createAccount = function(){
            $scope.state = "LOADING";
            signupService.signup($scope.signup).then(function(){
                $scope.state = "CREATED";
            });
        }
    });

Servicios

Encapsulando la lógica de negocio.

    module.service('matrixSrv', function () {
        this.transpose = function (matrix) { 
            return matrix[0].map(function(col, i) { 
                return matrix.map(function(row) { 
                    return row[i] 
                });
            });
        };
    });
    
    module.service('signupService', function ($http){
        this.singup = function (data) { 
            return $http.post('/api/signup', data);
        };
    });

Directivas

• El sitio donde encapsular la manipulación del DOM
• Mediante las directivas, AngularJS se convierte en un framework de frameworks:  d3.js, famo.us, Raphaël, ...

    pie-chart(data="populations")

NgModelController

Al adaptarnos a la filosofía AngularJS, seguimos manteniendo el foco sobre cada elemento.

    ngModule.directive('usernameAvailable', function(signupService) {
      return {
        require : 'ngModel',
        link : function($scope, element, attrs, ngModel) {
          ngModel.$asyncValidators.usernameAvailable = signupService.usernameAvailable;
          };
        }
      }
    });

    input(ng-model="signup.user", required, username-available)

Las directivas permiten definir el comportamiento de un nuevo elemento. Aumentamos la semántica.

Las directivas permiten decorar elementos y hacer composición de funcionalidad de forma transversal.

Filtros

    ul
        li(ng-repeat="lineas in pedido.lineas | reverse") 
            .description {{linea.description}}
            .ammount {{ pedido.ammount | ammount }}
            
    p Total ammount: {{ pedido.ammount | ammount }}

Centraliza la definición de transformaciones de salida habituales. Los filtros no modifican el modelo.

    module.filter('ammount', function() {
        return function(ammount) {
            return ammount.currencyCode + ' ' + ammount.quantity
        })
    })

Crosscutting Concerns

Y el poder de la inyección de dependencias

• ¿Quieres hacer log de las llamadas un servicio? Decóralo, interceptando las llamadas.
• ¿Quieres cachear un servicio? Decóralo, interceptando las llamadas.
• ¿Quieres enviar credenciales en peticiones Ajax? Interceptadores de http.
• ¿Quieres reintentar peticiones Ajax? Interceptadores de http.
• ¿Quieres reintentar peticiones Ajax pero después de refrescar la sesión tras un 401 unauthorized ? Interceptadores de http.

¡Gracias!

http://goo.gl/whEZdq

¿Preguntas?