Office als Anwendungsplattform - Pragmatische Add-Ins mit Angular

Microsoft Office ist aus dem Alltag vieler Menschen nicht mehr wegzudenken. Neben den altbekannten Desktopanwendungen für Windows und macOS sowie mobilen Apps für iOS und Android bietet Microsoft die Office Suite auch als Web-Apps an. Damit sind die Produkte überall verfügbar. Seit der Version 2013 haben Sie die Möglichkeit, all diese Produkte durch sogenannte Add-ins zu erweitern. Möchten Sie Ihre existierende Webanwendung um neue Features durch Integration von Office erweitern? Befinden Sie sich in der Planungsphase und möchten das Potenzial der Office-Integration kennenlernen? Oder geht es Ihnen darum, Ihr Produkt optimal in etablierte Arbeitsprozesse zu integrieren? Dann besuchen Sie diesen Vortrag von Thorsten Hans und lernen, wie Sie Office-Add-ins pragmatisch und lösungsorientiert mit Angular erstellen können. Egal ob Sie Office 365 benutzen oder eine On-Premises-Installation betreiben, mit Office-Add-ins erweitern Sie jede Office-Installation.

Transcript

1. Office als Anwendungsplattform Pragmatische Add-Ins mit Angular 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 Platform • Angular Integration • Using Excel APIs from TypeScript • Sideloading Apps to Desktop and Mobile What not to expect • Angular Introduction • UX / UI Best Practices
3. Special Day Cross-Plattform Applications Thema Sprecher Datum, Uhrzeit Raum Echte Cross-Plattform-Anwendungen mit Cordova, Electron und Angular Fabian Gosebrink DO, 27. September 2018, 09.00 bis 10.00 Gutenberg 2+3 Adaptive Cross-Plattform UIs mit Angular – Beyond Burger-Menu Timo Korinth DO, 27. September 2018, 10.45 bis 11.45 Watford B Advanced Progressive Web Apps: Push-Benachrichtigungen und Daten- Caching im Griff Christian Liebel DO, 27. September 2018, 12.00 bis 13.00 Watford B UI-Feuerwerk mit Struktur: Web Components mit Angular Jörg Neumann, Manuel Rauber DO, 27. September 2018, 15.45 bis 16.45 Watford B Office als Anwendungsplattform: Pragmatische Add-Ins mit Angular Thorsten Hans DO, 27. September 2018, 17.00 bis 18.00 Gutenberg 2+3
4. The guy who’s talkin’ Consultant @ Thinktecture AG thorsten.hans@thinktecture.com thorsten.hans@gmail.com thinktecture.com thorsten-hans.com @ThorstenHans Thorsten Hans
5. • Office as an application platform • Office Add-In capabilities • Building an Add-In with Angular • Tips from the field • Recap • Q&A Talking Points
6. Platform offerings • Seamless integration of HTML5 / JavaScript / CSS into • Office fat clients (Office 2013 / 2016 / 2019 & Office 2016 / 2019 for Mac) • Office Online • Office Mobile (Office for iOS / ONLY Outlook for Android) • https://dev.office.com/add-in-availability • Reuse Microsoft’s existing distribution channel • Achieve requirements easier • Don’t build yet another Excel! Use the existing one Office as an application platform
7. Deployment Channels • Deploy to public Office Add-In Store • On-Premise deployments using Exchange Server and SharePoint • Exchange for Outlook Add-Ins • SharePoint for Word, Excel and PowerPoint • Side-Loading for Developers Office as an application platform
8. More Reach Office as an application platform https://news.microsoft.com/bythenumbers/planet-office
9. One development model, many possibilities • Office manifest defines the shape of the app • Manifest is extensible, we’ll see more shapes in the future • All shapes are well-known UI concepts for Office users • Microsoft uses Add-In shapes to ship new features Office Add-In capabilities
10. DEMO
11. Commands Office Add-In Shapes
12. Task-Pane Add-In Office Add-In Shapes
13. Content Add-Ins Office Add-In Shapes
14. Outlook Module Office Add-In Shapes
15. No more VSTO • HTML5, JavaScript and CSS are the ONLY supported languages in the frontend • Use ANY language for the backend / API • The office.js provides rich APIs for all Office Apps • The office.css provides styling for Office Add-Ins Office Developer Story
16. 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
17. Hello World Office Developer Story
18. Add-In architecture Office Developer Story
19. DEMO
20. Debugging Experience • Debug everywhere • Office 2013 / 2016 / 2019 for Windows • Edge Developer Tools • Office Online • Browser Developer Tools • Office 2016 / 2019 for MacOS • Vorlon.JS • Office for iOS / Android • Vorlon.JS Office Developer Story
21. Tips from implementations we did • Build responsive only • Wrap office.js for Angular apps • Adopt conepts from SPA framework like Observables to be consistent • If you do cross-platform • use factories and swap Angular service implementations when running in Office • Wait for Office before bootstrapping your SPA • Use Dialog API instead of window.open • Deliver only AOT builds to ensure native-ish performance From the field
22. • Office as an application platform • Office Add-In capabilities • Demo (Angular SPA as Excel Add-In) • Tips from the field Recap
23. Code https://github.com/ThorstenHans/currency-calculator-office-addin Slides https://speakerdeck.com/thorstenhans/ Code & Slides
24. 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