Tech Talks

Facundo Viale
Temario: Parte I
●

¿Porqué AngularJS?
○

¿Qué tenemos hoy?

●

Orígenes de AngularJS

●

Introducción a AngularJS
○

Modu...
Temario: Parte II
●

Las buenas experiencias

●

Las malas experiencias

●

Soporte para SEO

●

Pre-Loading

●

El Futuro...
¿Porqué AngularJS?
¿Porqué AngularJS?
Nuestras Motivaciones:
● Encontrar una solución integral que permita solucionar lo que hoy
logramos con...
¿Porqué AngularJS?
¿Qué desafíos y situaciones íbamos a afrontar?
● Re-hacer toda una pagina ( Obvio no? )
● Afrontar nuev...
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...
Orígenes de AngularJS
Features
● Arquitectura modular
● Inyección de dependencias
● Two-ways data binding
● Templating
● A...
¿Porqué AngularJS?
Tecnologias /
Necesidades

¿Qué soluciones
tenemos hoy?

¿Qué soluciones
tendríamos?

Templating

Hande...
Introducción a AngularJS
Modularidad
Introducción a AngularJS
JQuery:
Introducción a AngularJS
RequireJS:
I

II
Introducción a AngularJS
AngularJS
Todo se encuentra dentro de un módulo, incluso para inicializar
nuestra aplicación debe...
Inyección de Dependencias
Introducción a AngularJS
Introducción a AngularJS
Inyección de Dependencias
Introducción a AngularJS
Desarrollo multi-modulo
Providers
Introducción a AngularJS
Servicios
Nuestra premisa:
Exponen comportamiento y se inyectan en otros servicios o
“controllers...
Introducción a AngularJS
Tipo
de
Provider
Value

Código

Descripción

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

Nos permite...
Introducción a AngularJS
Ej de Factory:
Introducción a AngularJS
Ej de Provider:
Templating
y
Databinding
Introducción a AngularJS
Templating
● JQuery con HandlebarsJS
Introducción a AngularJS
Templating
● JQuery con HandlebarsJS
Introducción a AngularJS
Templating
● AngularJS
Scopes
y
Controllers
Introducción a AngularJS
Scopes y Controller:
Los controllers son un tipo de “Servicio”, que tiene la característica de
po...
Introducción a AngularJS
Ej de Controller
Introducción a AngularJS
Introducción a AngularJS
Scopes y Controller:
Los controllers soporta herencia de scope, esto es cuando un
controller está...
Introducción a AngularJS
Diferencias
●

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

●

Con JQuery y Hand...
Introducción a AngularJS
Databinding
Handlebars

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

AngularJS
Introducción a AngularJS
Databinding - Integración con estilos

o

http://docs.angularjs.org/api/ng.directive:ngClass
Introducción a AngularJS
Databinding - Filtros
Los filtros son un herramienta que se aplica tanto a elementos como a
lista...
Introducción a AngularJS
Databinding - Filtros
Introducción a AngularJS
Databinding - Filtros
Más Ejemplos:
http://docs.angularjs.org/api/ng.filter:date

http://docs.ang...
Introducción a AngularJS
Databinding - Filtros
Eventos
Introducción a AngularJS
Evento
Similar a como funciona AmplifyJS, salvo que Angular soporta
jerarquías de scopes. Lo que ...
Introducción a AngularJS
Dentro de los eventos, también es posible escuchar cambios
sobre una variable que esté contenida ...
Directives
Introducción a AngularJS
¿Qué son?
Son una herramienta que nos permiten atachar comportamiento, a un
elemento del DOM de f...
Introducción a AngularJS
Directivas ng-click y ng-model
Introducción a AngularJS
Más Ejemplos:
http://docs.angularjs.org/api/ng.directive:ngHide
http://docs.angularjs.org/api/ng....
Introducción a AngularJS
¿ Porqué usar Directives ?
● Desacoplan el HTML y los componentes del codigo JS
● Por ende tratam...
Asincronismo
Introducción a AngularJS
Asincronismo
En Angular todo se resuelve de manera asincrónica, pero en vez
manejar la respuesta ...
Introducción a AngularJS
Promise Pattern vs Callback
Recuerdan las callbacks?

