Browsers are exciting. JavaScript libraries make them even more exciting. We’ll see what’s in store for the future of the web and how AngularJS is making huge strides to bringing it to us today. Angular pushes the limits of what’s possible in current and emerging technologies, exploring upcoming and recently landed APIs with regular new releases. This rapid cycle to push the web forward is increasingly making Angular the framework of choice for client-side MVW engineering. We’ll look at ES6, two way data-binding, upcoming Web Components, including ShadomDOM, Custom Elements, differences from Polymer, and how Angular fits in the picture.

1. AngularJS
THE BRIDGE BETWEEN TODAY
AND tomorrow's WEB

2. @toddmotto

3. A look at the web
▸ Yesterday, where we came from
▸ Tomorrow, where we’re headed
▸ Today, what’s available
▸ Angular, today
▸ Angular, tomorrow

4. Rewind

5. <TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD COLSPAN="3">Oh my!</TD>
</TR>
</TABLE>

6. <BLINK></BLINK>
<MARQUEE></MARQUEE>

7. <center>
<font size="4">Awesome letters</font>
</center>

8. <a href="javascript:window.location='http://www1.myawesomeweb.com'">
Enter site!
</a>

9. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

12. Where are we
now?

14. ▸ <video>, <audio>
▸ WebGL,<canvas>
▸ getUserMedia
▸ Geolocation (kinda)
▸ Fullscreen API
▸ WebSockets

15. ▸ local and session storage
▸ History API
▸ Indexed DB
▸ Web SQL (kinda)
▸ Native form validation (required, email etc)
▸ FormData

16. ▸ Dataset (custom data-*)
▸ HTML5 semantics
▸ File/FileReader API
▸ classList API
▸ Drag and drop
▸ postMessage
▸ contenteditable

17. And breathe. HTML5 is
huge.

18. To make things even more
difficult for us...

19. Frameworks and Model-
View-Whatever

20. ▸ Angular
▸ Backbone
▸ Ember
▸ Knockout
▸ React

21. Why
frameworks?

22. We're still missing stuff!
▸ Templates/Encapsulation/Components
▸ Two-way data binding/Model data
▸ Promises and Class-like components
▸ Modules
▸ Dependency Injection (DI)

23. So where are we
going?

24. Incoming...
▸ Web Components (HTML5)
▸ Object.observe (ES7)
▸ Native Promises (ES6)
▸ Modules (ES6)
▸ Classes (ES6)

25. Web Components
CUSTOM ELEMENTS

26. Web Components: Custom Elements
<google-map latitude="37.77493" longitude="-122.41942">
<google-map-marker latitude="37.779" longitude="-122.3892"
title="Go Giants!"></google-map-marker>
</google-map>

27. Web Components
TEMPLATES

