Echte Cross-Plattform-Anwendungen mit Angular, TypeScript & Co. – für alles & jeden

Der Traum von einer einzigen Code-Basis für alle Client-Plattformen: er lebt immer noch. In diesem Workshop zeigt Ihnen Christian Weyer wie weit dieser Traum Wirklichkeit werden kann mit HTML5, JavaScript/TypeScript und aktuellen Cross-Plattform-Werkzeugen. Auf Basis moderner UI/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – teilweise sogar mit einer Code-Basis. Mischt man diesen Ansatz mit Tools wie Cordova und Electron, so kann man mit Single Page Applications (SPA) Frameworks wie Googles Angular echte Anwendungen für alle relevanten Plattformen und Device-Größen bauen, Mobile wie Desktop: Windows, Linux, macOS, iOS, Android – und natürlich den Browser. Kommen Sie als .NET-Entwickler vorbei und sehen Sie all dies in Action!

Transcript

1. Echte Cross-Plattform-Anwendungen mit Angular, TypeScript & Co. – für alles & jeden Christian Weyer @christianweyer CTO & Principal Consultant
2. § 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) ASPInsider, AzureInsider § Google GDE for Web Technologies § christian.weyer@thinktecture.com § @christianweyer Christian Weyer
3. § Modern business applications § The Web: HTML5, CSS, {*}Script as a base § Angular: Smart client framework for the browser § Cordova: building mobile apps § Electron: creating desktop applications Topics
4. § https://github.com/thinktecture/dotnetsummit-2017-crossplatform Workshop repository
5. Modern business applications
6. Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4
7. Single-platform vs. multi-platform vs- cross-platform
9. § Modern lifestyle, modern way of working § Data and processes need to be mobile, not just the devices we use § Reach is important § Boundaries are blurring – and will vanish § User experience will become an even more important part of software development § Facing new challenges § Building UIs with one technology approach § But optimized for certain platforms and/or form factors “Mobile-First”
10. It’s a feature But that doesn’t look like a native application! Exactly.
11. Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
12. § Service-based architectures § Web / REST APIs § Use any platform server-side § Express or Restify § Jersey § ASP.NET Web API § Push Services § socket.io § SignalR § Consider Offline-first § Heavily influences your architecture and entire project Target architecture HTTP HTTPS WebSocket Service A Service B Service C Web APIs (ASP.NET, Node.js, …) HTML5-Application (Single-Page Application) Web Cordova Electron
13. The web as a platform
14. § Web browser & HTML5 as a powerful platform § JavaScript & TypeScript as application programming languages § Angular as smart client application framework – or React, or… § Flexible layouts with CSS3 & flexbox Real applications
15. § Client-side single page applications (SPA) § Features § Consequently component-driven § Metadata-driven § Tooling ecosystem § Focus on proven pattern and separation of concerns § Components, views, view models § Services and dependency injection Component-based applications with Angular
16. Web & native platforms
17. § Toolkit and framework for building native application shells for our web apps § Make ‘app apps’ from ‘web apps’ J § Uses native web view components to host the original web app locally § Provides framework and APIs via plugins to interact with underlying native platforms § CLI tools for automating project creation & build § We always need the native SDKs (e.g. iOS, Android, Windows) Mobile apps with Cordova JS HTML CSS Native wrapper Deploy to devices
18. Cordova architecture Mobile OS iOS Android Windows 10 UWP many more Cordova Application Cordova Plugins Geolocation Notifications Contacts Media Camera Custom Plugins HTML Rendering Engine (WebView) Single Page App HTML JS CSS Assets config.xml HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs
19. Cordova platform support Android Blackberry 10 iOS Windows Phone 8 Windows (8.1 / 10, Phone 8.1) Cordova CLI MacOS, Windows, Linux MacOS, Windows, Linux MacOS Windows a Embedded WebView a x a x x Plugin Interface a a a a a
20. § Create real desktop applications from web apps § Similar to Cordova’s base idea § Target Windows desktop, macOS, and Linux § Marriage of Chromium and node.js § Independent of installed browsers on target machines § Does not need native SDKs to build final artifact § Access to native platform features § Electron API § Node modules ecosystem § Auto-updating and platform deployment Desktop applications with Electron
21. Electron architecture Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.JS) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.JS modules IPC Remote Node.JS
22. § Build automation is important for effective development, testing and deployment § Gulp has been king for years § Large community § Lot of online resources § Many project experience § Webpack gains a lot of traction § Angular CLI is based on Webpack Build process
23. “Write once, run anywhere?”
24. § Angular § https://angular.io § https://angular.io/docs/ts/latest/ guide/architecture.html § Bootstrap § http://getbootstrap.com/ § WinJS § http://try.buildwinjs.com/#angular § Material § https://material.angularjs.org § Cordova § http://cordova.apache.org/ § Electron § http://electron.atom.io/ § https://github.com/electron/electron- api-demos § Gulp § http://gulpjs.com/ § Webpack § https://webpack.github.io/ § Angular CLI § https://cli.angular.io/ Resources