Office Add-Ins with Angular and Serverless Backends

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

Transcript

1. Office Add-Ins with Serverless Backends Real world pragmatic architectures for wide reach Thorsten Hans @thorstenhans thorsten.hans@gmail.com thorsten-hans.com @thinktecture thorsten.hans@thinktecture.com 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. The guy who is talking Consultant @ Thinktecture AG thinktecture.com thorsten.hans@thinktecture.com thorsten-hans.com @ThorstenHans Thorsten Hans
4. • Microsoft Office as Application platform • Office Add-Ins Developer Story • Pragmatic, serverless backends • Tips from the field • Recap • Q&A Talking-Points
5. 5 Using Microsoft Office as Application Platform
6. 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
7. https://news.microsoft.com/bythenumbers/planet-office
8. 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
9. Commands (Ribbon Extensions) Shapes in Microsoft Office • Commands trigger JavaScript Code • Commands make other Shapes visible
10. TaskPane Add-Ins Shapes in Microsoft Office • Display Web-Apps from trusted Domains • Same experience across Office Web Apps and Office Fat Clients
11. Content Add-Ins Shapes in Microsoft Office • Display Web-Apps from trusted Domains • Hosted in the document • Mimics the document lifecycle
12. Module Add-In Shapes in Microsoft Office • Display Web-Apps from trusted Domains • Full app surface • Only available in Outlook
13. 13 Microsoft Office Add-Ins Developer Story
14. 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
15. 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
16. Hello World Office Developer Story
17. 17 Microsoft Office Add-In Development DEMO
18. 18 Pragmatic, serverless backends using Azure Functions für Integration-as-a-Service (am Beispiel Azure) Serverless++ - Event-getriebene Cloud-Architekturen
19. 19 What is Serverless, anyway?
20. 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
21. 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
22. 22 Serverless Backends and Microsoft Office Add-Ins DEMO
23. 23 From the field Implementation Tips für Integration-as-a-Service (am Beispiel Azure) Serverless++ - Event-getriebene Cloud-Architekturen
24. 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
25. 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
26. 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
27. • Office Add-In Introduction • The new Developer Story • Pragmatic, serverless backends • Tips from the field Recap
28. Code https://github.com/ThorstenHans/basta-2018-office-addins-serverless aka https://thns.io/2HywIUk Slides https://speakerdeck.com/thorstenhans/office-add-ins-with-angular-and-serverless-backends aka https://thns.io/2FgZesA Code & Slides
29. Q&A If you’ve further questions later on: shoot me a mail at thorsten.hans@thinktecture.com / thorsten.hans@gmail.com or tweet at @ThorstenHans