Echtes Cross-Plattform mit HTML5 & JavaScript Anwendungen für Browser, Desktop & Mobile

In dieser Session zeigt Ihnen Christian Weyer, wie weit dieser Traum Wirklichkeit werden kann mit HTML5/JavaScript und Cross-Plattform-Werkzeugen. Auf Basis moderner UI/UX-Konzepte lassen sich Oberflächen für Desktops, Tablets und Smartphones entwerfen – mit einer Code-Basis. Mischt man diesen Ansatz mit Tools wie Cordova, nw.js & Electron, so kann man mit SPA-Frameworks wie AngularJS echte Anwendungen für alle relevanten Plattformen und Device-Größen bauen: Windows, Linux, MacOS, iOS, Android & Co. – und natürlich den Browser.

Transcript

1. Echtes Cross-Plattform mit HTML5 & JavaScript Anwendungen für Browser, Desktop & Mobile Christian Weyer Thinktecture AG @christianweyer
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 ASP.NET (Architecture) ASPInsider, AzureInsider Google GDE Web Technologies christian.weyer@thinktecture.com @christianweyer http://blogs.thinktecture.com/cweyer Christian Weyer 2
3. Modern business applications – real cross-platform Lightweight target architecture HTML5, CSS, JavaScript as a base foundation AngularJS as a smart client framework Cordova for mobile apps nw.js & Electron for desktop applications Talking Points 3
4. Modern (Business) Applications Modern == today for tomorrow 4
5. Cross Platform 5
6. Today: focus on mobile devices & apps But what is mobile-first, anyway? Mobile lifestyle & work Data & processes travel Reach We need UX & technologies to implement the Continuous Screen Adaptive user interfaces with optimized user experience Ideally, with one code base & target architecture Mobile-first 6 D
7. „Write once, run anywhere – v2“ ? 7
8. Lightweight Architectures KISS! 8
11. 11 Client Server HTTPS D
12. Client Server HTTPS 12
13. Client Server HTTPS 13
14. The Web as a Platform “Dude, we are in 2016!” 14
15. Browser as potent platform, including offline features JavaScript / TypeScript as application language AngularJS as application framework: SPA & components UX & UI: Common-base layout system with CSS3 Real Applications 15D
16. We can build large-scale applications with JavaScript We can have IntelliSense with JavaScript We can debug & profile JavaScript We can use JavaScript for real-time 3D We can have a fresh look at JavaScript ECMAScript 2015 is quite a big leap forward TypeScript accepted by competitors JavaScript – beyond myths 16D
17. Angular is a client-side JavaScript SPA framework Focus on separation of concerns with patterns Dependency injection & Services ViewModels & Views Directives Angular 2 is even better Simplified concepts Component-oriented Mobile-optimized performance Component-based Applications with Angular 17
18. Angular 2 entirely bets on TypeScript Components expressed as classes and decorated with metadata Angular 2 & TypeScript @Component({ selector:+'game,details' templateUrl:+'game.html', inputs:+['game'], outputs:+['ended'] }) export8public8class8GameDetailsComponent { game:+GameData; ended+=+new+EventEmitter<GameData>(); … } 18 … <game,details [game]="myCurrentGame"+ (ended)="onGameEnded($event)" > …
19. Web going native Use the best from both worlds. 19
20. Framework & tools to create native apps from HTML5/JS codebase Wrapping your HTML5 code into native app shell Hook into platform features & events with APIs Extend app functionality with plugins CLI tools for build automation Still needs native SDKs Native Web-based Mobile Apps: Cordova 20
21. Cordova Platform Support http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support 21
22. Plugins are composed of Single JavaScript interface used across all platforms Native implementations with platform-specific plugin interfaces Installation via CLI Configuration via config.xml Angular integration via ng-cordova project Cordova Plugins 22D
23. Native IDEs to debug plugin code Safari Web Inspector, Google Chrome or IE/Edge to debug HTML5/JS code On simulator/emulator or device Other remote debugging tools like Weinre (local/Cloud) available Debugging Cordova 23D
24. Allow for similar approach as Cordova but aiming at desktop applications Windows (Desktop), Linux, MacOS X Use specific version of Chromium and node.js/io.js Deploy independent from installed browsers Access to native platform through node modules BTW: VS Code is built with Electron Going Desktop: With nw.js & Electron 24D
25. Electron Architecture Overview 25D
26. Chrome debugging tools can be accessed via API Debugging nw.js & Electron 26D
27. Summary “Write Once, Run Anywhere?” 27
28. MacOS X WindowsODesktop iOS Android WindowsOMobile Browser Browser Browser WindowsO10O/OUWP Linux
29. Christian Weyer Thinktecture AG christian.weyer@thinktecture.com @christianweyer BoardZ! Sample Application https://github.com/thinktecture/boardz-cross-platform-sample Contact 29
30. AngularJS • https://angularjs.org/ • 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/ ngWcordova • http://ngcordova.com/ nw.js • https://github.com/nwjs/ nw.js Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ Resources 30
31. “Cross-Plattform für den mobilen Anwender” https://entwickler.de/online/mobile/cross-plattform-fuer- mobile-anwender-197682.html Interview (German) 31
32. Thank you. 32 @christianweyer