Fit für die Zukunft: Das moderne Web & AngularJS 2

Das Web prescht unaufhaltsam nach vorne, egal, ob im Browser, auf mobilen Geräten oder auf dem Desktop - Webtechnologien werden immer mächtiger und fußen auf gemeinsam erarbeiteten Standards. Einer der wohl wichtigsten Meilensteine in diesem Bereich sind die Web Components. Auf der anderen Seite wird mit ECMAScript 6 (ES6) eine mächtige und moderne Sprache für Anwendungsentwickler zur Verfügung stehen. Christian Weyer zeigt Ihnen in dieser Session, wie Sie heute webbasierte Anwendungen schneiden und mit konkreten Patterns implementieren können, um sowohl für diese neuen Standards als auch für künftige Application-Frameworks wie AngularJS 2.0 gewappnet zu sein. Vor allem .NET-Entwickler sollten die Ohren spitzen.

Transcript

1. Christian Weyer Thinktecture AG Fit für die Zukunft Das moderne Web & AngularJS 2
2. Christian Weyer • Solution architect and principal consultant at Thinktecture AG • Focus on – Mobile & web-based application architectures – Interoperability, cross-device – Pragmatic end-to-end solutions – Windows Server, ASP.NET, Web API, SignalR, JavaScript, AngularJS, Microsoft Azure • Microsoft MVP for ASP.NET (Architecture) • ASP.NET Web API / vNext Advisory Board Member • ASPInsider • AzureInsider • http://blogs.thinktecture.com/cweyer • christian.weyer@thinktecture.com • @christianweyer 2
3. Agenda • Web Today • Web Tomorrow (possibly) • ECMAScript 6 • Web Components • Angular 2 • HTTP/2 • Service Workers 3
4. The Web Today 4
5. Web 2.5 • HTML5 • JavaScript patterns • Web applications • Application frameworks: AngularJS & Co. • No Flash (?) • No Silverlight (?) 5
6. Web Today - as in “Web-based Applications” • Fully-fledged applications, not just web sites • Using web technologies to build “apps” – For the browser – For the desktop – For mobile devices 6
7. Issues with Web (Application) Programming • “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 – UX – Smart clients 7
8. Easy! 8 http://com.jakearchibald.s3.amazonaws.com/posts/using-serviceworker-today/cool-shit.320727ccd5a8.png
9. 9 Hey, did you see that [awesome-JavaScript- framework-of-the-day]? Erm… nope. Dude – it‘s soooooo cool!
10. Well – let‘s have a look at how the future may look like... 10
11. The Face UI & UX 11
12. Why? • We want applications, not web sites • UX is a very important success factor today • Mobile-first as a starting point 12
13. Today’s UI de-facto Standard 13
14. More Application-like UIs 14
15. The Tongue Languages 15
16. ECMAScript 6 16
17. Why? • JavaScript needs to take the next step • More OO wanted • More modern features for complex applications wanted • CoffeeScript sits in a niche • TypeScript is great – but not (yet?) a standard 17
18. Selected Language Features • Modules (syntax and loader) • Classes • Arrow functions • Promises 18
19. Classes class Actor extends Person { constructor(options) { this.firstName = options.fistName; this.middleNames = options.middleNames; this.lastName = options.lastName; } fullname() { var middle = middleNames.join(' '); return this.firstName + middle + this.lastName; } act() { console.log('Now acting: ' this.fullname()); super.act(); } static cw() { return new Person({ firstName: 'Christian', lastName: 'Weyer'}); } } 19
20. Arrow functions • ES5: people.map(function (person) { return person.age; })); • ES6: people.map(person => person.age); 20
21. Promises - Consuming • Callback style 21 fs.readFile('config.json', function (error, text) { if (error) { console.error('Error while reading config file'); } else { try { var obj = JSON.parse(text); console.log(JSON.stringify(obj, null, 4)); } catch (e) { console.error('Invalid JSON in file'); } } });
22. Promises - Consuming • ES6 22 readFileAsync('config.json') .then(function (text) { var obj = JSON.parse(text); console.log(JSON.stringify(obj, null, 4)); }) .catch(function (reason) { // File read error or JSON SyntaxError console.error('An error occurred', reason); });
23. Promises – Producing 23 function httpGet(url) { return new Promise( function (resolve, reject) { var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (this.status === 200) { // Success resolve(this.response); } else { // Something went wrong (404 etc.) reject(new Error(this.statusText)); } } request.onerror = function () { reject(new Error( 'XMLHttpRequest Error: ‚ + this.statusText)); }; request.open('GET', url); request.send(); }); }
24. Promises – Producing 24 httpGet('http://example.com/file.txt') .then( function (value) { console.log('Contents: ' + value); }, function (reason) { console.error('Something went wrong', reason); });
25. 25 http://kangax.github.io/compat-table/es6/
26. Using ES6 Today • Compilers/Transpilers – Traceur – Babel (aka 6to5) • Polyfill for module loader – ES6 Module Loader • Dynamic module loaders – SystemJS • Package Management – jspm 26
27. The Bones Components 27
28. Web Components 28
29. 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 29
35. Pillars of Web Components • Custom elements • Shadow DOM • HTML templates • HTML imports 35
36. Custom Elements 36
37. 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 37
38. 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 38 Document Element (shadow host) Shadow root Contents
39. Browser Support 39 http://jonrimmer.github.io/are-we-componentized-yet/
40. Web Components for Everyone • webcomponents.js polyfill • Some costs involved – Bandwith – Processing: Shadow DOM can be expensive 40
41. Polymer • Make Web Components easier • Provide a set of common basic and application-related components – Set of polyfills – Web application framework – Set of UI components • Extra library to download and integrate 41
42. The Brain & Nerves Application Frameworks 42
43. AngularJS 2 43
44. Why? • Application semantics, not just a language, APIs and a component model – SPAs – Modularity, Dependency Injection – Routing – Caching, Offline • Frameworks like Angular need to adopt to the new, evolving Web – Add to what browsers can do, not replicate it – Browsers can do more things, so Angular has to do different things 44
45. Caution: Angular 2 is Work in Progress! 45
46. Things are Evolving • Angular 1.x code base dates back to 2009 • Angular 1.x has various concepts – Each with its learning curve • Directives are Web Components‘ ancestor • Shadow DOM replaces transclusion • ES6 modules supersede Angular modules 46
47. AtScript • Not a language • Provides syntactic sugar on top of ES6 for meta-data annotations • Standards proposal being worked on • Orthogonal to Angular 47
48. Components Declaration 48 @Component({ selector: 'todo-app', template: new TemplateConfig({ url: '/todo-app.html' }) }) class TodoApp { todos; constructor() { this.todos = ['Item1', 'Item2']; } }
49. Components Usage 49 … <body> <todo-app> … </todo-app>
50. Today for tomorrow Strategies & Patterns 50
51. „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 51
52. Guidance & Tools • Angular team plans to provide migration path – Guidance, samples – Tools support 52
53. 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 • Use ES6 today – Traceur, Babel 53
54. The Backbone Protocols & APIs 54
55. HTTP/2 55
56. Why? • HTTP was halted in evolution for 16 years • Speed, optimizations for the modern Web 56
57. HTTP/2 in One Slide • One TCP connection • Request -> Stream – Streams are multiplexed – Streams are prioritized • Binary framing layer – Prioritization – Flow control – Server push • Header compression 57
58. Service Workers 58
59. Why? • Browser-based applications need to perform work “outside the browser” • Rich offline experiences • Periodic background sync • Push notifications • … and more native-like functionality 59
60. Service Workers • JavaScript Workers • Implement Lifecycle with events • Browser support to question – Especially on mobile platforms 60
61. So – what does it all mean to you? 61
62. Summary • Keep calm  • Web technologies & browsers will evolve even more – More native-like features – Better programming models • Real cross-platform dev will become more like classic desktop dev – Components & tools support • Angular 1 is here & mature • Other frameworks & architecture styles around – Like Flux & React • Google is strong, but Microsoft has embraced the Web technologies 62
63. Resources • Bootstrap – http://getbootstrap.com/ • WinJS – https://dev.windows.com/en-us/develop/winjs • Material Design – http://www.google.de/design/spec/material- design/introduction.html – https://material.angularjs.org/#/ 63
64. Resources • ECMAScript 6 – http://wiki.ecmascript.org/doku.php?id=harmony:s pecification_drafts – https://github.com/lukehoban/es6features#readme • ES6 Promises – http://www.2ality.com/2014/10/es6-promises- api.html • ECMAScript compatability table – http://kangax.github.io/compat-table/es6/ 64
65. 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/ 65
66. Resources • Web Components Gallery – http://customelements.io/ • Google Web Components – https://googlewebcomponents.github.io/ 66
67. Resources • AtScript Primer – https://docs.google.com/document/d/11YUzC- 1d0V1- Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit • Angular 2 Repository – https://github.com/angular/angular • Change Detection in Angular 2 – http://victorsavkin.com/post/110170125256/chang e-detection-in-angular-2 67
68. Resources • HTTP/2 – https://www.mnot.net/talks/pdf/http2-op-perf.pdf • Service Workers – https://slightlyoff.github.io/ServiceWorker/spec/ser vice_worker/ – https://developer.mozilla.org/en- US/docs/Web/API/ServiceWorker_API – https://jakearchibald.github.io/isserviceworkerread y/ 68
69. Resources • christian.weyer@thinktecture.com • http://www.thinktecture.com • Thinktecture’s GitHub Repositories – https://github.com/thinktecture 69