You are on page 1of 27

the future of

AngularJS
brian ford @briantford

the past the present


"reimagine the browser"
0.9.0
0.10.0
1.0.0
1.1.0
1.2.0-rc.1

oct 2010
sep 2011
jun 2012
aug 2012
aug 2013

changing browsers time for more imagination

the future

angular + standards =
es6 modules
web components

the future
standards are mostly:
still in flux
not implemented in browsers
we (the angular team) are mostly:
still in the exploratory phase
excited about these things :)
consider this an early preview

js modules of today

<script> + globals
require.js
AMD
CommonJS (node, browserify)
UMD (catch-all for the above)

es6 modules

new dependency injection


based on es6 modules
easier to share and use modules
across frameworks
easier to use/write tools around them
(think bower, yeoman, etc)

es6 modules

now:
angular.module('myStuff' []).
value('x', 42);

future:
module "myStuff" {
export let x = 42;
}

es6 modules

angular.js
$location $http
$parse

$compile

dateFilter

ngRepeat

$injector
etc...

angular-resource.js
angular-route.js
angular-sanitize.js
+ angular-http.js
+ angular-filter.js
+ ...

es6 modules + http2

Browser

4 requests 4 responses

index.html

l
tm
l.h
rtia s
-pa le.j
my odu
-m
my p.js
ap ml

my-partial.html

Server
HTTP/2.0

my-module.js

Server
HTTP/1.1

.ht

app.js

Future

ex
ind

index.html

Now

(aka spdy)

Browser

1 requests 4 responses

es6 modules

less js
interoperability
better tools

web components
web components =

templates
decorators
custom elements
shadow dom
imports

templates
what is it:
container for dom-to-be

templates
now:
<script type="text/ng-template"
id="/my-template.html">
<span>{{hello}}</span>
<img src="{{picture}}">
</script>

future:
<template id="my-template">
<span>{{hello}}</span>
<img src="{{picture}}">
</template>

templates

not parsed
won't load images
no security issues
no html-in-a-string grossness

decorators &
custom elements
what is it:
standard for what angular is kinda
already doing with directives
<element extends="button" name="fancy-button">
...
</element>
<fancy-button></fancy-button>

shadow dom
what is it:
lets you encapsulate html
inside a single special container
that looks like one element on the outside
think transclusion in angular 1.x

shadow dom
if you look at the dom

now:
<div class="pane-container">
<div class="pane-row pane-active">
<div class="pane">{{hello}}</div>
</div>
</div>

future:
<!-- the other divs are hidden from the outside world -->
<div class="shadow-pane">{{hello}}</div>

shadow dom
a directive's new best friend

better encapsulation
less cognitive overload

when to render?
now:
digest cycle, dirtychecking, $apply

future:
(this space left intentionally blank)

Object.observe

native javascript support


for getting notifications that
an object changed

$apply? more like


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

future:
socket.on('data', function (data) {
$scope.$apply(function () {
$scope.model = data;
});
});
*$goodbye is not an upcoming angular api

$apply? more like


$goodbye

with Object.observe,
there's no need to
manually tell angular that
your app's model updated

object.Observe
but how?
var x = {};
Object.observe(x, console.log);
x.prop = 'some value';
// [ { type: 'new',
//
object: {
//
prop: 'some value'
//
},
//
name: 'prop' } ]

object.Observe

simplified api
performance gains

summary
this is an early preview
of what we hope the future
looks like someday maybe
angular will definitely
co-evolve with standards
as they mature for certain

resources

caniuse.com
html5rocks.com
w3.org

fin
brian ford @briantford