Slide 1
Slide 1 text
AngularJS
The bridge between today and
tomorrow's web
Slide 2
Slide 2 text
• @toddmotto
• GDE
• Lead engineer @ Mozio
• Google, Intel, Rolling Stone
• Open source (ngStyleguide, conditionizr)
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
The story
• Yesterday, where we came from
• Tomorrow, where we’re headed
• Today, what’s available
• Angular future thinking/mappings
• Angular today
• Angular tomorrow
Slide 5
Slide 5 text
Rewind
Slide 6
Slide 6 text
Oh my!
Slide 7
Slide 7 text
Slide 8
Slide 8 text
Awesome letters
Slide 10
Slide 10 text
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Where are we now?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
• ,
• WebGL,
• getUserMedia
• ServiceWorker
• Geolocation (kinda)
• Fullscreen API
• WebSockets
Slide 16
Slide 16 text
• local and session storage
• History API
• Indexed DB
• Web SQL (kinda)
• Native form validation (required, email etc)
• FormData
• Dataset (custom data-*)
Slide 17
Slide 17 text
• HTML5 semantics
• File/FileReader API
• classList API
• Drag and drop
• postMessage
• contenteditable
Slide 18
Slide 18 text
And breathe. HTML5 is huge.
Slide 19
Slide 19 text
To make things even more difficult for us...
Slide 20
Slide 20 text
Frameworks and Model-View-Whatever
Slide 21
Slide 21 text
• Angular
• Knockout
• Ember
• React
• Backbone
Slide 22
Slide 22 text
Why frameworks?
Slide 23
Slide 23 text
We're still missing stuff!
• Templates/Encapsulation/Components
• Two-way data binding/Model data
• Promises and Class-like components
• Modules
• Dependency Injection (DI)
• Software patterns (MVC/MVVM)
Slide 24
Slide 24 text
So where are we going?
Slide 25
Slide 25 text
Incoming...
• Web Components (HTML5)
• Object.observe (ES7) [deprecated]
• Native Promises (ES6)
• Modules (ES6)
• Classes (ES6)
Slide 26
Slide 26 text
Web Components
Custom Elements
Slide 27
Slide 27 text
Web Components: Custom Elements
Slide 28
Slide 28 text
Web Components
Templates
Slide 29
Slide 29 text
Web Components: Templates
:host {
position: relative;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Slide 30
Slide 30 text
Web Components
Shadow DOM
Slide 31
Slide 31 text
Web Components: Shadow DOM
▾
▾#shadow-root (user-agent)
Slide 32
Slide 32 text
Web Components
HTML Imports
Slide 33
Slide 33 text
Web Components: HTML Imports
Slide 34
Slide 34 text
ES7
Object.observe - deprecated
Slide 35
Slide 35 text
ES7: Object.observe - deprecated
// 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);
});
});
Slide 36
Slide 36 text
ES6
Promises
Slide 37
Slide 37 text
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"
});
Slide 38
Slide 38 text
ES6
Modules
Slide 39
Slide 39 text
ES6: Modules
// MainCtrl.js
export default function () {
this.name = 'AngularJS'
}
// app.js
import {MainCtrl} from './MainCtrl.js';
console.log(MainCtrl.name); // 'AngularJS'
angular.module('myApp', [])
.controller('MainCtrl', MainCtrl);
Slide 40
Slide 40 text
ES6
Classes
Slide 41
Slide 41 text
ES6: Classes
class ExampleController {
constructor() {
this.model = {
name: '',
power: ''
};
this.heros= [];
}
add(hero) {
this.heros.push(hero);
}
}
Slide 42
Slide 42 text
So... Where's Angular?
Slide 43
Slide 43 text
Angular
Custom Elements
Slide 44
Slide 44 text
Angular: Custom Elements
Slide 45
Slide 45 text
Angular
Templates
Slide 46
Slide 46 text
Angular: Templates
function googleMap () {
return {
scope: {},
bindToController: { longitude: '=', latitude: '=' },
template: [
'
',
'',
'
',
].join('')
};
}
angular.module('app').directive('googleMap', googleMap);
Slide 47
Slide 47 text
Angular
"Shadow DOM"
Slide 48
Slide 48 text
Angular: "Shadow DOM"
Slide 49
Slide 49 text
Angular
HTML Imports
Slide 50
Slide 50 text
Angular: HTML Imports
function googleMap () {
return {
scope: {},
bindToController: { longitude: '=', latitude: '=' },
templateUrl: '../google-map.html'
};
}
angular
.module('app')
.directive('googleMap', googleMap);
Slide 51
Slide 51 text
Angular
$scope.$watch
Slide 52
Slide 52 text
Angular: $scope.$watch
function MainCtrl ($scope) {
$scope.model = {}; // Object
$scope.$watch('model', function (newVal, oldVal) {
// newVal and oldVal
});
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
Slide 53
Slide 53 text
Angular
Promises
Slide 54
Slide 54 text
Angular: Promises
// $q underneath
$http
.get('/someurl')
.then(function (response) {
// :)
}, function (reason) {
// :(
});
Slide 55
Slide 55 text
Above and beyond specs
Building on top of the web platform
Slide 56
Slide 56 text
Angular: Dependency Injection
function MainCtrl ($scope, $rootScope) {
// use $scope and $rootScope
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
Slide 58
Slide 58 text
Angular: DOM creation/destruction
Slide 59
Slide 59 text
Angular: JS Objects as DOM
{{ vm.someModel }}
Slide 60
Slide 60 text
Angular: Expressions
{{ user.name }} | ({{ user.notifications.length }})
Slide 62
Slide 62 text
Angular: Component lifecycles
• Automatic event binding/unbinding
• Creation/destruction of DOM and ($scope) Model data
• ng-ifs, DOM stored in memory
Slide 63
Slide 63 text
Angular: Routing
function Router ($routeProvider) {
$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);
Slide 64
Slide 64 text
Angular: Modules/submodules
angular
.module('app', [
'ngRoute',
'Auth',
'growl'
]);
Slide 65
Slide 65 text
Angular: Form validation
Submit
Slide 66
Slide 66 text
Angular 2
Slide 67
Slide 67 text
Angular 2: ES6 + TypeScript
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '
Hello world!
' }) export class AppComponent {}Slide 68
Slide 68 text
Angular 2: Syntax
{{ item.label }}
Slide 69
Slide 69 text
Angular 2: Classes
export class Todo {
constructor() {
this.todos = [
{ label: 'Learn Angular', complete: false},
{ label: 'Deploy to S3', complete: true }
];
}
updateIncomplete() {
return this.todos.filter(item => !item.complete).length;
}
deleteItem(index) {
this.todos.splice(index, 1);
}
}
Slide 70
Slide 70 text
Preparing for Angular 2
Slide 71
Slide 71 text
Angular 2: Preparing
• Use controllerAs and bindToController
• Use new component() method
• Integrate ES6 and/or TypeScript
• ngForward and ngUpgrade
Slide 72
Slide 72 text
Takeaways
• Angular helps deliver the future now
• Frameworks will always be ahead of the web
• Libs/frameworks help sculpt the future
• Angular 2, ES6 + TypeScript is coming
• Prepare for it now!
Slide 73
Slide 73 text
Thank you
@toddmotto
speakerdeck.com/toddmotto