the future of AngularJS
brian ford → @briantford
the past → the present
"reimagine the browser"
0.9.0 oct 2010
0.10.0 sep 2011
1.0.0 jun 2012
1.1.0 aug 2012
1.2.0-rc.1 aug 2013
changing browsers → time for more imagination
the future
angular + standards = ♥
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
$location
$compile
$http
$injector
$parse
dateFilter
ngRepeat
etc...
angular.js
angular-resource.js
angular-route.js
angular-sanitize.js
+ angular-http.js
+ angular-filter.js
+ ...
es6 modules + http2 (aka spdy)
Server
HTTP/1.1
Browser
index.html
app.js
my-module.js
my-partial.html
Server
HTTP/2.0
Browser
index.html
Now
Future
index.html
app.js
my-module.js
my-partial.html
4 requests → 4 responses
1 requests → 4 responses
es6 modules
✓ less js
✓ interoperability
✓ better tools
web components
web components =
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, 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
brian ford → @briantford
fin