The Transition to Modern Office Add-in Development

The Transition to Modern Office Add-in Development

The Transition to Modern Office Add-in Development P R E S E N T E D BY CAMERON DWYER Office Add-ins and extensibility Developer opportunity Introduction

The OnePlaceMail story Recap on the existing add-in development model Why a new model was needed Outline Explain the modern Office add-in model What does this mean for Office developers Q&A

COM Add-ins and/or Visual Studio Tools for Office Add-ins (VSTO) Typically C# or VB (.Net Framework) written in Visual Studio Add-ins were compiled code (dlls) The existing Office add-in model Dlls were deployed (installed) onto machines running Office client via setup

packages or .msi files Rich extensibility experience - customize ribbon, areas of the host application, context menus, events, deep APIs into the data/content (e.g. Excel API) Access to local machine resources Experience on rails Office is now on any device (Windows, Mac, iOS, Android and Office Online) Those compiled DLLs would only ever work on a Windows PC

Why did we need a new model? We needed an extensibility model to match, one that could work on any device Microsoft struggled in 2 other areas under the old model: Add-in code isolation (performance, stability) Deployment Designed to interact with data in a document,

workbook or mail item (same as old model) Designed to develop once and run in Office across all platforms and devices * The modern Office add-in model The add-in is essentially a web application that can be hosted anywhere Develop using standard web technologies (HTML, CSS, JavaScript)

Code does not get installed on end user devices The add-in is displayed in pre-defined locations/contexts within the host Office application Anatomy of an add-in Task pane add-in Add-in that runs beside a document/mail with read/write access Word, Excel, PowerPoint, Project, Outlook Add-in

contexts Content add-in Add-in that runs within a document content with read/write access Excel, PowerPoint, Access Add-in command Command in the Office UI to launch add-in or perform UI-less operation Outlook and Outlook Web Access (OWA)

Task Pane add-ins [Demo] Task pane add-in Add-in that runs beside a document/mail with read/write access Word, Excel, PowerPoint, Project, Outlook Add-in contexts Content add-in

Add-in that runs within a document content with read/write access Excel, PowerPoint, Access Add-in command Command in the Office UI to launch add-in or perform UI-less operation Outlook and Outlook Web Access (OWA) Content addins [Demo] Task pane add-in

Add-in that runs beside a document/mail with read/write access Word, Excel, PowerPoint, Project, Outlook Add-in contexts Content add-in Add-in that runs within a document content with read/write access Excel, PowerPoint, Access Add-in command

Command in the Office UI to launch add-in or perform UI-less operation Outlook and Outlook Web Access (OWA) Add-in commands [Demo] Office.js is the new Office API This is a JavaScript library that you can include in the web page of your add-in

Office.js the JavaScript API for Office Provides access to the object models of host Office application (including current document or item) Office.js dynamically loads in Common APIs (apply to all Office applications) and host specific APIs (such as the Word API or Excel API) This provides strongly types object models

This allows your add-in to interact with the Office app Microsoft iterating quickly on these APIs to remove barriers in converting VSTO add-ins Example Office.js code Deployment is the act of associating an add-in manifest with a user Add-ins can be acquired through the Office store Enterprise add-ins can be made available using a private

add-in catalog Deployment No code to install on user machines/devices No elevated permissions needed Install on one host installs on all hosts Centralized deployment controls for organisations Deploymen t from Office Store

[Demo] Different Hosts Different UX Different Hosts Different UX Cross-platform support. Runs in Office for Windows, Mac, iOS, Android and Office Online.

Modern addin advantages over VSTO Centralized deployment and distribution. No code installed on end user machines. Add-ins do not affect the performance and stability of the host application. The application is evergreen, because it's centrally hosted making a change to the web app makes it available to all users immediately. Everyone is on the same version.

