Office Add-Ins with Angular - Welcome to a brave new world

Slides from my talk on Office Add-Ins with Angular at @BastaCon

Transcript

1. Office Add-Ins with Angular Welcome to a brave new world 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 • Deployment Options • Getting Started What not to expect • Angular Introduction • Office Add-Ins API Deep Dive • UX / UI Best Practices
3. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Raum Pragmatische Microservices-Architekturen mit .NET, Web-APIs, SignalR und Co. Christian Weyer DI, 26. September 2017, 10.30 bis 11.30 Gutenberg-Saal 2+3 TypeScript für .NET-Entwickler Christian Wenz DI, 26. September 2017, 11.45 bis 12.45 Gutenberg-Saal 2+3 Angular: Komponentenbasierte HTML5-Anwendungen für alle Manuel Rauber DI, 26. September 2017, 14.15 bis 15.15 Gutenberg-Saal 2+3 Oberflächenlayout der Zukunft: CSS Flexbox vs. Grid Layout Peter Kröner DI, 26. September 2017, 16.00 bis 17.00 Gutenberg-Saal 2+3 Microsoft Office als Plattform: Mit Angular auf zu neuen Ufern Thorsten Hans DI, 26. September 2017, 17.15 bis 18.15 Gutenberg-Saal 2+3
4. The guy who is talking Consultant @ Thinktecture AG thinktecture.com thorsten.hans@thinktecture.com thorsten-hans.com @ThorstenHans Thorsten Hans
5. • Introduction to Office as a platform • Office Add-In Shapes • The new dev story • Tips from the field • Recap • Q&A Talking-Points
6. What offers Office offers as a platform • Seamless integration into • Office fat clients • Office Online • Office Mobile • https://dev.office.com/add-in-availability • Use existing distribution channels • More potential customers • Achieve requirements easier • Don’t build yet another Excel, use the existing one Introduction to Office as a platform
7. https://news.microsoft.com/bythenumbers/planet-office
8. Deployment Channels • Deploy to public Office Store • On-Premise deployments using Exchange Server and SharePoint • Exchange for Outlook Add-Ins • SharePoint for Word, Excel and PowerPoint • Side-Loading for Developers Introduction to Office as a platform
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 itself is also using those shapes Office Add-In Shapes
10. Commands Office Add-In Shapes
11. Task-Pane Add-In Office Add-In Shapes
12. Content Add-Ins Office Add-In Shapes
13. Outlook Module Office Add-In Shapes
14. DEMO
15. No more VSTO • HTML5, JavaScript and CSS are the only supported languages in the frontend • You chose the language for the backend / API • The office.js is the center of gravity • Documents, Spreadsheets, Slidedecks, Mails, Appointments • Fundamental information about the user • Name, used Theme, Office Version • The office.css provides styling for Office Add-Ins • Optional, you can use custom styles for consistency 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. Add-In architecture Office Developer Story
18. Hello World Office Developer Story
19. DEMO
20. Debugging Experience • Debug everywhere • Office fat client for Windows à Edge Developer Tools • Office Online à regular Browser Developer Tools • Office fat client for Mac à Vorlon.JS Office Developer Story
21. Tips from implementations we did • Build responsive only • Wrap office.js for Angular apps • It’s regular callback JS, you want at least Promises or even better Observables • Use factories and swap Angular service implementations when running in Office • Wait for Office before bootstrapping your Angular app • Use Dialog API instead of window.open • Deliver only AOT builds to ensure native-ish performance From the field
22. • Office Add-In Introduction • The new Developer Story • Office Add-In Shapes • Demo (Angular SPA as Excel Add-In) • Tips from the field Recap
23. Code https://github.com/ThorstenHans/boardz aka https://goo.gl/y6NdEv Slides https://speakerdeck.com/thorstenhans/office-add-ins-with-angular-welcome-to-a-brave-new-world aka https://goo.gl/A9nz4U 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