Angular 2 & das moderne Web: Komponenten-orientierte HTML5-Anwendungen

Transcript

1. Christian Weyer | Thinktecture AG Angular 2 & das moderne Web Komponenten-orientierte HTML5-Anwendungen
2. Christian Weyer • Co-founder, co-owner and principal consultant at Thinktecture AG • Focus on – Mobile & web-based application architectures – Interoperability, cross-device – Pragmatic end-to-end solutions • Microsoft MVP for ASP.NET (Architecture) ASP.NET Web API / vNext Advisory Board Member ASPInsider, AzureInsider • Google GDE for AngularJS • http://blogs.thinktecture.com/cweyer christian.weyer@thinktecture.com @christianweyer 2
3. Talking Points • Web Today, Web Tomorrow • Web Components • Angular 2 – Motivation – Concepts – Migration / Interop • Demo 3
4. The Web back then… • Web Sites • Cool Web Sites of the day • Home Pages • Animated GIFs • Web rings • Notepad • Frontpage • Java Applets 4
5. Issues with Web (Application) Programming Today • “That” language • Cumbersome code • Lack of coding standards • Globals & CSS all over the place • No modularity, encapsulation (provided by the browsers) • No real application semantics 5
6. Web Components 6
7. Why? • HTML (Markup & DOM) stagnated – No real concept of components • We need a standardized set of APIs to build components – UI – “Face-less” • Declarative and imperative programming models to produce & consume components 7
13. Pillars of Web Components • Custom elements • Shadow DOM • HTML templates • HTML imports 13
14. Pillars of Web Components • Custom elements • Shadow DOM • HTML templates • HTML imports 14
15. Custom Elements 15
16. Custom Elements • Define new HTML/DOM elements – Can have an API • Create elements that extend from other elements • Logically bundle together custom functionality into a single tag • Extend API of existing DOM elements 16
17. Shadow DOM • Ability to encapsulate custom elements – Do not leak styling or scripts onto other parts • All markup and CSS are scoped to the host element – Styles defined inside shadow root won't affect parent document – Styles defined outside shadow root won't affect main page 17 Document Element (shadow host) Shadow root Contents
18. Browser Support 18
19. Web Components for Everyone • webcomponents.js polyfill • Some costs involved – Bandwith – Processing: Shadow DOM can be expensive 19
20. Angular 2 20
21. 2009 • Over 6 years ago… Angular was invented • A lot has happend • A lot has changed • A lot is going to change 21
22. 2015 • Web Standards have evolved • Web Components – No need for Angular‘s custom directive approach • Shadow DOM – No need for Angular‘s transclusion • ES6 modules – No need for Angular‘s modules 22
23. Goal: Overall Simplification • Angular 1.x has a steep learning curve • Many different concepts to grok – Controller – Factory – Service – Provider – Directive – Transclusion – Module – Scope 23
24. Angular 2: Components, Components, Comp… 24
25. TypeScript • Typed superset of JavaScript that compiles to plain JavaScript – Compiles to ES5 or ES6 • Preferred approach by the Angular team • Is not needed to build applications with Angular 2 • Types are optional – Pick and choose wisely 25
26. Transpilers & Loaders • Transpiler – JavaScript/TypeScript-to-JavaScript-of-today compiler that allows to use features from the future today – E.g. Traceur, Babel, tsc • Module loader – Load ES6 modules, AMD, CommonJS and global scripts in the browser (and NodeJS) – E.g. SystemJS 26
27. Angular 2 Components in TypeScript 27 @Component({ selector: 'my-app' }) @View({ template: '<h1>My First Angular 2 App</h1>' }) class AppComponent { }
28. Components in ES6 • Annotations can be provided by Traceur 28 var AppComponent = ng .Component({ selector: 'my-app' }) .View({ template: '<h1>My First Angular 2 App</h1>' }) .Class({ constructor: function () { } });
29. Components in ES5 29 var AppComponent = function () { }; AppComponent.annotations = [ new angular.ComponentAnnotation({ selector: 'my-app' }), new angular.ViewAnnotation({ template: '<h1>My …' }) ];
30. Component Annotations 30 @Component({ selector: 'my-app' }) @View({ template: '<h1>My First Angular 2 App</h1>' }) … <my-app></my-app>
31. Component Controller 31 class AppComponent { constructor() { } }
32. Services 32 class MyService { constructor() { } public GetMyData() {…} }
33. Bootstrapping an Application – ng 1 33 var app = angular.module('myApp', []); <body ng-app="myApp"> </body>
34. Bootstrapping an Application – ng 1 34 app.controller('AppController', function($scope) { $scope.title = 'My Super App'; }); <body ng-app="myApp"> <div ng-controller="AppController"> This app is called {{ title }} </div> </body>
35. Bootstrapping an Application – ng 2 35 @Component({ selector: 'my-app' }) @View({ template: '<div>This app is called {{ title }}</div>' }) class AppComponent { this.title = 'My super app'; } import {bootstrap} from 'angular'; import {AppComponent} from 'app'; bootstrap(AppComponent); <html> <body> <my-app></my-app> </body>
36. Data Flow & Component Public API • Data flows into a component via property bindings • Data flows out of a component via event bindings 36
37. Change Detection with Zones • In Angular 2 no need to call $scope.$apply • Magic resides inside Angular 2 library named zone.js • Overrides all standard browser APIs that are considered asynchronous • Injects its own implementation & uses it to monitor start and completion of any asynchronous activity 37
38. Template Syntax • Event bindings • Property bindings • Local variables 38
39. Template Syntax 39 @Component({ selector: 'name-change', }) @View({ templateUrl: 'name-change.html' }) class NameChange { constructor() { this.name = ''; } changeName(newName) { this.name = newName; } } <div> My name is {{ name }} </div> <div> <input #newname type="text"> <button (click)="changeName(newname.value)" [disabled]="newname.value == 'CW'"> Change Name </button> </div> <div> My name is {{ name }} </div> <div> <input #newname type="text"> <button on-click="changeName(newname.value)" bind-disabled="newname.value == 'CW'"> Change Name </button> </div>
40. Two-Way Bindings • One-time bindings by default – Simplification and performance • Two-way binding is syntactic sugar – ng-model uses combination of property and event binding 40
41. Two-Way Binding Explained 41 <input [value]="name"> <p>Hello {{name}}</p> <input [value]="name" (input)="name = $event.target.value"> <p>Hello {{name}}</p> <input [ng-model]="name" (ng-model)="name = $event"> <p>Hello {{name}}</p> <input [(ng-model)]="name"> <p>Hello {{name}}</p>
42. Component vs. Directive • A component is a directive with a view • Directives add behavior to a DOM element – Component can consist of directives 42 @Directive({ selector: '[x-large]' }) export class XLarge { constructor(public el: ElementRef) { this.el.nativeElement.style.fontSize = 'x-large'; } } <span x-large>Extra Large Text</span>
43. Dependency Injection • Pattern vs. Framework • Entirely new DI mechanism in Angular 2 – Explicitly register types with DI on component level – Inject via ctor 43
44. Routing • New component-based router • @RouteConfig decorartor • RouterOutlet to place component content in markup • RouterLink to link to other components 44
45. HTTP & Beyond • Angular 2 has a native HTTP service • Angular team plans to add sophisticated advanced features like – Caching – Offline – etc. • We can simply use any HTTP functionality – Like the Fetch feature in modern browsers 45
46. Build Process • In real projects we have a build process • Tools like gulp makes life easier – Transpilation – Concatenation – Minification – Release folder – and so on… • Angular 2 is agnostic to actual underlying build process 46
47. Angular 1 & Angular 2 47
48. „What about my Angular 1.x Code?“ • „What about my JavaScript code?“ – Don‘t marry to frameworks • „What about my .NET code?“ – Don‘t marry to frameworks • Adopt frameworks by using their features, not tying into the framework 48
49. AngularJS Patterns for Today • Thin controllers – Move logic into services or directives • Wrap data logic and manipulation in services – Do not tie to Angular-isms • Encapsulate UI in directives – No ng-controller – Your path to components and Angular 2 • Consider using ES6 or TypeScript today – Traceur, Babel 49
50. Interop and Migration • Nearly complete interoperability between Angular 1 & 2 • Team is working on ng-upgrade – Library that enables calling Angular 1 code from Angular 2 and vice versa • Using Component Router from Angular 1.5 can further easen the path 50
51. Summary • It is early, very early with Angular 2 (still Alpha) • Web Components as a standard not yet fully adopted • Angular 2 build heavily on the idea of Components • Angular 1.x is well & alive – Large projects are being built with it • Apply proven Angular 1.x patterns to have a ‚good‘ codebase – In preparation for a possible migration • Let‘s (re-)consider Angular 2 beginning of 2016… – New projects should really not use Alpha software  51
52. Resources • Angular 2 – https://github.com/angular/angular • The Core Concepts of Angular 2 – http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2 • Two Phases of Angular 2 Applications – http://victorsavkin.com/post/114168430846/two-phases-of-angular-2- applications • Adding zone.js to Angular 1.4 – https://oricalvo.wordpress.com/2015/06/27/adding-zone-js-to-angular-1-4/ • Angular 2 Template Syntax – http://victorsavkin.com/post/119943127151/angular-2-template-syntax • Angular 1 and Angular 2 integration: the path to seamless upgrade – http://angularjs.blogspot.com.es/2015/08/angular-1-and-angular-2- coexistence.html?m=1 52
53. Resources • WebComponents.org – http://webcomponents.org/ • Are We Componentized Yet? – http://jonrimmer.github.io/are-we-componentized-yet/ • Shadow DOM 101 – http://www.html5rocks.com/en/tutorials/webcomponents/sha dowdom/ • HTML Imports – http://www.html5rocks.com/en/tutorials/webcomponents/imp orts/ 53
54. Resources • christian.weyer@thinktecture.com • http://www.thinktecture.com • Thinktecture’s GitHub Repositories – https://github.com/thinktecture 54