AngularJS: The Bridge Between Today and Tomorrow's Web

B56bb22b3a4b83c6b534b4c114671380?s=47 Todd Motto
September 30, 2014

AngularJS: The Bridge Between Today and Tomorrow's Web

Future of Web Apps 2014 (London + Boston)

B56bb22b3a4b83c6b534b4c114671380?s=128

Todd Motto

September 30, 2014
Tweet

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)
  3. None
  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>
  11. None
  12. None
  13. Where are we now?

  14. None
  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