AngularJS & ASP.NET: Cross-Plattform Smart Clients im Browser

Die Zeiten ändern sich: Moderne JavaScript Frameworks in der Microsoft Welt - was hat AngularJS mit Microsoft und ASP.NET zu tun? Diese zentrale Frage wird Christian Weyer in dieser Session beantworten. Sehen Sie wie man mit ASP.NET als potentes Backend und AngularJS als Frontend-Technologie echte Smart Client-Anwendungen bauen kann, die auf allen Plattformen genutzt werden können. Und für den Microsoft-affinen Entwickler ist JavaScript mit Angular gar nicht mehr "so schlimm". Schaun mer mal!

Transcript

1. TechSummit: Web & Cloud Pure Technology. AngularJS & ASP.NET: Cross-Plattform Smart Clients im Browser Christian Weyer, Thinktecture AG
2. Solution architect 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 Christian Weyer 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 != Phones & Tablets 4
5. Cross Platform? 5
6. 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 Mobile-first & the ‚Continuous Screen‘ 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 Identity & authorization servers Ubiquituous clients Web-based application technologies (aka HTML5) 11
12. REST?
14. 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 ASP.NET Web API 14
15. Web-based Application Technologies „I didn‘t know I can do that!“ 15
16. HTML5 as a Platform HTML5 ~= Semantic markup + CSS3 + JavaScript An application development platform 16
17. JavaScript + Markup + CSS3 JavaScript as application language Or TypeScript for – well… - types AngularJS as application framework: MVVM & components Alternatives like EmberJS, KnockoutJS UX: Common-base layout system Bootstrap or more app-like UX frameworks like WinJS or Material 17
18. „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 18
19. 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 ViewModels Views Directives 19
20. Web going native Use the best from both worlds. 20
21. 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 21
22. Platform support 22 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
23. 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 23
24. 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 24
25. Going Desktop with nw.js nw.js (aka node-webkit) allows for similar approach as Cordova but aiming desktop applications Windows, Linux, MacOS X Use specific version of Chromium and node.js/io.js Deploy independent from installed browsers 25
26. End-to-end Process Automating the goodness. 26
27. Automation with gulp & Co. Develop, test & debug in browser (primarily) Build native apps with gulp tasks using Corova CLI & nw.js commands One HTML5 code base results in various platform binaries „With a single mouse click“ – erm: batch file  27
28. Future… „Everything will be better.“ 28
29. 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 Angular2 component-oriented lib to create web-based applications complete rewrite of AngularJS based on new browser standards 29
30. Summary Building cross-platform applications beyond mobile devices – embracing the web. 30
31. AngularJS & ASP.NET: Cross-Plattform Smart Clients im Browser Cross platform != Mobile, and Mobile != 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 31
32. © 2014 Microsoft Corporation. All rights reserved. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Thank you! Christian Weyer, Thinktecture AG @christianweyer 32
33. 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 33
34. 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 34
35. 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 35
36. Contact Christian Weyer christian.weyer@thinktecture.com @christianweyer Thinktecture AG http://www.thinktecture.com 36
37. Interview (German) Echtes Cross-Plattform statt einfache Apps http://windowsdeveloper.de/videos/ echtes-crossplattform-statt-einfache-apps-176440 37
38. Wir freuen uns über Ihr Feedback! http://aka.ms/TechSummitFB 38