angularjs: the bridge between today and tomorrow's web (todd motto)
DESCRIPTION
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.TRANSCRIPT
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