BROADCASTS.com

JSJ 268 Building Microsoft Office Extensions with Javascript with Tristan Davis and Sean LabereeThis episode is live at the Microsoft Build 2017 with Charles Max Wood and AJ O\u2019Neal. We have Tristan Davis and Sean Laberee from the Office Team at Microsoft. Tune in and learn more about what\u2019s new with Microsoft Office Extensions![00:01:25] \u2013 Introduction to Tristan Davis and Sean LabereeTristan Davis and Sean Laberee are Program Managers on the Microsoft Office team, focused on Extensibility.Questions for Tristan and Sean[00:01:45] \u2013 Extending Office functionality with Javascript\xa0Office isn\u2019t just an application on Windows that runs on your PC. It is running on iPhone, iPad, Android tablet, and apps on the browser with Office Online. The team needs a new platform, add-ins, which allow you to build apps that run across all places. It\u2019s HTML and Javascript. HTML for all the UI and a series of Javascript module calls for the document properties. Sometimes we call it OfficeJS.[00:03:20] \u2013 This works on any version of Office?It works on Office on Windows, Mac, Online and iPad.[00:03:55] \u2013 HTML and CSS suck on mobile?There are things that you\u2019re going to want to do when you know you\u2019re running on a mobile device. If you look at an add-in running on Outlook for iPhone, the developer does a lot of things to make that feel like part of the iPhone UI. Tristan believes that you could build a great add-in for Office using HTML and JavaScript.[00:05:20] \u2013 Are these apps written with JavaScript or you have a Native with WebView?Office itself is Native. All of it is Native code but the platform is very much web. The main piece of it is pointing at the URL. Just go load that URL. And then, you can also call functions in your JavaScript.[00:06:35] \u2013 Why would you do this? How does it work?The add-in platform is a way to help developers turn Word, Excel and PowerPoint into the apps that actually solve user\u2019s business problems. The team will give you the tools with HTML and JavaScript to go and pop into the Word UI and the API\u2019s that let you go manipulate the paragraph and texts inside of Word. Or in Excel, you might want to create custom formulas or visualizations. The team also let people use D3 to generate their own Excel charts.And developers want to extend Office because it\u2019s where a lot of business workers spend their days 0 in Outlook, Teams, Word, Excel.[00:10:00] \u2013 How did this get delivered to them?There are 2 ways to get this delivered. One, there\u2019s an Office Store. Second, if you go into Word, Excel, and PowerPoint, there\u2019s a store button and you can see tons of integrations with partners.For enterprises, IT can deploy add-ins to the users\u2019 desktops without having stress about deploying MSI\u2019s and other software deployments that the web completely rids off. The add-ins make a whole lot of pain the past completely go away.[00:11:00] \u2013 Everybody in the company can use a particular plug-in by distributing it with Office?That\u2019s right. You can go to Office 365 add-in experience. Here\u2019s the add-in and you can to specific people or everyone who\u2019s part of a group.For the developer\u2019s perspective, if you have the add-in deployed to your client, you could actually push updates to the web service and your users get the updates instantly. It\u2019s a lot faster turn-around model.[00:14:20] \u2013 What about conversations or bot integrations?There\u2019s the idea of connectors at Teams. You can subscribe to this web book and it\u2019ll publish JSON. When the JSON is received, a new conversation inside of Teams or Outlook will be created. For example, every time someone posts on Stack Overflow with one of the tags that team cares about, it posts on Outlook.It\u2019s a great way to bring all the stuff. Rather than have 20 different apps that are shooting 20 different sets of notifications, it\u2019s just all conversations in email, making do all the standard email things.And in the connector case, it\u2019s a push model. The user could choose what notifications they want.You\u2019d also learn things like bots. You can have bots in Teams and Skype. The users can interact with them with their natural language.[00:18:40] \u2013 How about authentication?As long as you\u2019re signed into Office, you can call JavaScript API to give you an identity token for the sign in user and it will hand you a JWT back. That\u2019s coming from Azure Active Directory or from whatever customer directory service. That\u2019s standard.If you want to do more, you can take that identity token and you can exchange that for a token that can call Microsoft graph. This app wants to get access to phone, are you okay with that? Assuming the user says yes, the user gets a token that can go and grab whatever data he wants from the back-end.[00:20:00] \u2013 Where does it store the token?That\u2019s up to the developer to decide how they want to handle that but there are facilities that make sure you can pop up a dialog box and you can go to the LO-flow. You could theoretically cache it in the browser or a cookie. Or whatever people think is more appropriate for the scenario.[00:20:55] \u2013 What does the API actually look like from JavaScript?If you\u2019re familiar with Excel UI, you can look at Excel API. It\u2019s workbook.worksheets.getItem() and you can pass the name of the worksheet. It can also pass the index of the worksheet.[00:22:30] \u2013 What\u2019s the process of getting setup?There\u2019s a variety of options. You can download Office, write XML manifest, and take a sample, and then, side loads it into Office. You can also do that through web apps. There\u2019s no install required because you can go work against Office Online. In the Insert menu, there\u2019s a way to configure your add-ins. There\u2019s upload a manifest there and you can just upload the XML. That\u2019s going to work against whatever web server you have set up.So it\u2019s either on your local machine or up in the cloud. It\u2019s as much as like regular web development. Just bring your own tools.[00:24:15] \u2013 How do you protect me as a plug-in developer?There\u2019s an access add-in that will ask your permission to access, say, a document. Assume, they say yes, pipes are opened and they can just go talk to those things. But the team also tries to sandbox it by iframes. It\u2019s not one page that has everybody\u2019s plug-ins intermingle that people can pole at other people\u2019s stuff.[00:27:20] \u2013 How do you support backward compatibility?There are cases where we change the behavior of the API. Every API is gated by requirement set. So if a developer needs access to a requirement set, he gets an aggregate instead of API\u2019s that he can work with but it isn\u2019t fixed forever.But it\u2019s not at that point yet where we end up to remove things completely. In Office JS, we\u2019ve talked about API\u2019s as one JavaScript library but really, it\u2019s a bootstrap that brings in a bunch of other pieces that you need.[00:30:00] \u2013 How does that work on mobile? Do they have to approve download for all components?You can download components by using the browser that the operating system gives. It\u2019s another one of the virtues of being based on the web. Every platform that has a web browser can have JavaScript execution run-time. It allows for the way that their app guidelines are written.[00:33:15] \u2013 How about testing?It\u2019s a place where there\u2019s still have work to do. There\u2019s a bunch of open-source projects that partners have started to do that. What they\u2019ve done is they\u2019ve built a testing library. Whatever the mock is, it's just a thing on Github. It is open-source friendly. So the team could be able to contribute to it. \u201cHere\u2019s an interesting test case for this API. I want to make sure that it behaves like this.[00:35:50] \u2013 Could you write it with any version for JavaScript e.g. TypeScript?A Huge chunk of the team is big TypeScript fans. They\u2019ve done a lot of work to make sure that TypeScript experience is excellence.Type is basically a collection of typing files for TypeScript. There\u2019s a runtime process that parses your TypeScript, gives you feedback on your code, and checks for errors. You can also run it in the background.There\u2019s an add-in called Script Lab. Script Lab is literally, you hit the code button and you get a web IDE right there. You can go start typing JavaScript code, play with API\u2019s, and uses TypeScript by default. It\u2019ll just actually load your code in the browser, executes, and you can start watching.[00:39:25] \u2013 Are there any limitations on which JavaScript libraries you can pull in?There a no limitations in place right now. There are partners that use Angular. There are partners that are big React fans. If you\u2019re a web dev, you can bring whatever preferences around frameworks, around tools, around TypeScript versus JavaScript.[00:45:20] \u2013 What\u2019s the craziest thing you\u2019ve seen done with this API?Battleship was pretty cool. There\u2019s also Star Wars entering credits theme for PowerPoint.[00:46:40] \u2013 If a developer is building a plug-in and get paid for it, does Microsoft take credit for that?There are 2 ways that folks can do it. You can do paid add-ins to the store. Either you do the standard perpetual 99 cents or you can do subscriptions, where it\u2019s $2.99/month. Tristan encourages that model because integrations are just a piece of some larger piece of software.But Microsoft is not in the business of trying to get you to pay me a little bit of 10 cents a dollar. It\u2019s really in the business of making sure that you can integrate with Office as quickly as possibly can.When the users go to the store, they can use the same Microsoft account that you use to buy Xbox games or movies in the Xbox, Windows apps in the Windows store.[00:52:00] \u2013 The App ModelIf folks are interested in the app model, they should go to dev.office.com to learn more about it because that\u2019s where all the documentation is. Check out our Github. Right there in the open, there\u2019s the spec. Literally, the engineers who

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.