AngularJSTHE BRIDGE BETWEEN TODAY
AND tomorrow's WEB
@toddmotto
A look at the web▸ Yesterday, where we came from▸ Tomorrow, where we’re headed▸ Today, what’s available▸ Angular, today▸ Angular, tomorrow
Rewind
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR> <TD COLSPAN="3">Oh my!</TD> </TR></TABLE>
<BLINK></BLINK>
<MARQUEE></MARQUEE>
<center> <font size="4">Awesome letters</font></center>
<a href="javascript:window.location='http://www1.myawesomeweb.com'"> Enter site!</a>
<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>
Where are we now?
▸ <video>, <audio>▸ WebGL,<canvas>▸ getUserMedia
▸ Geolocation (kinda)▸ Fullscreen API▸ WebSockets
▸ local and session storage▸ History API▸ Indexed DB▸ Web SQL (kinda)
▸ Native form validation (required, email etc)▸ FormData
▸ Dataset (custom data-*)▸ HTML5 semantics▸ File/FileReader API▸ classList API▸ Drag and drop▸ postMessage▸ contenteditable
And breathe. HTML5 is huge.
To make things even more difficult for us...
Frameworks and Model-View-Whatever
▸ Angular▸ Backbone▸ Ember▸ Knockout▸ React
Why frameworks?
We're still missing stuff!▸ Templates/Encapsulation/Components▸ Two-way data binding/Model data▸ Promises and Class-like components
▸ Modules▸ Dependency Injection (DI)
So where are we going?
Incoming...▸ Web Components (HTML5)▸ Object.observe (ES7)▸ Native Promises (ES6)▸ Modules (ES6)▸ Classes (ES6)
Web ComponentsCUSTOM ELEMENTS
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>
Web ComponentsTEMPLATES
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>
Web ComponentsSHADOW DOM
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>
Web ComponentsHTML IMPORTS
Web Components: HTML Imports<link rel="import" href="../components/google-map.html">
ES7OBJECT.OBSERVE()
ES7: Object.observe()// html5rocks.com/en/tutorials/es7/observe// Let's say we have a model with datavar model = {};
// Which we then observeObject.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); });
});
ES6PROMISES
ES6: Promises// html5rocks.com/en/tutorials/es6/promisesvar 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"});
ES6MODULES
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)); // 121console.log(diag(4, 3)); // 5
ES6CLASSES
ES6: Classes// javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorialclass Model { constructor (properties) { this.properties = properties; } toObject() { return this.properties; }}
So... Where's Angular?
AngularCUSTOM ELEMENTS
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>
AngularTEMPLATES
Angular: Templatesfunction googleMap () { return { scope: { longitude: '=', latitude: '=' }, template: [ '<div class="map">', '<div id="map"></div>', '</div>', ].join('') };}angular .module('app') .directive('googleMap', googleMap);
Angular"SHADOW DOM"
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>
AngularHTML IMPORTS
Angular: HTML Importsfunction googleMap () { return { scope: { longitude: '=', latitude: '=' }, templateUrl: '../google-map.html' };}angular .module('app') .directive('googleMap', googleMap);
Angular$SCOPE.$WATCH
Angular: $scope.$watchfunction MainCtrl ($scope) { $scope.$watch('model', function (newVal, oldVal) { // });}angular .module('app') .directive('MainCtrl', MainCtrl);
AngularPROMISES
Angular: Promises$http.get('/someurl').then(function (response) { // :)}, function (reason) { // :(});
Above and beyond specsBUILDING ON TOP OF THE WEB PLATFORM
Angular: Dependency Injectionfunction MainCtrl ($scope, $rootScope) {
}angular .module('app') .controller('MainCtrl', MainCtrl);
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>
Angular: DOM creation/destruction<ul> <li ng-repeat="user in vm.users"></li></ul>
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-->
Angular: Expressions<p>{{ user.name }} | ({{ user.notifications.length }})</p><!--<p>Todd | (2)</p>-->
Angular: Automated events<li ng-repeat="user in vm.users"> <a href="" ng-click="vm.composeEmail()"> Compose email </a></li>
Angular: Component lifecycles▸ Automatic event binding/unbinding
▸ Creation/destruction of DOM and ($scope) Model data▸ ng-ifs, DOM stored in memory
Angular: Routingfunction 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);
Angular: Modular JavaScriptangular .module('app', [ 'ngRoute', 'Auth', 'growl' ]);
Angular: Form validation<form name="authForm" ng-submit="vm.submitForm();">
</form><!-- authForm.$pristine authForm.$dirty authForm.$invalid authForm.$valid authForm.$error-->
Where next for Angular?2.0 DRIVE: BIT.LY/ZHQT1Q
Angular 2.0: Faster change detectionES6 Port of Angular.dart change detection
github.com/angular/watchtower.js
Angular 2.0: Template enginegithub.com/angular/templating
@ComponentDirective({ selector: 'tab-container', observe: { 'tabs[]': 'tabsChanged' }, shadowDOM: true})
Angular 2.0: Data persistence▸ ngWebSocket ($ngWebSocket)▸ ngStore ($localStorage, $localDB)
▸ ngOffline ($serviceWorker, $connection)▸ ngData (Models, IAdapter, ChangeEvent)
▸ ngHttp (low-mid level APIs)
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() {} }
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!
Thank you
@toddmottospeakerdeck.com/toddmotto
