"Write once, run anywhere" - Can AngularJS & Cordova do it?

It is no longer a secret that we can build real applications – not just web sites – with HTML5 and JavaScript. With client programming frameworks like AngularJS software developers have a means to think and act in proven design patterns and craft there user interfaces and client-side logic with javaScript without always having to deal with the burden of the language. With a grain of tooling and additional APIs we can even go a step further and provide native apps for each and every platform out there – especially the mobile ones. Christian Weyer will show you how to use AngularJS and the Apache Cordova ecosystem to build apps for Windows, iOS, Android, and Windows Phone with just a single codebase. Really?!

Transcript

1. "Write once, run anywhere” Can AngularJS & Cordova do it? Christian Weyer Thinktecture AG @christianweyer think mobile!
2. Let’s rephrase the question: Can Web-based technologies fulfill the ubiquitous applications dream? (based on your requirements)
3. Talking Points • Modern applications • Target architecture • Web-based application technologies • Web going native • End-to-end process automation • Future outlook 3
4. Modern Applications 4
5. The ‚Continuous Screen‘ • X-Platform today: focus on mobile devices & apps • But what is mobile, anyway? 5
7. The ‚Continuous Screen‘ Idea • X-Platform today: focus on mobile devices & apps • But what is mobile, anyway? • From a small phone to a large phone to a small tablet to a large tablet to a small desktop… – you get it  • We need UX & technologies to realize the Continuous Screen – Adaptive user interfaces with optimized user experience – X-Platform with one code base & target architecture 7
8. „Write once, run anywhere – v2“ ??? 8
9. Target architecture 9
12. Web-based technologies 12
13. HTML5 as a Platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform 13
14. JavaScript + Markup + CSS3 • JavaScript as application language – TypeScript or AtScript as alternatives • AngularJS as application framework: MVVM – Alternatives like EmberJS, KnockoutJS • Templating frameworks for building views – AngularJS has built-in templating • Bootstrap as common-base layout system – 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 • JavaScript slowly gets near-native in performance • We should have a fresh look at JavaScript – Upcoming ECMAScript6 is a big leap forward 15
16. MVVM with AngularJS • AngularJS is a client-side JavaScript SPA framework – Tries to take away complexities – Tries to prepare the way for ECMAScript6 – Tries to prepare the way for Web Components • Focus on separation of concerns with patterns – Dependency injection – Models – Views – ViewModels 16
17. Web going native 17
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 creation • 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 – Core Cordova APIs are implemented using this architecture • Installation via CLI • Configuration via config.xml • AngularJS integration via ng-cordova 20
21. Going Desktop: node-webkit & CEF • node-webkit allows for same approach as Cordova but aiming at desktop applications – Windows, Linux, MacOS X – Use existing node.js modules • CEF[Sharp] can be used to integrate web- based technologies into existing Windows applications – For migration paths 21
22. Performance • Think about the 300ms – FastClick.js to the rescue • iOS8 has new web view component (WKWebView) – Enables JavaScript JIT-ing • Use Chromium-based engine in Android – CrossWalk project • Up-to-date Chromium/Blink kernels on Desktop 22
23. End-to-end process 23
24. Automation with Cordova CLI Tools • Develop, test & debug in browser (primarily) • Build native apps with script using Corova CLI commands – PowerShell or Bash • One code base results in various platform binaries – Mix that with node-webkit 24
25. Summary 25
26. Browsers are evolving • Installable web apps • Real-time data with WebRTC • Service workers – Offline – Push notifications – Background sync - and more • Browser-based OSes like ChromeOS • WebComponents for re-usable components 26
27. So: „Write once…“ ? • Cross platform != Mobile Mobile != Phones/Tablets • HTML/JavaScript-based frameworks like AngularJS enable real applications • Cordova & node-webkit offer platforms & tools for native integration & deployment • Secure target architecture with Web APIs, Push services and authorization servers • WebComponents will be an important standard 27
28. Thank you! Christian Weyer Thinktecture AG @christianweyer 28
29. Resources • AngularJS – https://angularjs.org/ • Cordova – http://cordova.apache.org/ • ng-cordova – http://ngcordova.com/ • node-webkit – https://github.com/rogerwang/node-webkit • CEFSharp – https://github.com/cefsharp/CefSharp 29
30. Resources • Crosswalk for Android – https://crosswalk-project.org/documentation/ getting_started/run_on_android.html • Google Material Design – http://www.google.com/design/spec/material- design/introduction.html • Three.js – http://threejs.org/ • WebComponents – http://webcomponents.org/ 30
31. Resources • Christian Weyer – christian.weyer@thinktecture.com – @christianweyer • Thinktecture AG – http://www.thinktecture.com 31
32. Samples • Simple AngularJS (with ASP.NET Web API) demo – https://github.com/ChristianWeyer/UG- ngDemo • myProducts end-to-end demo application – https://github.com/ChristianWeyer/myProducts -End-to-End 32