Despegar Tech Talk - AngularJS

Temario: Parte I
●

¿Porqué AngularJS?
○

¿Qué tenemos hoy?

●

Orígenes de AngularJS

●

Introducción a AngularJS
○

Modularidad, ID y Providers

○

Templating y Databindings

○

Scopes y Controllers

○

Eventos

○

Directives

○

Asincronismos

○

Location Handling

Temario: Parte II
●

Las buenas experiencias

●

Las malas experiencias

●

Soporte para SEO

●

Pre-Loading

●

El Futuro de Angular
○
○

●

1.3.x
ECMAScript 6

Debate

Nuestras Motivaciones:
● Encontrar una solución integral que permita solucionar lo que hoy
logramos con diversas herramientas. Ej: Handlebars, Amplify,
RequireJS y LoadJS.
● Reducir el código, volviéndolo más legible y seguible.
● Poder modelar nuestro código para orientarlo a servicios y
centralizar los componentes que manejan estado.
● Eliminamos la fuerte relación que hay entre la lógica que hay en JS
y el layout. Separando comportamiento visual de la página de la
lógica del flow y el estado del modelo.
● Sumado a esto último, facilidad a la hora de refactorizar el layout y
los estilos, sin tener mucho impacto en el JS.

¿Qué desafíos y situaciones íbamos a afrontar?
● Re-hacer toda una pagina ( Obvio no? )
● Afrontar nuevas metodologías de desarrollo y nuevos conceptos.
Ej: Módulos, Controllers, Servicios, Scopes, Bindings, etc …
● Pasariamos de usar JQuery para casi todo, a usarlos en muy
pocas situaciones. En cuestiones de solución tecnológica:
○ JQuery seria lo que Apache Commons o Guava es a Java
○ AngularJS sería lo que Play es a Java
● Una nueva forma de entender como manejar el SEO en la página.

Es un framework desarrollado por un Team dentro de Google, que
intenta cubrir las necesidades de las Web modernas dentro de una
solución integral.
Necesidades actuales:
○ Módulos e Inyección de dependencias
○ Data-Binding
○ Templating
○ Desacoplamiento de HTML
○ Single source of truth
○ Single Page ( En relación con lo anterior )
○ Testing

Features
● Arquitectura modular
● Inyección de dependencias
● Two-ways data binding
● Templating
● Asincronismo
● Scopes
● Soporte de Eventos
● Directives
● Location Handling

Tecnologias /
Necesidades

¿Qué soluciones
tenemos hoy?

¿Qué soluciones
tendríamos?

Templating

HandelbarsJS

AngularJS

Eventos

Amplify

AngularJS

Binding

-

AngularJS

Asincronismo

PromiseJS / JQuery

AngularJS

Location Handling

-

AngularJS

Modulos

Solución casera / RequireJS

AngularJS

Partial Views

*

AngularJS

Inyección de Dependencias

RequireJS

AngularJS

Tools varias

JQuery / Underscore.js

JQuery + AngularJS +
Underscore.js + etc ...

* Se podría hacer una solución propia usando JQuery y Handlebars

JQuery:

RequireJS:
I

II

AngularJS
Todo se encuentra dentro de un módulo, incluso para inicializar
nuestra aplicación debemos indicar el módulo inicial.

Inyección de Dependencias

Desarrollo multi-modulo

Servicios
Nuestra premisa:
Exponen comportamiento y se inyectan en otros servicios o
“controllers”
Angular nos provee varias formas de exponer estados y funcionalidad
para construir nuestros servicios:
● Value
● Constant
● Services
● Factory
● Provider

Tipo
de
Provider
Value

Código

Descripción

app.value('clientId', 'a12345654321x');

Nos permite inyectar un valor entre
varios servicios que es editable

app.constant('magicNumber', 42);

Idem a Value, pero su valor no es
editable

Service

app.service('userService', function() {});

Retorna la instancia de la función, es
util cuando queremos construir un
servicio singleton

Factory

app.factory('userServiceFactory', function() {});

