AngularJS everywhere: Applications for browsers, desktop, and mobile

Transcript

1. AngularJS überall Anwendungen für Browser, Desktop & Mobile Christian Weyer Thinktecture AG @christianweyer christian.weyer@thinktecture.com Developer Week 2015
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 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 2
3. Talking Points • Modern applications • Target architecture • Web-based application technologies • Web going native • End-to-end process automation 3
4. MODERN APPLICATIONS Cross platform != Mobile Mobile-First != Phones & Tablets 4
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 realize the Continuous Screen – Adaptive user interfaces with optimized user experience – Ideally, with one code base & target architecture 6
7. „Write once, run anywhere – v2“ ? 7
8. TARGET ARCHITECTURE Groundhog day: „Hey babe, I got you babe…“ 8
11. 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) 11
12. 12 Client Server HTTPS
13. ASP.NET Web API • Realize data-driven server-side use cases • Simple yet powerful programming framework for HTTP-based services – Not just for Web clients • 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 – Prepares 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. THE 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. Applications for Desktop, Mobile & Browser • 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. Contact Christian Weyer Thinktecture AG christian.weyer@thinktecture.com @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