Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev

  • View
    97

  • Download
    0

Embed Size (px)

Text of Angular 2 webinar: The tools you need to convert to Angular 2.0 with Yuri Takhteyev

  1. 1. ANGULAR 2.0 CTO, Rangle.io Yuri Takhteyev Some rights reserved - Creative Commons 2.0 by-sa SURVIVE THE TRANSITION
  2. 2. Whats Angular 2, Anyway?
  3. 3. A new front end framework inspired by Angular 1.x. And by other things also. Now in alpha. What is Angular 2? Image by mtaphotos
  4. 4. The Context Angular 1.x and its challenges. Components: Web components, React JS. Reactive programming: ReactJS, Flux, FRP. ES6 classes + annotations. Strong typing: TypeScript, Flow. ES6 modules.
  5. 5. View Binding
  6. 6. What Angular 1.x Gave Us A view binding system. Modules with DI. Utilities.
  7. 7. Angular 1s View Binding Declarative. Separation between templates and code. Two-way data binding. Stateful. Using nested $scopes.
  8. 8. Alternative: Components ReactJS. Web components. Doable with controller as and isolated directives. Business logic goes into services.
  9. 9. Alternative: Unidirectional Flow ReactJS: better performance, procedural, merges HTML and code. Flux: easier to reason about complex data ow. Key idea: events instead of state. Perhaps even better: FRP.
  10. 10. What Angular 2 Promises Still very declarative. 3 types of directives: components, decorators, templates. Better support for unidirectional data ow. Three models: stateful, reactive, immutable. Componentized: no more $digest cycle. Controllers folded into components.
  11. 11. An Angular 2 Template Hello.
  12. 12. Angular 2 Template Login
  13. 13. Angular 2 Template
  14. 14. Classes + Decorators
  15. 15. ES6 Classes class Widget { name; constructor() { name = 'No name'; } setName(newName) { name = newName; } getName() { return name; } } Those are maximally minimal classes.
  16. 16. Classes in Angular 2 Components are classes (a bit like controller as). Services are classes.
  17. 17. Component as a Class class LoginFormComponent { constructor() { } validate(field, value) { this[field] = value; this.inputIsValid = (!!this.username && !!this.password); } authenticate(username, password) { // tbd } }
  18. 18. Component Template Enter username:
    Password:
    Login
  19. 19. Decorators in ES5 LoginFormComponent.annotate = [ new Component({ selector: 'acme-login-form' }), new View({ templateUrl: 'authenticate.html', }) ];
  20. 20. In AtScript / TypeScript / ES7* @Component({ selector: 'acme-login-form' }) @View({ templateUrl: 'authenticate.html', }) class LoginFormComponent { ... }
  21. 21. TypeScript
  22. 22. Types class LoginFormComponent { name: string; inputIsValid: boolean; username: string; password: string; ... validate(field:string, value:string) { ... } A bit closer to real classes.
  23. 23. Types and DI constructor(someService: SomeService) { ... }
  24. 24. @Injectable @Injectable class SomeService { name; constructor() {} setName(newName) { this.name = newName; } getName() { return this.name; } }
  25. 25. Modules
  26. 26. Angular 1.x ES5 has no modules. Angular 1s modules do not provide much isolation. Alternative: CommonJS (easy but synchronous only). Alternative: AMD (asynchronous but complicated). Neither really solves Angular 1s module problem.
  27. 27. Going Forward ES6 introduces the concept of module. Easy. Asynchronous when you want it to be. Angular 2 is leveraging it. Use SystemJS to load ES6 modules today. TypeScript introduces a few quirks.
  28. 28. Using ES6 Modules import {Injectable} from 'angular2/di'; import {Component, View} from angular2/angular2'; ... export {SomeService, SomeOtherService};
  29. 29. Trying Angular 2
  30. 30. Playground Projects https://github.com/SekibOmazic/angular2-playground (elaborate, but uses Traceur) https://github.com/angular/ts-quickstart (uses TypeScript, but very bare)
  31. 31. Docs https://angular.io/ (not much there yet) https://www.youtube.com/user/ngconfvideos https://angularu.com/ng/session http://bit.ly/ngdocs (design docs, go here to deep-dive)
  32. 32. But What Do We Do Now?
  33. 33. Get Started on ES6 or TypeScript Babel or Traceur are easiest to get started with. TypeScript is what youll probably end up using eventually. ES5 ES6, so your code is already ES6. Write your controllers and services as ES6 classes.
  34. 34. ES5 Controller angular.module('myapp') .controller(['authService', function(authService) { var vm = this; vm.authenticate = function(username, password) { authService.authenticate(username, password) .then(function() { // do something }); }; }]);
  35. 35. ES6 Controller angular.module('myapp') .controller(['authService', class LoginFormComponent { constructor(authService) { this.authService = authService; } authenticate(username, password) { this.authService.authenticate(username, password) .then(() => /* do something */); } }]); Learn about arrow functions (and this).
  36. 36. Consider Modules Too export class LoginFormComponent { constructor(authService) { this.authService = authService; } authenticate(username, password) { this.authService.authenticate(username, password) .then(() => /* do something */); } }
  37. 37. Importing import {LoginFormComponent} from 'some/path'; angular.module('myapp') .controller(['authService', LoginFormComponent]);
  38. 38. Modules vs Injected Services Not everything needs to be a service. Some code can be just imported. Services are singletons. Services are stateful. (Not always a good thing.) Services are congurable. (Often useful.)
  39. 39. Your Tooling May Need to Change Gulp is still the tool of choice. Just serving a folder wont do it. Concatenating transpiled modules is a bit of a pain. JSPM is probably the way to go. The next version of TypeScript should make things easier. Well have a blog post on all of this soon. http://blog.rangle.io/
  40. 40. Unit Testing A topic strangely missing from Angular 2 discussion. You want to make sure you can migrate your tests too! But even getting tests to run at all is a bit of an adventure. But well have a blog post on this soon!
  41. 41. Decorator Libraries Libraries can give you @Component, @View, etc. But why? Just so that your code looks like Angular 2? More important to focus on architectural alignment. We are using our own implementation of @Inject, but generate components with makeComponent().
  42. 42. Organize Your Code as Components Image by the Angular team.
  43. 43. Linking Components Minion components: not aware of your app. Master components: hook into the rest of your app. Leutenant components: in between.
  44. 44. Minion Component Parent Child Property Changes Events Maximize your use of minions. Property Changes
  45. 45. Master Components Component Use master components sparingly. Update events Action events Services Services
  46. 46. Leutenant" Component Parent Child Property Changes Action events
  47. 47. Flux Architecture Component Dispatcher Action Store API, etc. Component
  48. 48. Writing Components Today Use isolated directives with Controller as If your controller is written as an ES6 class, you are getting close to Angular 2 controllers.
  49. 49. ES5 Controller As Directive .directive('acme-user', function () { return { restrict: 'E', scope: { nextName: '@' }, bindToController: true, template: ...', controllerAs: vm', controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; } } }; });
  50. 50. ES5 Controller As Directive controller: function() { var vm = this; vm.name = 'Alice'; vm.change = function() { vm.name = vm.nextName; } },
  51. 51. ES6 controller: class AcmeUserComponent { constructor() { this.name = 'Alice'; } change() { this.name = this.nextName; } }
  52. 52. Implementing Flux Streams RxJS or Bacon.JS ImmutableJS. In Angular 2, use of reactive / immutable architecture will also speed things up.
  53. 53. Learning More Our blog: http://blog.rangle.io/ Rangle.io Angular Transition Training: 2 or 5 days. http://rangle.io/javascript-training.html
  54. 54. Kudos This has been a group eort. Special thanks to Igor Krivanov, Varun Vachhar, Cosmin Bucur, Christine Davis, Brian Olynyk, Evan Schultz, Neil Fenton, Bertrand Karerangabo.
  55. 55. THANK YOU! Yuri Takhteyev @rangleio, @qaramazov rangle, yuri CTO, Rangle.io http://blog.rangle.io/