'Write once, run anywhere‘ with AngularJS, nw.js, Electron & Cordova - for real?

Transcript

1. 'Write once, run anywhere‘ with AngularJS, nw.js, Electron & Cordova - for real? Christian Weyer christian.weyer@thinktecture.com @christianweyer
2. Christian Weyer • 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) ASP.NET Web API / vNext Advisory Board Member ASPInsider, AzureInsider • Google GDE Web Technologies • http://blogs.thinktecture.com/cweyer christian.weyer@thinktecture.com @christianweyer 2
3. Talking Points • Modern business applications – real cross-platform • Lightweight target architecture • HTML5, CSS, JavaScript & AngularJS • Cordova for mobile apps • nw.js & Electron for desktop applications 3
4. 4 Modern Applications Cross platform != Mobile Mobile-First != Phones & Tablets
5. Cross Platform 5
6. Mobile-first • 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 6
7. 7 „Write once, run anywhere – v2“ ?
8. 8 Target Architecture Groundhog day: „Hey babe, I got you babe…“
11. 11 Client Server HTTPS
13. 13 Web-based Application Technologies „I didn‘t know I can do that!“
14. JavaScript + Markup + CSS3 • JavaScript as application language – Or TypeScript for – well… - types • AngularJS as application framework: SPA & components – Alternatives like EmberJS, KnockoutJS, or ReactJS • UX: Common-base layout system – Bootstrap or more app-like UX frameworks like WinJS or Material 14
15. „I didn‘t know that!“ • 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 – Upcoming ECMAScript6 is a big leap forward – TypeScript accepted by competitors 15
16. Component-based Applications with AngularJS • AngularJS is a client-side JavaScript SPA framework – Tries to take away complexities – Prepares the way for component-based apps • Focus on separation of concerns with patterns – Dependency injection & Services – ViewModels & Views – Directives • Angular 2 is even better – Simplified concepts – Mobile-optimized performance 16
17. 17 Web going native Use the best from both worlds.
18. Native Web-based Mobile Apps: Cordova • 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 project automation • Still needs native SDKs 18
19. Platform support 19 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
20. Native Plugins • 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 20
21. Debugging Cordova • Native IDEs to debug plugin code • Safari Web Inspector or Google Chrome to debug HTML5/JS code – On simulator/emulator or device • Other remote debugging tools like Weinre (local/Cloud) available 21
22. Going Desktop with nw.js & Electron • Allow for similar approach as Cordova but aiming at desktop applications – Windows, 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 22
23. Debugging nw.js & Electron • Chrome debugging tools can be accessed via API 23
24. 24 Summary “Write Once, Run Anywhere?”
25. 25 MacOS X Windows  Desktop  /  UWP iPhone Android Browser Windows  Mobile Linux   Browser Browser
26. Contact • Christian Weyer Thinktecture AG christian.weyer@thinktecture.com @christianweyer • BoardZ! Sample Application – https://github.com/thinktecture/boardz-cross-platform- sample 26
27. Resources • 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/ 27