28. Web Components: Templates
<template id="google-map">
<style>
:host {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<div class="map">
<div id="map"></div>
</div>
</template>

29. Web Components
SHADOW DOM

30. Web Components: Shadow DOM
▾<google-map latitude="37.77493" longitude="-122.41942">
▾#shadow-root (user-agent)
<div class="map">
<div id="map">
<canvas class="map"></canvas>
</div>
</div>
</google-map>

31. Web Components
HTML IMPORTS

32. Web Components: HTML Imports
<link rel="import" href="../components/google-map.html">

33. ES7
OBJECT.OBSERVE()

34. ES7: Object.observe()
// html5rocks.com/en/tutorials/es7/observe
// Let's say we have a model with data
var model = {};
// Which we then observe
Object.observe(model, function(changes){
// This asynchronous callback runs
changes.forEach(function(change) {
// Letting us know what changed
console.log(change.type, change.name, change.oldValue);
});
});

35. ES6
PROMISES

36. ES6: Promises
// html5rocks.com/en/tutorials/es6/promises
var promise = new Promise(function(resolve, reject) {
if (/* everything turned out fine */) {
resolve('Stuff worked!');
} else {
reject(Error('It broke'));
}
});
promise.then(function (result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});

37. ES6
MODULES

38. ES6: Modules
// 2ality.com/2014/09/es6-modules-final.html
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

39. ES6
CLASSES

40. ES6: Classes
// javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial
class Model {
constructor (properties) {
this.properties = properties;
}
toObject() {
return this.properties;
}
}

41. So... Where's Angular?

42. Angular
CUSTOM ELEMENTS

43. Angular: Custom Elements
<google-map latitude="37.77493" longitude="-122.41942">
<google-map-marker latitude="37.779" longitude="-122.3892"
title="Go Giants!"></google-map-marker>
</google-map>

44. Angular
TEMPLATES

45. Angular: Templates
function googleMap () {
return {
scope: { longitude: '=', latitude: '=' },
template: [
'<div class="map">',
'<div id="map"></div>',
'</div>',
].join('')
};
}
angular
.module('app')
.directive('googleMap', googleMap);

46. Angular
"SHADOW DOM"

47. Angular: "Shadow DOM"
<google-map latitude="37.77493" longitude="-122.41942">
<div class="map">
<div id="map">
<canvas class="map"></canvas>
</div>
</div>
</google-map>

48. Angular
HTML IMPORTS

49. Angular: HTML Imports
function googleMap () {
return {
scope: { longitude: '=', latitude: '=' },
templateUrl: '../google-map.html'
};
}
angular
.module('app')
.directive('googleMap', googleMap);

50. Angular
$SCOPE.$WATCH

51. Angular: $scope.$watch
function MainCtrl ($scope) {
$scope.$watch('model', function (newVal, oldVal) {
//
});
}
angular
.module('app')
.directive('MainCtrl', MainCtrl);

52. Angular
PROMISES

53. Angular: Promises
$http
.get('/someurl')
.then(function (response) {
// :)
}, function (reason) {
// :(
});

54. Above and beyond specs
BUILDING ON TOP OF THE WEB PLATFORM

55. Angular: Dependency Injection
function MainCtrl ($scope, $rootScope) {
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);

56. Angular: Declarative bindings
<!-- ng-* -->
<div ng-controller="UserCtrl as vm">
<h1 ng-bind="vm.title"></h1>
<a href="" ng-click="vm.getUsers();">Get users</a>
</div>

57. Angular: DOM creation/destruction
<ul>
<li ng-repeat="user in vm.users"></li>
</ul>

58. Angular: JS Objects as DOM
<input type="text" ng-model="vm.someModel">
<p>{{ vm.someModel }}</p>
<!--
Maps across input value to Object
$scope.vm.someModel
-->

59. Angular: Expressions
<p>{{ user.name }} | ({{ user.notifications.length }})</p>
<!--
<p>Todd | (2)</p>
-->

60. Angular: Automated events
<li ng-repeat="user in vm.users">
<a href="" ng-click="vm.composeEmail()">
Compose email
</a>
</li>

61. Angular: Component lifecycles
▸ Automatic event binding/unbinding
▸ Creation/destruction of DOM and ($scope) Model data
▸ ng-ifs, DOM stored in memory

62. Angular: Routing
function Router ($routeProvider, $locationProvider) {
$routeProvider.when('/inbox', {
templateUrl: 'views/mailbox.html',
controller: 'InboxCtrl as vm',
resolve: InboxCtrl.resolve
}).when('/email/:id', {
templateUrl: 'views/email.html',
controller: 'EmailCtrl as vm',
resolve: EmailCtrl.resolve
}).otherwise({ redirectTo: 'inbox' });
};
angular
.module('app')
.config(Router);

63. Angular: Modular JavaScript
angular
.module('app', [
'ngRoute',
'Auth',
'growl'
]);

64. Angular: Form validation
<form name="authForm" ng-submit="vm.submitForm();">
</form>
<!--
authForm.$pristine
authForm.$dirty
authForm.$invalid
authForm.$valid
authForm.$error
-->

65. Where next for Angular?
2.0 DRIVE: BIT.LY/ZHQT1Q

66. Angular 2.0: Faster change detection
ES6 Port of Angular.dart change detection
github.com/angular/watchtower.js

67. Angular 2.0: Template engine
github.com/angular/templating
@ComponentDirective({
selector: 'tab-container',
observe: {
'tabs[]': 'tabsChanged'
},
shadowDOM: true
})

68. Angular 2.0: Data persistence
▸ ngWebSocket ($ngWebSocket)
▸ ngStore ($localStorage, $localDB)
▸ ngOffline ($serviceWorker, $connection)
▸ ngData (Models, IAdapter, ChangeEvent)
▸ ngHttp (low-mid level APIs)

69. Angular 2.0: Annotations
// reduces boilerplate and hides angular wireframe
@Provide(Heater)
export class MockHeater {
constructor() {}
on() {
console.log('Turning on the MOCK heater...');
}
off() {}
}

70. Takeaways
▸ Angular helps deliver the future now
▸ Frameworks will always be ahead of the web
▸ Libs/frameworks help sculpt the future
▸ Where next? See you there!

71. Thank you
@toddmotto
speakerdeck.com/toddmotto