2. 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
3. Temario: Parte II
●
Las buenas experiencias
●
Las malas experiencias
●
Soporte para SEO
●
Pre-Loading
●
El Futuro de Angular
○
○
●
1.3.x
ECMAScript 6
Debate
5. ¿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.
6. ¿Porqué AngularJS?
¿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.
8. 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
9. Orígenes de AngularJS
Features
● Arquitectura modular
● Inyección de dependencias
● Two-ways data binding
● Templating
● Asincronismo
● Scopes
● Soporte de Eventos
● Directives
● Location Handling
10. ¿Porqué AngularJS?
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
21. Introducción a AngularJS
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
22. Introducción a AngularJS
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
30. Introducción a 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.
33. Introducción a AngularJS
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
34. Introducción a AngularJS
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.
37. Introducción a AngularJS
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.
42. Introducción a AngularJS
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 ).
43. Introducción a AngularJS
Dentro de los eventos, también es posible escuchar cambios
sobre una variable que esté contenida en el scope.
45. Introducción a AngularJS
¿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.
47. Introducción a AngularJS
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
48. Introducción a AngularJS
¿ 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.
50. Introducción a AngularJS
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.
51. Introducción a AngularJS
Promise Pattern vs Callback
Recuerdan las callbacks?
doStuff1(function(data1) {
doStuff2(data1, function(data2) {
doStuff3(data2, function(data3) {
doStuff4(data3);
});
});
});
52. Introducción a AngularJS
Promise Pattern vs Callback
Usando promise:
doStuff1().then(doStuff2).then(doStuff3).then(doStuff4)
Todas nuestras funciones siempre retornan una Promise
54. Introducción a AngularJS
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
55. Introducción a AngularJS
Servicios de Angular que usan Promise
● $http
● $timeout
● $interval
● $resource
● Si usamos angular-bootstrap incluso las Modal retornan una
promise
59. Introducción a AngularJS
¿ 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.
60. Introducción a AngularJS
¿ 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
61. Introducción a AngularJS
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.
63. 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
65. 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
67. 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.
68. 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
70. 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.
71. 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
76. El Futuro de Angular
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.
77. El Futuro de Angular
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
78. El Futuro de Angular
Ahora:
angular.module('myStuff', []).value('x', 42);
A Futuro:
module "myStuff" {
export let x = 42;
}
79. El Futuro de Angular
Angular
● Mejor separación del core módulos
angular-resource.js
angular-route.js
angular-sanitize.js
+ angular-http.js
+ angular-filter.js
+…
80. El Futuro de Angular
Angular + ECMAScript 6
● 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
81. El Futuro de Angular
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.
82. El Futuro de Angular
Angular + ECMAScript 6
Ahora:
● digest cycle
● dirty-checking
● $apply
A futuro:
● Soporte nativo de JavaScript para ser notificado cuando
un objeto cambia: Object.observe
83. El Futuro de Angular
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;
});
});