Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015

MADRID · NOV 27-28 · 2015

Carrera de fondo: la continuada

lucha de AngularJSJosé Manuel García García (Sema)

José Manuel García · MADRID · NOV 27-28 · 2015MADRID · NOV 27-28 · 2015

“He visto

aplicaciones en

JavaScript

que harIan vomitar a una cabra…”

José Manuel García · MADRID · NOV 27-28 · 2015

Sema

Sako


FrontEnd Development

De páginas sencillas y primerizas…



… a complejas aplicaciones de hoy día.



Necesidades comunes que se detectan:

Peticiones AJAX

Interacción con el DOM

Eventos y animaciones

Organización del código (código spaghetti)

Cross browsing

Tamaño, peso


Empiezan los cambios


FrontEnd Development2007 2009 2012

2013 2014 2015


Indeed

(Búsqueda realizada a 21/11/2015)


0 100 200 300 400 500 600 700

Portal F

Portal E

Portal D

Portal C

Portal B

Portal A

Nº ofertas trabajo (21/11/2015, España)

Knockout Ember Backbone AngularJS jQuery

Ofertas actuales de empleo


¿Qué es Backbone?

• Librería MVC (last versión: 1.2.3)

• Ligera: 69kb (dev) y 7.3kb (prod)

• Dependencia: underscore (y jQuery para vistas)

• Ayuda a organizar la estructura de nuestra app

• Sincroniza modelos y colecciones (API Rest)

• Todo lo debe controlar el programador (+ verboso)


¿Cuándo puedo utilizarlo?

• Estás empezando en el mundo FrontEnd & SPA

• Quieres tener un código estructurado (!spaghetti)

• Quieres tener un control de todo lo que ocurre

• Quieres entender que es un sistema dirigido por eventos

• Quieres tener libertad para el sistema de templating

• Curva de aprendizaje suave (rápido aprendizaje)

• Conceptos básicos sobre SPA, SRP, DRY, AMD, state-machine…


¿Qué puedo utilizar?• Modelos y colecciones: objetos contenedores de información

que representan el dominio de aplicación

• Vistas: que se asocian a la UI

• MVC MVP: se delega responsabilidad del controlador a las

vistas, y éste se convierte en un router

BackEnd

DOM

Router

Vista

Modelo

Colección

event

event

event

event

eventuser

action

render

BackEnd


Hablamos de AngularJS,¡cojones ya!


“Superheroic

JavaScript MVW

Framework”


• Framework MVVM (1.4.8-stable, 1.5-beta.2, 2.0-alpha.46)

• Peso: 1.02Mb (unpacked), 144kb (minified)

• Modularidad => Inyección de dependencias => Testeable

• Two-way data-binding

• Extender la semántica de HTML (etiquetas propias)

• Caché, interceptores, AJAX, patrón decorator, promesas…

• No more jQuery*!

¿Qué es AngularJS?


• No es una librería de acceso al DOM

• No es una librería de controles visuales o widgets

• No te abstrae de HTML, JS o CSS

• No es la mejor solución para juegos

• ¡No es tan difícil como parece!

Además, AngularJS…


Modularidad

• Módulo: conjunto de contenedores

• Contenedor: estructura de Angular para encapsular código

• Controlador: funciones que recogen los eventos de la UI y define

funcionalidad para una parte de la aplicación o página

• Servicio: función singleton para realizar acciones comunes

• Filtro: función que transforma un objeto (entrada) en otro (salida)

• Directiva: conjunto de “controlador + vista” encapsulado en una

etiqueta o atributo HTML

Para una buena appSPA necesitaremos

1. Una buena división en módulos.

2. Un controlador.3. Un “modelo”.4. Una vista.5. Un enrutador


Modularidad & Dep. Injection

Un módulo no está

obligado a utilizar todos

los contenedores

(moduleName)


Dependency Injection• Módulo root: ExampleApp1

• Una vista: index.html

• Dos controladores: ctrl1 y

ctrl2 (dos ámbitos de

ejecución) inyectados en

el módulo root

Módulo root (ExampleApp1)

ctrl1ctrl2


$scope: ámbito de ejecución

• Módulo root: nombre y deps

• Definimos ahora la lógica

que cada controlador

expondrá a la vista

• Controlador: nombre y…

• Dependencias

• Array de dependencias



• El objeto $scope es una especie

de contenedor común entre la

vista y el controlador

• A través de él se produce toda