Retorna el resultado generado al
ejecutar la función proveída

Provide

app.provide('userProvider', function() {});

La función/objeto debe poseer un
método $get que actúa como factory
tal como el ejemplo anterior.
La diferencia es que este servicio es
configurable al poder inyectarlo el el
comienzo del life-cicle de angular para
especficarlé parámetros.

Constant

Ej de Factory:

Ej de Provider:

Templating
● JQuery con HandlebarsJS

Templating
● AngularJS

Scopes y Controller:
Los controllers son un tipo de “Servicio”, que tiene la característica de
poseer un scope.
El scope, es un contexto, que puede contener variables y funciones. El
alcance de este, está definido el elemento del DOM al cual se
encuentra “atachado”.
La idea de los controllers es la de actuar una interfaz entre los
servicios y el estado, actiones y comportamientos asociado en el
HTML.

Ej de Controller

Scopes y Controller:
Los controllers soporta herencia de scope, esto es cuando un
controller está definido en un elemento del DOM que a la vez este se
encuentra contenido dentro de otro elemento del DOM que tiene otro
controller asociado
Controller A

DIV 1
DIV 2

Controller B

Todo lo definido dentro del Scope A se encuentra dentro del Scope de
B

Diferencias
●

La integración entre handlebars y JQuery no es transparente.

●

Con JQuery y Handlebars, no puedo lograr el que el HTML esté donde lo
voy a usar, ya que necesito tenerlo dentro de un Tag Script. Mientras que
con Angular no necesito romper la maqueta para asociarle valores.

●

En la metodología JQuery/Handlebars es inevitable que nuestro código JS
quede atado a las estructuras del HTML y CSS, debido al uso de
Selectores. Por lo que cualquier refactor de front por más de que solo sea
maqueta o estilos podría implicar cambios en el JS.

●

Con AngularJS nuestros servicios y modelos, nunca están atados
directamente a la estructura del HTML o el CSS. Por lo que los cambios
en estilos o maquetas no modificarían el JS.

Databinding
Handlebars

Ejemplo:
http://docs.angularjs.org/guide/forms

AngularJS

Databinding - Integración con estilos

o

http://docs.angularjs.org/api/ng.directive:ngClass

Databinding - Filtros
Los filtros son un herramienta que se aplica tanto a elementos como a
listas. Estos permiten transformar y/o filtrar estos valores para
renderizarlos sin necesidad de alterar nuestros objetos.

Más Ejemplos:
http://docs.angularjs.org/api/ng.filter:date

http://docs.angularjs.org/api/ng.filter:currency

http://docs.angularjs.org/api/ng.filter:filter

Servicio:
http://docs.angularjs.org/api/ng.$filter

Evento
Similar a como funciona AmplifyJS, salvo que Angular soporta
jerarquías de scopes. Lo que le permite enviar eventos hacia
arriba ( padres ) o hacia abajo ( hijos ).

Dentro de los eventos, también es posible escuchar cambios
sobre una variable que esté contenida en el scope.

¿Qué son?
Son una herramienta que nos permiten atachar comportamiento, a un
elemento del DOM de forma declarativa. La forma de atachar este
comportamiento, se puede hacer a través de un atributo, una clase o
un tag.
Es la forma más común de asociar un comportamiento con un
componente HTML. Es preferible tener HTML asociado a valores o
comportamiento, que tener JS atado al layout del HTML.

Directivas ng-click y ng-model

Más Ejemplos:
http://docs.angularjs.org/api/ng.directive:ngHide
http://docs.angularjs.org/api/ng.directive:ngClick
http://docs.angularjs.org/api/ng.directive:ngIf
http://docs.angularjs.org/api/ng.directive:ngRepeat

¿ Porqué usar Directives ?
● Desacoplan el HTML y los componentes del codigo JS
● Por ende tratamos de minimizar la cantidad de lógica de
interacción visual de nuestro código JS.
● El HTML se ve penalizado con una sintaxis adicional, pero válida
para HTML.
○ Evitamos tener que tener templates sueltos y tener que codear
la lógica de integración.
○ No es necesario rastrear entre cientos de líneas de JS, para
ver como se va a comportar un componentes ya que
declarativamente es visible en el layout.
○ El HTML es para quien lo usa y lo ve, o sea los
programadores. Los usuarios sólo ven el resultado del
renderizado de este por parte del browser.

