Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Platform Applications for Windows, Web & Mobile with AngularJS and Cordova

Cross-Platform Applications for Windows, Web & Mobile with AngularJS and Cordova

Originally German session title for the Microsoft Technical Summit 2014 in Berlin. But all slides are in English!

Christian Weyer

November 12, 2014
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. Cross-Plattform Apps für Windows,
    Web & Mobile mit AngularJS und Cordova
    [email protected]
    @christianweyer

    View full-size slide

  2. Talking Points
    Modern applications
    Target architecture
    Web-based application technologies
    Web going native
    End-to-end process automation
    2

    View full-size slide

  3. Modern Applications
    Cross platform != Mobile
    Mobile != Phones & Tablets
    3

    View full-size slide

  4. 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
    With one code base & target architecture
    The ‚Continuous Screen‘
    4

    View full-size slide

  5. „Write once, run anywhere – v2“ ???
    5

    View full-size slide

  6. Target Architecture
    Groundhog day: „Hey babe, I got you babe…“
    6

    View full-size slide

  7. 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
    9

    View full-size slide

  8. Web-based Application
    Technologies
    „I didn‘t know I can do that!“
    10

    View full-size slide

  9. HTML5 as a Platform
    HTML5 ~= Semantic markup + CSS3 + JavaScript
    An application development platform
    11

    View full-size slide

  10. JavaScript + Markup + CSS3
    JavaScript as application language
    Optionally TypeScript
    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 Materials
    12

    View full-size slide

  11. „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 can have a fresh look at JavaScript
    Upcoming ECMAScript6 is a big leap forward
    13

    View full-size slide

  12. 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
    14

    View full-size slide

  13. Web going native
    Use the best from both worlds.
    15

    View full-size slide

  14. 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
    16

    View full-size slide

  15. Platform support
    17 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support

    View full-size slide

  16. 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
    18

    View full-size slide

  17. Visual Studio Multi-Device Hybrid Apps
    Visual Studio 2013 extension for building Cordova applications
    (in preview)
    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 straight from
    VS
    19

    View full-size slide

  18. End-to-end Process
    Automating the goodness.
    20

    View full-size slide

  19. 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, optionally
    21

    View full-size slide

  20. Summary
    Building cross-platform applications
    beyond mobile devices
    22

    View full-size slide

  21. Cross-Platform Security
    ADFS
    Customer Accounts
    AAD
    Thinktecture
    IdentityServer
    https://github.com/thinktecture/Thinktecture.IdentityServer.v3
    23

    View full-size slide

  22. Cross-Plattform Apps für Windows,
    Web & Mobile mit AngularJS und Cordova
    Cross platform != Mobile, and Mobile != Phones/Tablets
    HTML/JavaScript-based frameworks like
    AngularJS enable real applications
    Cordova offers platform & tools for native integration &
    deployment
    Secure target architecture with Web APIs, Push services and
    authorization servers
    24

    View full-size slide

  23. © 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.
    Vielen Dank!
    Christian Weyer, Thinktecture AG
    @christianweyer
    25

    View full-size slide

  24. Resources
    Visual Studio Multi-Device Hybrid Apps (Preview)
    http://www.visualstudio.com/en-us/explore/cordova-vs.aspx
    Cordova
    http://cordova.apache.org/
    AngularJS
    https://angularjs.org/
    ng-cordova
    http://ngcordova.com/
    26

    View full-size slide

  25. Resources
    node-webkit
    https://github.com/rogerwang/node-webkit
    CEFSharp
    https://github.com/cefsharp/CefSharp
    Thinktecture IdentityServer v3
    https://github.com/thinktecture/Thinktecture.IdentityServer.v3
    Christian Weyer
    [email protected]
    @christianweyer
    Thinktecture AG
    http://www.thinktecture.com
    27

    View full-size slide

  26. 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
    28

    View full-size slide

  27. Interview (deutsch)
    Echtes Cross-Plattform statt einfache Apps
    http://windowsdeveloper.de/videos/
    echtes-crossplattform-statt-einfache-apps-176440
    29

    View full-size slide

  28. Addendum
    Going Desktop with node-webkit & CEF
    node-webkit allows for same approach as Cordova but
    aiming desktop applications
    Windows, Linux, MacOS X
    CEFSharp can be used to integrate web-based technologies
    into existing Windows applications
    For migration paths
    30

    View full-size slide