Based on standard web technology. No tie in to using Microsoft stack for developing it. Old model was on rails (Visual Studio, C#/VB, .Net Framework, VSTO) New model is web standards (HTML, CSS, JavaScript) What does this mean for Office developers?

Develop on Windows, Mac or Linux (Visual Studio code work on all of these) HTML, CSS & JavaScript by themselves are difficult to scale when building Enterprise apps Use JavaScript frameworks (Angular, React) Use TypeScript instead of JavaScript (strongly typed) You are essentially a web developer = power, freedom, confusion and maybe paralysis But this is only part of the developer story Most add-ins consist of a front-end AND a backend

The Full Stack Developer Front-end (Presentation layer - HTML, CSS, JavaScript) runs on the users device in a browser Back-end (Business logic and data layers) runs on your server or hosted environment Front-end OnePlaceMail Stack

Alternatives Framework: Angular (SPA) Language: TypeScript UI: Office UI Fabric, CSS IDE: Visual Studio Code React, Aurelia JavaScript Bootstrap, Kendo UI, LESS, SAAS Visual Studio, Sublime Text, Atom, WebStorm

.Net Web API (C#) Hosting: Azure Web App IDE: Visual Studio Node.js, Python, PHP, Azure Functions, AWS Lambda IIS, Apache, Serverless (Azure, AWS) Huge array of options (depends on language/tech) Office 365 (SharePoint) SQL, Azure (CosmosDB, Blob, Table, Queues),

MySQL, PostGres, Mongo DB Back-end Data Storage Office is now available on any device The extensibility story has transitioned to match Summary

This is a big shift for traditional Microsoft developers There is much more choice for development technology and tooling Key challenge is in understanding the different technologies and choosing wisely https://dev.office.com/getting-started https://dev.office.com/code-samples https://developer.microsoft.com/en-us/fabric https://angular.io/ https://reactjs.org/

Resources https://www.oneplacesolutions.com/ @CameronDwyer Q&A camerondwyer.wordpress.com www.linkedin.com/in/camerondwyer www.oneplacesolutions.com

Recently Viewed Presentations

  • Chapter 8: Energy Balance and Weight Management

    Chapter 8: Energy Balance and Weight Management

    Energy Balance and Weight Management: ... Energy for basic body functions Affected by body size, composition, age, and gender Energy Out: Fuel Uses Major components of energy expenditure Physical activity Highly variable Affected by body size, fitness level, type of...
  • CSE1301 - Kennesaw State University

    CSE1301 - Kennesaw State University

    Stack - first in, last out (FILO) Dictionary - key/value pairs. Methods to sort, search, iterate across these collections. Generic or Parameterized Collections.
  • Toothbrushing Techniques

    Toothbrushing Techniques

    Sometimes you can see some of the cast members on Survivor using a chew stick to clean their teeth. In the mid 1800's, the first toothbrush was made, and then by the early 1900's, toothbrushes were being produced.1 ... Repeat...
  • MLA 7.0 Citation Format and INFOhio (for Teachers)

    MLA 7.0 Citation Format and INFOhio (for Teachers)

    * MLA 7.0 Style Manual MLA has published their 7th edition of the MLA Style Manual and Guide to Scholarly Publishing. Changes took place in April 2009, however many schools (and online databases) are just now making the changes. There...
  • ESD Technology Team - University of Hong Kong

    ESD Technology Team - University of Hong Kong

    Don't leave USB drive unattended. Keep it safe. Don't use USB drive from unknown source. Report to supervisor if lost USB drive that contains sensitive data. Cloud storage. Before putting data to Cloud, you should consider: ... ESD Technology Team
  • Circle Theorems - St Sampsons High School

    Circle Theorems - St Sampsons High School

    Minor Segment. ARC … a line which touches the circumference at one point only. From Italian . tangere, to touch. Properties of circles. When angles, triangles and quadrilaterals are constructed in a circle, the angles have certain properties. ... Circle...
  • 디자인마케팅

    디자인마케팅

    크리에이티브 발상법 Company Logo @ 최성재교수
  • Peter Peter Matthew 3:1-6 (Read)  In those days

    Peter Peter Matthew 3:1-6 (Read) In those days

    Luke 22:31-38 (Read)Vs 31-34: 'Simon, Simon, Satan has asked to sift all of you as wheat. But I have prayed for [Greek - peri] you [singular], Simon, that your [singular] faith may not fail. And when you[singular] have turned back,...