Volle Power - Native Integration in HTML5-Anwendungen

Transcript

1. Volle Power: Native Integration in HTML5-Anwendungen für Desktop und Mobile • Was SIE ERWARTET – Cordova Plugin für iOS und Android – Node.JS Module – Node.JS Add-Ons – CefSharp • Was Sie NICHT ERWARTET – Einführung in die Programmiersprachen Java, C++, JavaScript – Windows Phone (sorry )
2. Volle Power: Native Integration in HTML5-Anwendungen für Desktop und Mobile
3. Special Day „HTML5 Cross-Plattform“ Thema Sprecher Datum, Uhrzeit Raum Mobile und Desktop: Echte HTML5-Anwendungen mit Cordova und NW.js Thomas Hilzendegen MI, 30. September 2015, 8.30 bis 9.45 Watfordsaal B Volle Power: Native Integration in HTML5-Anwendungen für Desktop und Mobile Thorsten Hans MI, 30. September 2015, 10.30 bis 11.45 Watfordsaal B 2D- und 3D- Datenvisualisierung für alle Plattformen mit HTML5 Christian Liebel, Manuel Rauber MI, 30. September 2015, 14.15 bis 15.30 Watfordsaal B Auch ohne Netz: Offline-First- Architekturen für HTML5-Apps Christian Weyer MI, 30. September 2015, 16.15 bis 17.30 Watfordsaal B Aber schnell! Performanceaspekte in Cross- Plattform-HTML5- Anwendungen Gregor Biswanger MI, 30. September 2015, 17.45 bis 19.00 Watfordsaal B
4. Thorsten Hans Developer / Consultant Thinktecture AG thorsten.hans@thinktecture.com www.xplatform.rocks @ThorstenHans
5. Content • Cross Plaftorm Background • How to extend cordova apps • How to extend NW.js apps • Legacy application integration
6. Cross-Platform development • Cordova for mobile • NW.js for desktop • single code base
7. cordova • write mobile apps using HTML/JS/CSS • App executed within WebView • composable programming model – cordova plugins
8. Demo Cordova 101
9. How to extend cordova apps Build your own plugins
10. Background - Motivation • reuse existing native functionality • provide a scenario based API across all platforms
11. Custom Cordova Plugins • Written natively on every platform – iOS (ObjectiveC / Swift) – Android (Java) – Windows Phone (C#) • Can be published on NPM
12. cordova plugin eco-system • abstracting platform APIs • encapsulating scenario based APIs • all plugins available on NPM – more than 1500 cordova plugins
13. Demo Write a cordova plugin for iOS and Android
14. NW.js • write mobile apps using HTML/JS/CSS • NW.js – makes node modules available to the browser – brings chromium to your desktops • Compiles for win, osx and linux
15. Demo NW.js 101
16. How to extend NW.js apps Write own node modules and native node addons
17. node modules ecosystem
18. Writing Node.JS modules • Simplest way to extend apps • runs on all platforms (by default) • easy to achieve
19. Writing Node.JS modules • Written in JavaScript – or any language that compiles into JS • Most commonly used approach to build – Apps – your own API
20. Demo Writing a NodeJS module
21. Node.JS Add-Ons • Expose functionality from C++ to JavaScript • Written in pure C++ – Using v8 lib • Loaded from within node by using require() • Compiled by using node-gyp
22. Why native Node Add-Ons • C++ is faster than JavaScript – Only a kind of true – Bridging between C++ and JS is expensive – Check out kkaefer’s benchmark github.com/kkaefer/node-cpp-modules/tree/master/xx_benchmark
23. Demo Building a native HelloWorld for NodeJS
24. When to use Node.JS Add-Ons • Accessing existing C++ APIs from JS • Utilizing multiple threads
25. Who has a legacy app and can’t start cross- platform dev today? Question !?
26. Integration for legacy applications By using cefSharp
27. Background / Motivation • Don’t re-write everything • Slice a re-write in small chunks • Ship early and often
28. cefSharp • Bring Chromium to WPF / WinForms • Embed Web-Apps in existing Apps • Communicate between both worlds
29. Demo Integrating Web-Apps using cefSharp
30. recap • Bring existing knowledge on all platforms • double check existing modules / plugins • Build with performance in mind • Running legacy apps -> you can start today!
31. DEMOS https://github.com/ThorstenHans/research
32. Need More? Check out the special issue