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

MADRID · NOV 27-28 · 2015
Carrera de fondo: la continuada
lucha de AngularJS
José 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

2007 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 app
SPA 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)
ctrl1 ctrl2

$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

$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 predefinidos
AngularJS 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 + directiva
Vamos 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 Services
Combinando 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

¡¡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!

MADRID · NOV 27-28 · 2015
https://github.com/semagarcia
/angularjs-codemotion-2015

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

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

Semelhante a Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015 (20)

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