Komponentenorientierte Webanwendungen mit Angular

Mit Angular als Webanwendungsframework lassen sich komponentenorientierte Anwendungen entwickeln, wie wir es von Windows- und desktopähnlichen Programmiermustern bereits kennen. Dank Microsofts TypeScript als Programmiersprache, die Features wie async/await mit sich bringt, fühlen sich .NET-Entwickler schnell in der Webwelt wohl. In dieser Session zeigt Christian Liebel von Thinktecture, wie mit dem Open-Source-Framework für Single-Page Applications (SPA) von Google echte Cross-Plattform-Businessanwendungen entwickelt werden können und dabei das Web als zukunftsfähige Anwendungsplattform nutzt.

Transcript

1. Christian Liebel @chris_liebel Thinktecture AG Komponentenbasierte Webanwendungen mit Angular BASTA! 2018
2. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Raum Pragmatische Microservices-Architekturen mit ASP.NET Web-APIs, SignalR und Co. Christian Weyer DI, 20. Februar 2018, 10.30 bis 11.30 Ballsaal 2 Serverless Backends: Diät ohne Jojo-Effekt – mit Azure Functions Rainer Stropek DI, 20. Februar 2018, 11.45 bis 12.45 Ballsaal 2 Komponentenbasierte Webanwendungen mit Angular Christian Liebel DI, 20. Februar 2018, 14.15 bis 15.15 Ballsaal 2 Mehr als nur Web: Cross-Plattform-Anwendungen mit Angular, Electron und Cordova Fabian Gosebrink DI, 20. Februar 2018, 15.30 bis 16.30 Ballsaal 2 Progressive Web Apps mit Angular: das Web wird nativ(er) Christian Liebel DI, 20. Februar 2018, 17.15 bis 18.15 Ballsaal 2
3. Hello, it’s me. Christian Liebel Follow me: @chris_liebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud BASTA! 2018 Komponentenbasierte Webanwendungen mit Angular
4. Was Euch erwartet • Übersicht Angular • Übersicht Cordova & Electron • Cross-Plattform • Live-Coding Was Euch nicht erwartet • Deep Dive der einzelnen Themen Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Komponentenbasierte Webanwendungen mit Angular
5. Cross-Platform Angular Cordova Electron Progressive Web Apps Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Talking Points
6. Gotta catch’em all! Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Cross-Platform
7. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Single- vs. Multi- vs. Cross-Platform macOS Linux Windows iOS Windows Phone Android BlackBerry 10 FireOS Browser TV … Chromebook
8. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018
9. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 The web as a platform
10. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 But it doesn’t look like a native application! Exactly.
11. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
12. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
13. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Powered by
14. • Lightweight service-based architecture • Functional services with dedicated interfaces • Use other services, like database or file system • (JSON-based) Web APIs • Secured by tokens • Consumable by every HTTPS speaking client • Application push services via WebSocket • SignalR • Socket.io Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Architecture HTTP HTTPS WebSocket Service A Service B Service C Web APIs (ASP.NET, Node.js, …) HTML5-Application (Single-Page Application) Web Cordova Electron
15. Single-Page Applications Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Angular
16. • Designed by Andres Hejlsberg, who also designed C# • Typed superset of JavaScript that transpiles to plain JavaScript • Types are optional, but useful metadata for tooling • Static Code Analysis • Refactoring • Linting • IntelliSense Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 TypeScript
17. • Angular 2, 4, 5?! Just Angular! Semantic versioning, just like Google Chrome • Angular Universal: Client- and server-side-rendering possibilities • MV* architecture • Components, Views, View Models • Modules, Services, Dependency Injection • Data binding, Routing, HTTP, Animations, Unit-testable • First class IDE support • JetBrains WebStorm • Visual Studio Code • Build tooling via Angular CLI Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Angular Overview
18. Classes with metadata and a view-defining template. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Components, Components, Components, … @Component({ selector: 'hackathon-form', templateUrl: 'hackathonForm.html' }) export class HackathonFormComponent { @Input() public hackathon: HackathonModel; @Output() public onSubmitted: EventEmitter<HackathonModel>; } … <hackathon-form [hackathon]="currentHackathon" (onSubmitted)="saveHackathon($event)" ></hackathon-form> …
19. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Data flow Parent -> Child Application Hackathons Users Hackathon Hackathon [hackathons]=“someExp” [hackathon]=“someExp” Child-> Parent Application Hackathons Users Hackathon Hackathon (rate)=“onRate()” (rate)=“onRate()” via @Input() via @Output()
20. Native mobile applications Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Cordova
21. • Native application shell with integrated web browser • Android: Android specific browser / CrossWalk • iOS: UIWebView / WKWebView • Windows Mobile: Internet Explorer / Edge • HTML5 app is hosted within an integrated web browser • Provides access to the underlying native platforms via plugins • Native SDKs to build the apps are needed Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Cordova
22. Native desktop applications Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Electron
23. • Allows creation of real desktop application (.exe, .app) • Combines a full-blown Chromium browser with Node.js • Does not rely on the target machine’s installed browsers • No need to install native SDKs for building • Access native platform APIs • Electron API • Node.js modules • Advanced features like auto updates & crash reporter Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Electron
24. Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 BASTA! Spring 2017 macOS iOS Windows Mobile Android Windows Desktop Windows 10/UWP Linux Browser
25. The Application Model of The Future Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Progressive Web Apps
26. • Basic idea: Get rid of App Stores! • Bring native experience directly to the browser • Platform push services • Offline • Installable • Initiate led by Google since 2015 • PWA is not a technology but a collection of characteristics • Backwards compatible Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Overview Check out m y talk Ballsaal 2 - 17:30
27. • Modern business applications need a modern architecture • Leverage the web technology stack to make cross-platform reality • Build tooling supports daily development and production workflow • Cordova & Electron for native platform integrations as a “polyfill” • Progressive Web Apps as the next application model Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Summary
28. • Angular: https://angular.io • Apache Cordova: https://cordova.apache.org/ • Electron: http://electron.atom.io/ • Angular CLI: https://cli.angular.io/ • PWA: https://developers.google.com/web/progressive-web-apps/ Komponentenbasierte Webanwendungen mit Angular BASTA! 2018 Resources
29. Thank you! Questions? @chris_liebel christian.liebel@thinktecture.com