HTML5 überall: auf Mobile, Desktop, TV & Co. – am Beispiel Angular

Das HTML5 Single-Page Application (SPA) Framework Angular von Google hat sich neben React als einer der Hauptprotagonisten für die Entwicklung moderner web-basierter Applikationen etabliert – nicht zuletzt durch die Nutzung von Microsofts TypeScript. In dieser Session zeigt Christian Weyer, dass Angular aber nicht nur ein Framework für den Browser ist, sondern eine mächtige Plattform darstellt. So können wir durch die Nutzung von GitHubs Electron echte Desktopanwendungen mit nativer Integration für alle relevanten Betriebssysteme entwickeln. Apache Cordova ermöglicht uns, auf dem gleichen Basiscode, auch noch hybride mobile Apps zu programmieren und zu deployen – bis hin zur Xbox und diversen TV-Systemen. Ein leichter Hauch von "Write once, run anywhere" ist zu spüren. Wer jedoch einen Tick näher an der nativen mobilen UI sein möchte, dem kann mit Ionic geholfen werden. Und, last but not least, steht mit NativeScript sogar ein Toolkit zur Verfügung, mit dem man echte native Apps für iOS und Android entwickeln kann. Und immer sorgen TypeScript und Angular als starkes Duo für das Fundament.

Transcript

1. HTML5 überall: auf Mobile, Desktop, TV & Co. – am Beispiel Angular Christian Weyer @christianweyer CTO & Principal Consultant
2. § Co-founder, co-owner & 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 Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 2
3. Modern business applications Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 3
4. § 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” Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 4
5. HTML5 überall: auf Mobile, Desktop, TV & Co. Am Beispiel Angular Cross-Platform & Cross-Device 5
6. The web as a platform Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 6
7. § 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 Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 7D
8. § Client-side single page applications (SPA) § Open source, bets heavily on TypeScript § Features § Consequently component-based § Metadata-driven § Focus on proven patterns and separation of concerns § Components, views, view models § Services and dependency injection § Large tooling ecosystem and platform tools available § Offering a spectrum of possibilities Component-based applications with Angular Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 8D
9. § NativeScript provides real native components § No DOM to manipulate § No HTML elements styled like native components § Has its own markup language § TypeScript/JavaScript has 100% access to native APIs § Integrates with Angular § Comes with its own CLI § Optimized for smartphone form factors § Available for iOS, Android Real native mobile apps Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 9D
10. § Ionic is based on Angular § Extends HTML vocabulary § UI component library using components, directives and services § Native-focused, but hybrid § Modeled off of native SDKs § Based on Cordova § Comes with its own CLI § Primarily optimized for smartphone form factors § Available for iOS, Android, Windows 10 Optimized hybrid mobile apps Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 10D
11. “Write once, run anywhere?” Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 11 1
12. Mobile! Mobile! Mobile!? https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 12
13. It’s a feature But that doesn’t look like a native application! Exactly. Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 13
14. 14 Angular 2: Komponentenbasierte HTML5-Anwendungen BASTA! Spring 2017 https://spotifyblogcom.files.wordpress.com/2014/12/overview.png 14
15. § 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) Hybrid mobile apps with Cordova JS HTML CSS Native wrapper Deploy to devices Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 15
16. 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 Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 16D
17. § Create desktop applications from web apps § Hybrid approach, similar to Cordova § 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 available Desktop applications with Electron Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 17D
18. § Just because… J § Native TV support, e.g. § Samsung TOAST platform: integrated with Cordova § Set-Top boxes / game consoles, e.g. § FireTV Web Apps § XBox via Cordova UWP § But: UX is fundamentally different! § “10 feet experience” is key for successful TV applications, no matter what technology used And what about… TVs? Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 18
19. Summary Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 19
20. § Real cross-platform with Web-based technologies § SPA frameworks like Angular enable Java, .NET etc. developers to quickly move into the new world § Angular (plus a broad range of tools) enable spectrum of client application shapes § Purely web § Purely native § Hybrid, optimized for mobile § Hybrid, for web, desktop and mobile § … and yes: even TVs J § Maybe we will no longer need Cordova, Electron et. al. in the future? Summary Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 20
21. § Demo Application § https://github.com/thinktecture/xpc-2017-cross-platform-demo § Angular § https://angular.io/ § NativeScript § https://www.nativescript.org/ § Ionic § https://ionicframework.com/ § Apache Cordova § https://cordova.apache.org/ § Github Electron § https://electron.atom.io/ § Samsung TOAST § http://developer.samsung.com/tv/develop/extension-libraries/toast/ Resources Am Beispiel Angular HTML5 überall: auf Mobile, Desktop, TV & Co. 21
22. § Apache Cordova und PhoneGap nähern sich dem W3C an • https://www.heise.de/developer/meldung/Apache-Cordova-und-PhoneGap- naehern-sich-dem-W3C-an-3730394.html HTML5 überall: auf Mobile, Desktop, TV & Co. Am Beispiel Angular Resources 22