Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS: The Bridge Between Today and Tomorro...

Todd Motto
September 30, 2014

AngularJS: The Bridge Between Today and Tomorrow's Web

Future of Web Apps 2014 (London + Boston)

Todd Motto

September 30, 2014
Tweet

More Decks by Todd Motto

Other Decks in Programming

Transcript

  1. • @toddmotto • GDE • Lead engineer @ Mozio •

    Google, Intel, Rolling Stone • Open source (ngStyleguide, conditionizr)
  2. The story • Yesterday, where we came from • Tomorrow,

    where we’re headed • Today, what’s available • Angular future thinking/mappings • Angular today • Angular tomorrow
  3. <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>
  4. • <video>, <audio> • WebGL,<canvas> • getUserMedia • ServiceWorker •

    Geolocation (kinda) • Fullscreen API • WebSockets
  5. • local and session storage • History API • Indexed

    DB • Web SQL (kinda) • Native form validation (required, email etc) • FormData • Dataset (custom data-*)
  6. • HTML5 semantics • File/FileReader API • classList API •

    Drag and drop • postMessage • contenteditable
  7. 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)
  8. Incoming... • Web Components (HTML5) • Object.observe (ES7) [deprecated] •

    Native Promises (ES6) • Modules (ES6) • Classes (ES6)
  9. 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>
  10. 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>
  11. 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); }); });
  12. 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" });
  13. 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);
  14. ES6: Classes class ExampleController { constructor() { this.model = {

    name: '', power: '' }; this.heros= []; } add(hero) { this.heros.push(hero); } }
  15. 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);
  16. Angular: HTML Imports function googleMap () { return { scope:

    {}, bindToController: { longitude: '=', latitude: '=' }, templateUrl: '../google-map.html' }; } angular .module('app') .directive('googleMap', googleMap);
  17. Angular: $scope.$watch function MainCtrl ($scope) { $scope.model = {}; //

    Object $scope.$watch('model', function (newVal, oldVal) { // newVal and oldVal }); } angular .module('app') .controller('MainCtrl', MainCtrl);
  18. Angular: Dependency Injection function MainCtrl ($scope, $rootScope) { // use

    $scope and $rootScope } angular .module('app') .controller('MainCtrl', MainCtrl);
  19. 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>
  20. 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 -->
  21. 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);
  22. 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 -->
  23. Angular 2: ES6 + TypeScript import {Component} from 'angular2/core'; @Component({

    selector: 'my-app', template: '<h1>Hello world!</h1>' }) export class AppComponent {}
  24. 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>
  25. 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); } }
  26. Angular 2: Preparing • Use controllerAs and bindToController • Use

    new component() method • Integrate ES6 and/or TypeScript • ngForward and ngUpgrade
  27. 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!