Asincronismo
En Angular todo se resuelve de manera asincrónica, pero en vez
manejar la respuesta a estos procesamientos asincrónicos mediante
un esquema de callbacks, lo hace a través del Promise Pattern.

Angular nos provee un servicio llama $q, con el que podemos construir
las promises y los deferred.

Promise Pattern vs Callback
Recuerdan las callbacks?

doStuff1(function(data1) {
doStuff2(data1, function(data2) {
doStuff3(data2, function(data3) {
doStuff4(data3);
});
});
});

Usando promise:

doStuff1().then(doStuff2).then(doStuff3).then(doStuff4)

Todas nuestras funciones siempre retornan una Promise

¿Algo más complejo?

$q.all([doStaff1, doStaff2, doStaff3]).then(doStaff4)

Ventajas de las Promise:
● Encapsulan el resultado a futuro de la operación, de manera tal
que es fácil de volver a obtener una vez finalizado esta.
● Al estar encapsulado, es fácil de compartir entre servicios y
controllers
● Las promises nos proveen diferentes handlers a través de los
cuales podemos estar a la espera de la finalización de esta:
○ promise.success(function(result){ … })
○ promise.error(function(result){ … })
○ promise.then(function(result){ … })
● Fácil de encadenar con otras promise para generar
comportamiento más complejo

Servicios de Angular que usan Promise
● $http
● $timeout
● $interval
● $resource
● Si usamos angular-bootstrap incluso las Modal retornan una
promise

Caso especial de $resource. ¿Donde esta la promise?


Esto ocurre por una cuestión de comodidad, para cuando el modelo es
bindeado a los otros componentes.

¿ Qué es location handling ?
Es detectar cambios en la URL que no impactar a nivel back-end pero
si internamente dentro de la página.
> http://foo.com/#/main
Es útil cuando necesitamos guardar estado, modificando la URL pero
no deseamos que los cambios en la URL afecten al servidor sino que
necesitamos que disparen comportamiento a nivel Web.
Son comúnmente usados con Partial View.
Angular nos provee el servicio $location para manejar las URL.

¿ Qué es una Partial View ?
Debido a que las Web tienden a ser dinámicas y hacer uso de Ajax
para obtener datos y dibujar la pantalla. Es natural pensar que es poco
práctico traerse todo el HTML que van a necesitar, en la carga inicial
de la página. Esto es parte del modelo Single Page y es lo que le da
sentido al Single Source of Truth.
Una Partial View, es un fragmento de la página Web que va a ser
requerido en algún momento de la carga de la página. Cuando es
requerido, se obtiene dinámicamente y se le asocia dinámicamente un
comportamiento ( un controller asociado ).

Ej:
http://docs.angularjs.org/api/ngRoute.$route

Beneficios
● Carga mucho más rápida de la página.
● Posibilidad de dividir una pagina, en pequeñas partes o “subpáginas” y re-integrarlas fácilmente.
● Permite mantener de manera más fácil y transparente el concepto
de Single Source of Truth, al permitirnos evitar salir de la página.
● Con el uso de una caché de view podemos re-utilizar vistas
minimizando el acceso al servidor.
● Implementación transparente y fácil de utilizar a través de ng-view.

Las Buenas Experiencias
● La cantidad de código de la aplicación se redujo muchísimo.
● Mejor diseño es interacción de las diferentes partes.
● El código se volvió mucho más legible y simple.
● Tuvimos muchos cambios de UX, lo que solo nos implicó mover las
directivas de lugar. Ej: ng-model, ng-repeat y ng-click
● La curva de aprendizaje no fue muy grande, por lo que la adopción
no fue difícil.
● Como nuestra página de resultados y de landing son muy similares
re-utilizamos muchisimos modulos, servicios y controllers.
● Mayor control de los errores, a través del $excepcionHandler

