Despegar Tech Talk - AngularJS

Tech Talks

Facundo Viale

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

¿Porqué AngularJS?

¿Porqué AngularJS?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.

Orígenes de AngularJS

Orígenes de AngularJS

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

http://en.wikipedia.org/wiki/Single_Source_of_Truth

http://en.wikipedia.org/wiki/Single_Source_of_Truth

Orígenes de AngularJSFeatures● 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

Introducción a AngularJS

Modularidad


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


Introducción a AngularJSInyección de Dependencias


Desarrollo multi-modulo

Providers

Introducción a AngularJSServiciosNuestra 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

ProviderCódigo Descripción

Value app.value('clientId', 'a12345654321x'); Nos permite inyectar un valor entre varios servicios que es editable

Constant 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.


Ej de Factory:


Ej de Provider:

Templatingy

Databinding


Templating

● JQuery con HandlebarsJS


Templating

● JQuery con HandlebarsJS


Templating

● AngularJS

Scopes y

Controllers


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


Introducción a AngularJSScopes 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

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

DIV 2DIV 1

Controller A

Controller 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 AngularJS

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

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

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


Databinding - Integración con estilos

o

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




Databinding - FiltrosLos 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.


Databinding - Filtros


Databinding - Filtros

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









Introducción a AngularJSDatabinding - Filtros

Eventos


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.

Directives


¿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

Introducción a AngularJSAsincronismo

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.

http://en.wikipedia.org/wiki/Futures_and_promises


Promise Pattern vs Callback

Recuerdan las callbacks?

doStuff1(function(data1) {doStuff2(data1, function(data2) {

doStuff3(data2, function(data3) {doStuff4(data3);

});});

});



Usando promise:

Todas nuestras funciones siempre retornan una Promise

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



¿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?

http://docs.angularjs.org/api/ngResource.$resource


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

Location Handling


¿ 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.

http://docs.angularjs.org/guide/dev_guide.services.$location


¿ 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

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

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 “sub-pá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

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

http://docs.angularjs.org/api/ng.$exceptionHandler

Las “Malas” Experiencias

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

http://docs.angularjs.org/api/ng.$exceptionHandler

Soporte para SEO

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

http://phantomjs.org/

http://prerender.io/

http://prerender.io/

Pre-Loading

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 pre-cacheados.

● text/ng-template

● Poner el JSON en el html y desde JS poner eso en la cache

Fuente: Minimizing initialization time in AngularJS

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

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

https://medium.com/p/f8ae57e2cec3

Pre-Loading

Cache de Partial Views

Pre-Loading

Cache de JSON

Pre-Loading

Cache de JSON

El Futuro de Angular


1.3.x - Pierde soporte para IE8Why 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.jsangular-route.jsangular-sanitize.js+ angular-http.js+ angular-filter.js+ …



● ES6 Modules + HTTP2 ( Akka SPDY )

ServerHTTP/1.1

Browser

inde

x.ht

ml

app.

js

my-

mod

ule.

js

my-

part

ial.

htm

l

ServerHTTP/2.0

Browserin

dex.

htm

l index.html

app.jsm

y-module.js

my-partial.htm

l

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.

https://github.com/angular/zone.js



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;

});

});

Debate

Documents

Despegar Tech Talk - AngularJS