la comunicación bidireccional

(two-way data-binding)

• Podemos definir una jerarquía

por herencia


• ng-model: pareja perfecta para $scope




• Data-binding en dos direcciones… ¡mola!


$scope: ¿cómo detecta cambios?

• Opción 1: mediante eventos (Backbone style)

(Esfuerzo manual, verboso, sobreruido si hay muchos eventos)

• Opción 2: dirty-checking (AngularJS style)

(Automágico, transparente, problemático si no se usa bien)


$scope y el ciclo de digestión



• El digest cycle es un bucle

mediante el que observar esos

cambios

• $scope.$apply()

• $scope.$digest()

• $scope.$watch()

• $scope.$destroy()


$scope y data-binding

($rootScope, $scope y herencia)


Directivas, pegamento para unir piezas


Directivas

• Mecanismo para extender el comportamiento de HTML

• Out-of-the-box: predefinidas por Angular:

• Personalizadas: nos dan la posibilidad de crearlas a

medida o bien para encapsular plugins/librerías externas

• De aplicación: ng-app, ng-controller, ng-model, ng-bind, ng-repeat,

ng-if|show, ng-style, ng-init, ng-class…

• De eventos HTML: ng-click, ng-keyup, ng-mouseup, ng-mouseover…


Directivas

Son el pegamento entre la vista y el controlador:

• En una dirección, la directiva toma los datos expuestos

por el controlador y los renderiza en la vista

• En otra dirección, la directiva captura los eventos que se

originan en el DOM e invoca al controlador

Las directivas son el nuevo conducto de comunicación…


Directivas (ng-repeat)

• Iterar sobre colecciones

o conjunto de elementos


Directivas (ng-if | show)

• Mostrar/ocultar la lista

• Mostrar/ocultar un label


Directivas (una propia)

• Módulo /

comportamiento

(lógica)

• Declaración en la

vista (parte visual)


Filtros


Filtros

• Un filtro formatea el resultado de una expresión de

entrada para presentarla al usuario

• Los filtros pueden aplicarse directamente en la vista o

inyectándolos en un módulo


Filtros predefinidosAngularJS provee de algunos predefinidos:

• currency: formatear una cifra como cantidad monetaria

• number: formatea un número como texto

• date: convierte la fecha a un formato especificado

• json: convierte un objeto en una cadena JSON

• lowercase/uppercase: formatea una cadena a mayúsc./min.

• limitTo: filtrar un subconjunto de elementos (array/string)

• orderBy: ordena un array en función de un predicado


Filtro + directivaVamos a pintar una tabla y vamos a filtrar con un criterio:


Servicios


Servicios

• Son la forma de organizar y reusar el código de tareas

comunes en una app (separación de responsabilidades)

• Simplifican la lógica de negocio de los controladores,

desacoplándolos de los servicios

• Son singletons, se instancia una sola vez y se comparte

• $log, $timeout, $location, $window, $http, $q…


Servicios

Servicios “especiales”:

• constant: module(“x”).constant(nombre, valor);

• value: module(“x”).value(nombre, valor);

Servicios puros:

• service: module(“x”).service(nombre, function);

• factory: module(“x”).factory(nombre, function);

• provider: module(“x”).provider(nombre, function);


Servicios (ejemplo)• Vista:

• Controlador:

• Factoría:


Calling BackEnd Services

Posiblemente, los dos servicios que más vas a utilizar:

$http $q


Calling BackEnd ServicesCombinando las promesas con peticiones AJAX:


AngularJS & jQuery: ¿divorcio?

• Nunca, nunca… modificar el DOM desde el controlador!!

• El controlador nunca modificará el DOM!!

• Directivas: el único lugar lícito para modificar el DOM

• AngularJS tiene su filosofía, hay que seguirla

• Pensar siempre en términos de arquitectura

• AngularJS tiene su “propio jQuery” => jqLite

• La función link de las directivas son las elegidas!


testing

¿Cómo será el camino?

¡¡Aún hay más“complementos”!!


¡Más cosas interesantes!

• Campos en formularios: pristine, dirty, touched…

• Angular nivel pro: $injector, $location, decoradores…

• Routing, securización, interceptores, login, I18N…

• Angular 2.0* (:-P)


¡Más cosas interesantes!

A programaaaarrr!!!!

MADRID · NOV 27-28 · 2015

https://github.com/semagarcia/angularjs-codemotion-2015

Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015

Software

Transcript of Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015