AngularJS: The Bridge Between Today and Tomorrow's Web

Future of Web Apps 2014 (London + Boston)

Transcript

1. AngularJS The bridge between today and tomorrow's web
2. • @toddmotto • GDE • Lead engineer @ Mozio • Google, Intel, Rolling Stone • Open source (ngStyleguide, conditionizr)
4. The story • Yesterday, where we came from • Tomorrow, where we’re headed • Today, what’s available • Angular future thinking/mappings • Angular today • Angular tomorrow
5. Rewind
6. <TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR> <TD COLSPAN="3">Oh my!</TD> </TR> </TABLE>
7. <BLINK></BLINK> <MARQUEE></MARQUEE>
8. <center> <font size="4">Awesome letters</font> </center>
9. <a href="javascript:window.location='http://www1.myawesomeweb.com'"> Enter site! </a>
10. <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>
13. Where are we now?
15. • <video>, <audio> • WebGL,<canvas> • getUserMedia • ServiceWorker • Geolocation (kinda) • Fullscreen API • WebSockets
16. • local and session storage • History API • Indexed DB • Web SQL (kinda) • Native form validation (required, email etc) • FormData • Dataset (custom data-*)
17. • HTML5 semantics • File/FileReader API • classList API • Drag and drop • postMessage • contenteditable
18. And breathe. HTML5 is huge.
19. To make things even more difficult for us...
20. Frameworks and Model-View-Whatever
21. • Angular • Knockout • Ember • React • Backbone
22. Why frameworks?
23. 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)
24. So where are we going?
25. Incoming... • Web Components (HTML5) • Object.observe (ES7) [deprecated] • Native Promises (ES6) • Modules (ES6) • Classes (ES6)
26. Web Components Custom Elements
27. 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>
28. Web Components Templates
29. 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>
30. Web Components Shadow DOM
31. 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>
32. Web Components HTML Imports
33. Web Components: HTML Imports <link rel="import" href="../components/google-map.html">
34. ES7 Object.observe - deprecated
35. 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); }); });
36. ES6 Promises
37. 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" });
38. ES6 Modules
39. 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);
40. ES6 Classes
41. ES6: Classes class ExampleController { constructor() { this.model = { name: '', power: '' }; this.heros= []; } add(hero) { this.heros.push(hero); } }
42. So... Where's Angular?
43. Angular Custom Elements
44. 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>
45. Angular Templates
46. Angular: Templates function googleMap () { return { scope: {}, bindToController: { longitude: '=', latitude: '=' }, template: [ '<div class="map">', '<div id="map"></div>', '</div>', ].join('') }; } angular.module('app').directive('googleMap', googleMap);
47. Angular "Shadow DOM"
48. 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>
49. Angular HTML Imports
50. Angular: HTML Imports function googleMap () { return { scope: {}, bindToController: { longitude: '=', latitude: '=' }, templateUrl: '../google-map.html' }; } angular .module('app') .directive('googleMap', googleMap);
51. Angular $scope.$watch
52. Angular: $scope.$watch function MainCtrl ($scope) { $scope.model = {}; // Object $scope.$watch('model', function (newVal, oldVal) { // newVal and oldVal }); } angular .module('app') .controller('MainCtrl', MainCtrl);
53. Angular Promises
54. Angular: Promises // $q underneath $http .get('/someurl') .then(function (response) { // :) }, function (reason) { // :( });
55. Above and beyond specs Building on top of the web platform
56. Angular: Dependency Injection function MainCtrl ($scope, $rootScope) { // use $scope and $rootScope } angular .module('app') .controller('MainCtrl', MainCtrl);
57. 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>
58. Angular: DOM creation/destruction <ul> <li ng-repeat="user in vm.users"></li> </ul>
59. 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 -->
60. Angular: Expressions <p>{{ user.name }} | ({{ user.notifications.length }})</p> <!-- <p>Todd | (2)</p> -->
61. Angular: Automated events <li ng-repeat="user in vm.users"> <a href="" ng-click="vm.composeEmail()"> Compose email </a> </li>
62. Angular: Component lifecycles • Automatic event binding/unbinding • Creation/destruction of DOM and ($scope) Model data • ng-ifs, DOM stored in memory
63. 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);
64. Angular: Modules/submodules angular .module('app', [ 'ngRoute', 'Auth', 'growl' ]);
65. Angular: Form validation <form name="authForm" ng-submit="vm.submitForm();"> <input type="text" name="authForm.name" ng-model="name" ng-minlength="6"> <button ng-disabled="authForm.name.$invalid"> Submit </button> </form> <!-- authForm.$pristine, authForm.$dirty authForm.$invalid, authForm.$valid authForm.$error -->
66. Angular 2
67. Angular 2: ES6 + TypeScript import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>Hello world!</h1>' }) export class AppComponent {}
68. Angular 2: Syntax <li *ng-for="#item of todos; #i = index" [ng-class]="{ 'todo__list--complete': item.complete }" > <input type="checkbox" [(ng-model)]="item.complete"> <p>{{ item.label }}</p> <span (click)="deleteItem(i);"> <i class="fa fa-times-circle"></i> </span> </li>
69. 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); } }
70. Preparing for Angular 2
71. Angular 2: Preparing • Use controllerAs and bindToController • Use new component() method • Integrate ES6 and/or TypeScript • ngForward and ngUpgrade
72. 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!
73. Thank you @toddmotto speakerdeck.com/toddmotto