Moderne Software-Entwicklung - Episode 2: Echte Cross-Plattform-Anwendungen

Transcript

1. Moderne Software-Entwicklung - Episode 2: Echte Cross-Plattform-Anwendungen 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 2
3. Modern business applications Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 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” Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 4
5. Moderne Software-Entwicklung - Episode 2 Echte Cross-Plattform-Anwendungen Cross-Plattform & Cross-Device 5
6. The web as a platform Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 7
8. § 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 8
9. § NativeScript provides real native components § No DOM to manipulate § No HTML elements styled like native components § No cross-compiling § 100% access to native APIs without writing bindings § TypeScript/JavaScript has 100% access to native APIs § Integrates with Angular § Comes with its own CLI § Primarily optimized for mobile smartphone form factors § Has its own markup language § iOS, Android Real native mobile apps Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 9
10. § Ionic is based on Angular § Extends HTML vocabulary § UI components using components, directives and services § Native-focused § Modeled off of native SDKs § Built to work with Cordova § Comes with its own CLI § Primarily optimized for mobile smartphone form factors § iOS, Android, Windows 10 Optimized hybrid mobile apps Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 10
11. “Write once, run anywhere?” Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 11
12. Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 12
13. It’s a feature But that doesn’t look like a native application! Exactly. Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 16
17. § 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 Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 17
18. Summary Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 18
19. § Future of client-side application development is most likely: the Web § SPA frameworks like Angular enable Java, .NET etc. developers to quickly move into the new world § Angular offers a broad range of tools to implement a spectrum of client application shapes § Purely web § Purely native § Hybrid, optimized for mobile § Hybrid, for web, desktop and mobile § Combine a microservices-based architecture with SPA GUIs – for the win! Summary Echte Cross-Plattform-Anwendungen Moderne Software-Entwicklung - Episode 2 19