Echtes Cross-Plattform mit HTML5 - Windows 10 ist mitten drin

(English slides!)
Wir schreiben das Jahr 2015. Echtes Cross-Platform mit der HTML5-Plattform ist schon lange kein Geheimtipp mehr. Es ist real, funktioniert, und kann begeistern. Mit JavaScript oder TypeScript können Microsoft-affine Entwickler Client-Anwendungen bauen, die sprichwörtlich überall laufen. Ob im direkt Browser oder aber als native Applikation mit Tools wie Cordova oder nw.js: mit “überall" sind neben den allgegenwärtigen Betriebssystem-Browsern auch hybride mobile Apps, Desktop-Anwendungen, ja sogar Exoten wie TVs, gemeint. Und Windows 10 ist mitten drin.
Sehen Sie in dieser Session die genannten Technologien und Werkzeuge in Aktion. Lernen Sie zudem was Hosted Web Apps in Windows 10 sind und wie sich diese von anderen Bereitstellungsmodellen unterscheiden. Christian Weyer freut sich auf Ihren Besuch und hofft auf eine kurzweilige Session – gemeinsam mit Ihnen.

Transcript

1. Echtes Cross-Plattform mit HTML5 Windows 10 ist mitten drin Christian Weyer @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 http://blogs.thinktecture.com/cweyer christian.weyer@thinktecture.com @christianweyer Christian Weyer 2
3. Modern business applications – real cross-platform Lightweight target architecture HTML5, CSS, JavaScript & AngularJS Windows 10 & UWP Cordova for mobile apps nw.js & Electron for desktop applications Talking Points 3
4. Modern Applications Modern == 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
7. „Write once, run anywhere – v2“ ? 7
8. Lightweight Architectures KISS! 8
11. 11 Client Server HTTPS
12. The Web as a Platform “Dude, we are in 2015!” 12
13. Browser as potent platform, including offline features JavaScript / TypeScript as application language AngularJS as application framework: SPA & components UX: Common-base layout system with CSS3 Real Applications 13
14. 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 a big leap forward TypeScript accepted by competitors JavaScript – beyond myths 14
15. 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 15
16. Angular 2 completely bets on TypeScript Components expressed as classes and decorated with metadata Angular 2 & TypeScript @Component({ selector: 'game' templateUrl: 'game.html' }) export public class GameComponent { … public getGameData() { … } } 17
17. Windows 10 UWP is part of the big story. 17
18. EdgeHTML.dll Chakra 19
19. Packaged Web Apps vs Hosted Web Apps Build Windows apps from existing website code UWP app that packages website for publishing to the Store Call native Windows APIs from JavaScript URI Allow List in XML manifest drives access control Tools like manifold.js make it easy to create Hosted Web Apps On any platform (it uses npm, anyway) Hosted Web Apps 20
20. Web going native Use the best from both worlds. 20
21. 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 process automation Still needs native SDKs Native Web-based Mobile Apps: Cordova 21
22. Cordova Platform Support 22 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
23. 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 AngularJS integration via ng-cordova project Cordova Plugins 23
24. 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 24
25. 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 25
26. Chrome debugging tools can be accessed via API Debugging nw.js & Electron 26
27. Summary “Write Once, Run Anywhere?” 27
28. MacOS X Windows Desktop iOS Android Browser Windows Mobile Browser Browser Linux Linux Linux Windows 10 / UWP 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 Bootstrap • http://getbootstrap.com/ WinJS • http://try.buildwinjs.com/ #angular Material • https://material.angularjs.org Cordova • http://cordova.apache.org/ ng-cordova • http://ngcordova.com/ nw.js • https://github.com/nwjs/ nw.js Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ Resources 30
31. © 2014 Microsoft Corporation. All rights reserved. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Vielen Dank