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