Las “Malas” Experiencias
● Stackoverflow tiene más respuestas y documentación que la
misma página de AngularJS.
● A veces, hacer una directiva no es tan facil.
● Adaptarnos a las nuevas versiones, trajo muchos cambios con ello
( Aunque, no fueron tan serios ).
● Errores insolucionables o indeseados al capturar las excepciones
con el $excepcionHandler

Soporte para SEO
Problema:
● Metodología Single Page hace uso extensivo de AJAX.
● Angular tiene comportamiento asincrónico.
● No hay que penalizar al usuario con algo que solo los
crawlers necesitan.

Soporte para SEO
Solución:
Simplemente basta con detectar a los crawlers, por su
user-agent y pre-procesar la página usando PhantomJS.
Metodología:
● Standalone
● Prerender
● Necromancer

Pre-Loading
El gran potencial de Angular radica en su data-binding, por
lo que siempre es preferible que angular pueda poseer los
objetos y no tener que caer en usar el template-engine
para planchar los valores en el HTML.
Problema:
● Queremos evitar usar Ajax porque ya poseemos los
datos para rellenar la página al momento de recibir el
request.
● Queremos devolver el html junto con algunas las partial
views dentro de este.

Pre-Loading
Solución:
Angular posee un cache tanto para los templates que
utilizar para la partial views como para los datos
provenientes por Ajax. Nos es posible proveer nuestro
propio servicio de caché a Angular, que lea los datos precacheados.
● text/ng-template
● Poner el JSON en el html y desde JS poner eso en la
cache
Fuente: Minimizing initialization time in AngularJS

Pre-Loading
Cache de Partial Views


1.3.x - Pierde soporte para IE8
Why we're doing this:
●

●

Modern browsers have evolved. Although our stats tell us that only a
small percentage of users are on Internet Explorer 8, maintaining
compatibility requires code that slows the rest of AngularJS down.
In April 2014, Microsoft will be ending support for Windows XP, which
means the end of support for the operating system most of Internet
Explorer 8 users use.

Dropping support for Internet Explorer 8 will enable us to add more
exciting features to Angular faster, decrease Angular's support burden,
and cut our build time in half, while affecting only a very small proportion
of users.


Angular + ECMAScript 6
● ES6 Modules
○ Como es un estándar se puede reutilizar y compatir
entre diferentes frameworks.
○ Como es un estándar se puede integrar fácilmente
con otras herramientas como por ej: Bower o
Yeoman
○ Inyección de dependencias basado en annotations


Ahora:
angular.module('myStuff', []).value('x', 42);
A Futuro:
module "myStuff" {
export let x = 42;
}


Angular
● Mejor separación del core módulos
angular-resource.js
angular-route.js
angular-sanitize.js
+ angular-http.js
+ angular-filter.js
+…


● ES6 Modules + HTTP2 ( Akka SPDY )

index.html

my-partial.
html

l
tm
l.h
tia js
ar
le.
-p
my odu
-m
my p.js
ap ml
.ht

my-module.js

HTTP/2.0

ex
ind

app.js

Server

HTTP/1.1

index.html

Server

Browser

Browser

4 requests → 4 responses

1 requests → 4 responses


Angular
Integración con zone.js
A Zone is an execution context that persists across async tasks.
You can think of it as thread-local storage for JavaScript VMs.


Ahora:
● digest cycle
● dirty-checking
● $apply

A futuro:
● Soporte nativo de JavaScript para ser notificado cuando
un objeto cambia: Object.observe

Ahora:
socket.on('data', function (data) {
$scope.$apply(function () {
$scope.model = data;
});
});

A futuro:
socket.on('data', function (data) {
$scope.$apply(function () {
$scope.model = data;
});
});

Despegar Tech Talk - AngularJS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Despegar Tech Talk - AngularJS

Similar a Despegar Tech Talk - AngularJS (20)

Despegar Tech Talk - AngularJS