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

Office Add-Ins with Angular and Serverless Backends

Thorsten Hans
February 21, 2018

Office Add-Ins with Angular and Serverless Backends

Slides from my talk about building Office Add-Ins using Angular and pragmatic, serverless Backends

Thorsten Hans

February 21, 2018
Tweet

More Decks by Thorsten Hans

Other Decks in Technology

Transcript

  1. Office Add-Ins with Serverless Backends Real world pragmatic architectures for

    wide reach Thorsten Hans @thorstenhans [email protected] thorsten-hans.com @thinktecture [email protected] thinktecture.com Consultant @thinktecture
  2. What to expect • Office as Application platform • Benefits

    • Why you should care • Developer Tooling • Angular • Serverless Backends • Azure Functions • Tips from real world implementations we did What not to expect • Angular Introduction • Office Add-Ins API Deep Dive • UX / UI Best Practices
  3. • Microsoft Office as Application platform • Office Add-Ins Developer

    Story • Pragmatic, serverless backends • Tips from the field • Recap • Q&A Talking-Points
  4. What you get? • Seamless integration • All Office clients

    • Online, Mobile, Fat Clients • https://dev.office.com/add-in-availability • Existing distribution channels • Office Store • On-Premises Deployments • Faster time to market • Don’t build yet another Excel, use the existing one and extend it Using Microsoft Office as application platform
  5. Shape your app • Microsoft provides clearly defined extension points

    aka Shapes • Shapes use well-known Office UI concepts • Shapes are defined in the application manifest • Shapes host a WebBrowserControl or an <iframe> in the Web • IE 11 / Safari / Safari Mobile / Google Chrome / … • Microsoft is also using those shapes to extend Office Using Microsoft Office as application platform
  6. Commands (Ribbon Extensions) Shapes in Microsoft Office • Commands trigger

    JavaScript Code • Commands make other Shapes visible
  7. TaskPane Add-Ins Shapes in Microsoft Office • Display Web-Apps from

    trusted Domains • Same experience across Office Web Apps and Office Fat Clients
  8. Content Add-Ins Shapes in Microsoft Office • Display Web-Apps from

    trusted Domains • Hosted in the document • Mimics the document lifecycle
  9. Module Add-In Shapes in Microsoft Office • Display Web-Apps from

    trusted Domains • Full app surface • Only available in Outlook
  10. No more VSTO • 100% commitment to web standards •

    JavaScript • Use office.js • Access to the current context (eg. Document, Spreadsheet) • Fundamental information about the User and the Office Client • CSS • Use office.css optionally to provide seamless integration • Any programming language can be used for the backend / API Office Add-In Developer Story
  11. Tooling • Visual Studio Integration • Visual Studio Extension available

    for 2015 and 2017 • Yeoman Generator for all platforms • Yeoman -> http://yeoman.io/ • Generator -> https://github.com/OfficeDev/generator-office • Works on all desktop platforms • No Visual Studio license required Office Developer Story
  12. 18 Pragmatic, serverless backends using Azure Functions für Integration-as-a-Service (am

    Beispiel Azure) Serverless++ - Event-getriebene Cloud-Architekturen
  13. 20 § Azure Functions is code being triggered by an

    event § Focused code + events § Basic principles enable powerful use cases § Events, Triggers, Bindings § (New) Runtime built on .NET Core § Available for self-hosting § Two ways of operation § Cost-optimized, automatic scale § Always-on, via Azure App Service Azure Functions: Functions-as-a-Service
  14. 21 § Incoming event triggers function § Input bindings enable

    easy access to data from various data sources § Output bindings offer easy access to outbound data sinks Triggers & Bindings
  15. 23 From the field Implementation Tips für Integration-as-a-Service (am Beispiel

    Azure) Serverless++ - Event-getriebene Cloud-Architekturen
  16. Web App • Build responsive only • eg.: macOS Task-Panes

    are smaller than Windows Task-Panes • Wrap office.js callback hell using Observables • http://reactivex.io/rxjs/ • Use the Office Dialog API to implement OAuth 2.0 Implicit Flow • Verify if required APIs are supported • Office.context.requirements.isSetSupported(`DialogApi`, 1.1) • Don’t trust @types/office-js always. Verify internal implementation Implementation Tips
  17. Add-In Manifests • Name Identifiers and Resources carefully • Identifier

    max length 125 characters • Resource Identifier max length 32 characters • Validate Manifests using Office Add-In Validator • https://github.com/OfficeDev/office-addin-validator Implementation Tips
  18. Angular SPAs • DI Container • use factories to swap

    Angular service implementations based on hosting context • Deliver only AOT builds to ensure native-ish performance • Ensure Polyfills for Internet Explorer are backed into your build Implementation Tips
  19. • Office Add-In Introduction • The new Developer Story •

    Pragmatic, serverless backends • Tips from the field Recap