doStuff1(function(data1) {
doStuff2(data1, ...
Introducción a AngularJS
Promise Pattern vs Callback
Usando promise:

doStuff1().then(doStuff2).then(doStuff3).then(doStuf...
Introducción a AngularJS
Promise Pattern vs Callback
¿Algo más complejo?

$q.all([doStaff1, doStaff2, doStaff3]).then(doSt...
Introducción a AngularJS
Ventajas de las Promise:
● Encapsulan el resultado a futuro de la operación, de manera tal
que es...
Introducción a AngularJS
Servicios de Angular que usan Promise
● $http
● $timeout
● $interval
● $resource
● Si usamos angu...
Introducción a AngularJS
Caso especial de $resource. ¿Donde esta la promise?
Introducción a AngularJS

Esto ocurre por una cuestión de comodidad, para cuando el modelo es
bindeado a los otros compone...
Location Handling
Introducción a AngularJS
¿ Qué es location handling ?
Es detectar cambios en la URL que no impactar a nivel back-end pero
...
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...
Introducción a AngularJS
Beneficios
● Carga mucho más rápida de la página.
● Posibilidad de dividir una pagina, en pequeña...
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...
Las “Malas” Experiencias
Las “Malas” Experiencias
● Stackoverflow tiene más respuestas y documentación que la
misma página de AngularJS.
● A veces,...
Soporte para SEO
Soporte para SEO
Problema:
● Metodología Single Page hace uso extensivo de AJAX.
● Angular tiene comportamiento asincrónic...
Soporte para SEO
Solución:
Simplemente basta con detectar a los crawlers, por su
user-agent y pre-procesar la página usand...
Pre-Loading
Pre-Loading
El gran potencial de Angular radica en su data-binding, por
lo que siempre es preferible que angular pueda pos...
Pre-Loading
Solución:
Angular posee un cache tanto para los templates que
utilizar para la partial views como para los dat...
Pre-Loading
Cache de Partial Views
Pre-Loading
Cache de JSON
Pre-Loading
Cache de JSON
El Futuro de Angular
El Futuro de Angular

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

●

Modern browsers have evolved. Although o...
El Futuro de Angular

Angular + ECMAScript 6
● ES6 Modules
○ Como es un estándar se puede reutilizar y compatir
entre dife...
El Futuro de Angular

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

Angular
● Mejor separación del core módulos
angular-resource.js
angular-route.js
angular-sanitize.js...
El Futuro de Angular

Angular + ECMAScript 6
● ES6 Modules + HTTP2 ( Akka SPDY )

index.html

my-partial.
html

l
tm
l.h
t...
El Futuro de Angular

Angular
Integración con zone.js
A Zone is an execution context that persists across async tasks.
You...
El Futuro de Angular

Angular + ECMAScript 6
Ahora:
● digest cycle
● dirty-checking
● $apply

A futuro:
● Soporte nativo d...
El Futuro de Angular
Ahora:
socket.on('data', function (data) {
$scope.$apply(function () {
$scope.model = data;
});
});

...
Debate
Upcoming SlideShare
Loading in...5
×

Despegar Tech Talk - AngularJS

2,367

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,367
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Despegar Tech Talk - AngularJS

  1. 1. Tech Talks Facundo Viale
  2. 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. 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
  4. 4. ¿Porqué AngularJS?
  5. 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. 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.
  7. 7. Orígenes de AngularJS
  8. 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. 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. 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
  11. 11. Introducción a AngularJS
  12. 12. Modularidad
  13. 13. Introducción a AngularJS JQuery:
  14. 14. Introducción a AngularJS RequireJS: I II
  15. 15. Introducción a AngularJS AngularJS Todo se encuentra dentro de un módulo, incluso para inicializar nuestra aplicación debemos indicar el módulo inicial.
  16. 16. Inyección de Dependencias
  17. 17. Introducción a AngularJS
  18. 18. Introducción a AngularJS Inyección de Dependencias
  19. 19. Introducción a AngularJS Desarrollo multi-modulo
  20. 20. Providers
  21. 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. 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
  23. 23. Introducción a AngularJS Ej de Factory:
  24. 24. Introducción a AngularJS Ej de Provider:
  25. 25. Templating y Databinding
  26. 26. Introducción a AngularJS Templating ● JQuery con HandlebarsJS
  27. 27. Introducción a AngularJS Templating ● JQuery con HandlebarsJS
  28. 28. Introducción a AngularJS Templating ● AngularJS
  29. 29. Scopes y Controllers
  30. 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.
  31. 31. Introducción a AngularJS Ej de Controller
  32. 32. Introducción a AngularJS
  33. 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. 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.
  35. 35. Introducción a AngularJS Databinding Handlebars Ejemplo: http://docs.angularjs.org/guide/forms AngularJS
  36. 36. Introducción a AngularJS Databinding - Integración con estilos o http://docs.angularjs.org/api/ng.directive:ngClass
  37. 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.
  38. 38. Introducción a AngularJS Databinding - Filtros
  39. 39. Introducción a AngularJS 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
  40. 40. Introducción a AngularJS Databinding - Filtros
  41. 41. Eventos
  42. 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. 43. Introducción a AngularJS Dentro de los eventos, también es posible escuchar cambios sobre una variable que esté contenida en el scope.
  44. 44. Directives
  45. 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.
  46. 46. Introducción a AngularJS Directivas ng-click y ng-model
  47. 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. 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.
  49. 49. Asincronismo
  50. 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. 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. 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
  53. 53. Introducción a AngularJS Promise Pattern vs Callback ¿Algo más complejo? $q.all([doStaff1, doStaff2, doStaff3]).then(doStaff4)
  54. 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. 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
  56. 56. Introducción a AngularJS Caso especial de $resource. ¿Donde esta la promise?
  57. 57. Introducción a AngularJS Esto ocurre por una cuestión de comodidad, para cuando el modelo es bindeado a los otros componentes.
  58. 58. Location Handling
  59. 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. 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. 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.
  62. 62. Las Buenas Experiencias
  63. 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
  64. 64. Las “Malas” Experiencias
  65. 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
  66. 66. Soporte para SEO
  67. 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. 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
  69. 69. Pre-Loading
  70. 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. 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
  72. 72. Pre-Loading Cache de Partial Views
  73. 73. Pre-Loading Cache de JSON
  74. 74. Pre-Loading Cache de JSON
  75. 75. El Futuro de Angular
  76. 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. 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. 78. El Futuro de Angular Ahora: angular.module('myStuff', []).value('x', 42); A Futuro: module "myStuff" { export let x = 42; }
  79. 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. 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. 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. 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. 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; }); });
  84. 84. Debate
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×