the future of AngularJSbrian ford → @briantford

the past → the present

"reimagine the browser"

0.9.0 oct 20100.10.0 sep 20111.0.0 jun 20121.1.0 aug 20121.2.0-rc.1 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 browserswe (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 injectionbased on es6 modules→ easier to share and use modulesacross frameworks→ easier to use/write tools around them (think bower, yeoman, etc)

now:angular.module('myStuff' []).

value('x', 42);

future:module "myStuff" {

export let x = 42;

}

es6 modules

es6 modules

$location

$compile

$http

$injector

$parse

dateFilter ngRepeat

etc...

angular.js

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

es6 modules + http2 (aka spdy)

ServerHTTP/1.1

Browser

inde

x.ht

ml

app.

js

my-

mod

ule.

js

my-

parti

al.h

tml

ServerHTTP/2.0

Browser

inde

x.ht

ml

Now Future

index.html

app.jsm

y-module.js

my-partial.htm

l

4 requests → 4 responses 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 kindaalready doing with directives

<element extends="button" name="fancy-button">

...

</element>

<fancy-button></fancy-button>

shadow dom

what is it:

lets you encapsulate htmlinside a single special containerthat looks like one element on the outside

think transclusion in angular 1.x

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

shadow dom

a directive's new best friend

✓ better encapsulation

✓ less cognitive overload

when to render?

now:

digest cycle, dirty-

checking, $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