"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 their 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. Erm, really?!

Transcript

1. Christian Weyer, Thinktecture @christianweyer "Write once, run anywhere”: Can AngularJS & Cordova do it?
2. Christian Weyer, Thinktecture @christianweyer "Write once, run anywhere”: Can AngularJS & Cordova (& Co.) do it?
3. 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 for ASP.NET (Architecture) ASP.NET Web API / vNext Advisory Board Member ASPInsider, AzureInsider • Google GDE for AngularJS • http://blogs.thinktecture.com/cweyer christian.weyer@thinktecture.com @christianweyer 3
4. Talking Points • Modern applications • Target architecture • Web-based application technologies • Web going native • End-to-end process automation 4
5. Modern Applications Cross platform != Mobile Mobile-First != Phones & Tablets 5
6. Cross Platform? 6
7. Mobile-first • Today: focus on mobile devices & apps • But what is mobile-first, anyway? – Mobile lifestyle & work – Data & processes travel • We need UX & technologies to realize the Continuous Screen – Adaptive user interfaces with optimized user experience – Ideally, with one code base & target architecture 7
8. „Write once, run anywhere – v2“ ? 8
9. Target Architecture Groundhog day: „Hey babe, I got you babe…“ 9
12. Technology stack • Request/response: Lightweight Web/HTTP APIs – ASP.NET Web API • Bi-directional: Push Services – ASP.NET SignalR • Token-based security – Token & authorization servers • Ubiquituous clients – Web-based application technologies (aka HTML5) 12
13. ASP.NET Web API • Realize data-driven server-side use cases • Simple yet powerful programming framework for HTTP-based services • Lightweight – at runtime – at development time – at supported feature set • Highly interoperable 13
14. Web-based Application Technologies „I didn‘t know I can do that!“ 14
15. HTML5 as a Platform • HTML5 ~= Semantic markup + CSS3 + JavaScript • An application development platform 15
16. JavaScript + Markup + CSS3 • JavaScript as application language – Or TypeScript for – well… - types • AngularJS as application framework: MVVM & components – Alternatives like EmberJS, KnockoutJS; ReactJS • UX: Common-base layout system – Bootstrap or more app-like UX frameworks like WinJS or Material 16
17. „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 17
18. MVVM & Components 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 & Services – ViewModels – Views – Directives 18
19. Web going native Use the best from both worlds. 19
20. 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 20
21. Platform support 21 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
22. 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 22
23. Visual Studio Tools for Apache Cordova • Visual Studio 2013 extension for building Cordova applications (CTP) • Built-in support in Visual Studio 2015 • Easy to setup – Takes care of all necessary dependenices in one installer • Offers project template to integrate with Cordova • Debug Windows Store, Windows Phone, Android, and iOS straight from VS 23
24. Going Desktop with nw.js • nw.js (aka node-webkit) allows 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 24
25. End-to-end Process Automating the goodness. 25
26. Automation with gulp & Co. • Develop, test & debug in browser (primarily) • Build native apps with gulp tasks using Cordova CLI & nw.js commands • One HTML5 code base results in various platform binaries – „With a single mouse click“ – erm: batch file  26
27. Future… „Everything will be better.“ 27
28. ASP.NET 5 & Angular 2 • ASP.NET 5 (aka ASP.NET vNext) – lightweight web dev framework – complete rewrite of ASP.NET – runs on .NET/Mono and on CoreCLR • Angular 2 – component-oriented lib to create web-based applications – complete rewrite of AngularJS – based on new browser standards 28
29. Summary Building cross-platform applications beyond mobile devices – embracing the web. 29
30. Can…? • Cross platform != Mobile, and Mobile-First != Phones/Tablets • HTML/JavaScript-based frameworks like AngularJS enable real applications based on browser techs • Cordova & nw.js offer platform & tools for native integration & deployment • Secure target architecture with Web APIs, Push services and authorization servers 30
31. Thank you! Christian Weyer, Thinktecture AG @christianweyer 31
32. Resources • AngularJS – https://angularjs.org/ • win.js – http://try.buildwinjs.com/#angular • Material – https://material.angularjs.org • ASP.NET Web API – http://www.asp.net/web-api • ASP.NET SignalR – http://www.asp.net/signalr 32
33. Resources • Visual Studio Tools for Apache Cordova – https://www.visualstudio.com/en-us/explore/cordova-vs.aspx • Cordova – http://cordova.apache.org/ • ng-cordova – http://ngcordova.com/ • nw.js – https://github.com/nwjs/nw.js • CefSharp – https://github.com/cefsharp/CefSharp 33
34. Samples • Simple AngularJS (with ASP.NET Web API) Demo – https://github.com/ChristianWeyer/UG-ngDemo • TTContacts Demo – https://github.com/thinktecture/ttcontacts-cordova-nwjs/ tree/tt-style-nw • myProducts End-to-end Demo – https://github.com/ChristianWeyer/myProducts-End-to-End 34
35. 35 A big thank you to our partners Gold Partners Silver & Social Partners Platinum Partners