268

JSJ 268 Building Microsoft Office Extensions with JavaScript with Tristan Davis and Sean Laberee


JSJ 268 Building Microsoft Office Extensions with Javascript with Tristan Davis and Sean Laberee

This episode is live at the Microsoft Build 2017 with Charles Max Wood and AJ O’Neal. We have Tristan Davis and Sean Laberee from the Office Team at Microsoft. Tune in and learn more about what’s new with Microsoft Office Extensions!

[00:01:25] – Introduction to Tristan Davis and Sean Laberee

Tristan Davis and Sean Laberee are Program Managers on the Microsoft Office team, focused on Extensibility.

Questions for Tristan and Sean

[00:01:45] – Extending Office functionality with Javascript

Office isn’t 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’s 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] – This works on any version of Office?

It works on Office on Windows, Mac, Online and iPad.

[00:03:55] – HTML and CSS suck on mobile?

There are things that you’re going to want to do when you know you’re 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] – 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] – 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’s business problems. The team will give you the tools with HTML and JavaScript to go and pop into the Word UI and the API’s 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’s where a lot of business workers spend their days 0 in Outlook, Teams, Word, Excel.

[00:10:00] – How did this get delivered to them?

There are 2 ways to get this delivered. One, there’s an Office Store. Second, if you go into Word, Excel, and PowerPoint, there’s a store button and you can see tons of integrations with partners.

For enterprises, IT can deploy add-ins to the users’ desktops without having stress about deploying MSI’s 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] – Everybody in the company can use a particular plug-in by distributing it with Office?

That’s right. You can go to Office 365 add-in experience. Here’s the add-in and you can to specific people or everyone who’s part of a group.

For the developer’s 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’s a lot faster turn-around model.

[00:14:20] – What about conversations or bot integrations?

There’s the idea of connectors at Teams. You can subscribe to this web book and it’ll 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’s a great way to bring all the stuff. Rather than have 20 different apps that are shooting 20 different sets of notifications, it’s just all conversations in email, making do all the standard email things.

And in the connector case, it’s a push model. The user could choose what notifications they want.

You’d 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] – How about authentication?

As long as you’re 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’s coming from Azure Active Directory or from whatever customer directory service. That’s 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] – Where does it store the token?

That’s 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] – What does the API actually look like from JavaScript?

If you’re familiar with Excel UI, you can look at Excel API. It’s workbook.worksheets.getItem() and you can pass the name of the worksheet. It can also pass the index of the worksheet.

[00:22:30] – What’s the process of getting setup?

There’s 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’s no install required because you can go work against Office Online. In the Insert menu, there’s a way to configure your add-ins. There’s upload a manifest there and you can just upload the XML. That’s going to work against whatever web server you have set up.

So it’s either on your local machine or up in the cloud. It’s as much as like regular web development. Just bring your own tools.

[00:24:15] – How do you protect me as a plug-in developer?

There’s 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’s not one page that has everybody’s plug-ins intermingle that people can pole at other people’s stuff.

[00:27:20] – 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’s that he can work with but it isn’t fixed forever.

But it’s not at that point yet where we end up to remove things completely. In Office JS, we’ve talked about API’s as one JavaScript library but really, it’s a bootstrap that brings in a bunch of other pieces that you need.

[00:30:00] – 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’s 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] – How about testing?

It’s a place where there’s still have work to do. There’s a bunch of open-source projects that partners have started to do that. What they’ve done is they’ve 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. “Here’s an interesting test case for this API. I want to make sure that it behaves like this.

[00:35:50] – Could you write it with any version for JavaScript e.g. TypeScript?

A Huge chunk of the team is big TypeScript fans. They’ve done a lot of work to make sure that TypeScript experience is excellence.

Type is basically a collection of typing files for TypeScript. There’s 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’s 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’s, and uses TypeScript by default. It’ll just actually load your code in the browser, executes, and you can start watching.

[00:39:25] – 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’re a web dev, you can bring whatever preferences around frameworks, around tools, around TypeScript versus JavaScript.

[00:45:20] – What’s the craziest thing you’ve seen done with this API?

Battleship was pretty cool. There’s also Star Wars entering credits theme for PowerPoint.

[00:46:40] – 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’s $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’s 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] – The App Model

If folks are interested in the app model, they should go to dev.office.com to learn more about it because that’s where all the documentation is. Check out our Github. Right there in the open, there’s the spec. Literally, the engineers who are coding the product are reading the same marked-down files in the same repo that you, as a developer, can come and look at. And you can comment. You can add issues like you could have a dialogue with that PM. Under the OfficeDev, you’ll find a tunnel repository that contains samples. Our docs are there.

Picks

AJ O'Neal

  • Lithium

Charles Max Wood

Tristan Davis

Sean Laberee

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

JSJ 268 Building Microsoft Office Extensions with Javascript with Tristan Davis and Sean Laberee

CHARLES:

There you go. Sounds like my wife, she tells me where I’m wrong and she’s my boss.

[Music]

[This episode is sponsored by hired.com. Every week on hired, they run an option where a thousand tech companies in San Francisco, New York and LA bid on Javascript developers providing them with salary and equity upfront. The average Javascript Developer gets an average of 5 to 15 introductory offers and an average salary offer of a $130,000 a year. Users can either accept an offer, go right into interviewing of a company, or an item without continuing obligations. It’s totally free for users and when you’re hired, they also give you a $2,000 bonus as a thank you for using them. But if you use the Ruby Rogues link, you’ll get a $4,000 bonus instead. Finally, if you’re not looking for a job but know someone who is, you can refer them to Hired and get $137,000 bonus if they accept the job. Go sign up at hired.com/javascriptjabber.]

CHARLES:

Hey, everybody and welcome to the Javascript Jabber show. We are again live at Microsoft Build. For our panel today, we have AJ O’Neal.

AJ:

I’m so glad that Chuck is now confused just when we are and aren’t live. That’s my work.

CHARLES:

That’s true. As I’m not coming you live anymore. This Build was obviously a while ago. I’m Charles Max Wood from Devchat.tv. We have two guests today. We have Tristan Davis. Do you want to say hi?

TRISTAN:

Sure, hi. My name’s Tristan Davis. I’m a PM on the Office team. This is going to be where the Office platform. Right, that’s Microsoft Office, yes.

CHARLES:

Alright. And we also have Sean Laberee.

SEAN:

Yup, hi. I’m also a Program Manager on the Office team, Microsoft Office, of course, focused on Extensibility.

CHARLES:

Nice. So he’s the guy who set all this up, he said that you could talk to us a little bit about extending Office functionality with JavaScript.

SEAN:

Yeah, absolutely. Well, I think mostly we think of extending Office today, they think of VBA. VBA has been sort of been glued in the people’s minds as what a means to extend Office.

But we’ve done as a team is we really try to rethink what it means to extend Office now. And that Office isn’t just an application on Windows that runs on your PC. But Office is running on my iPhone, it’s running on my iPad, it’s running on my Android tablet at home, you could run access on our apps on the browser with Office Online. So we said, hey, we need a new platform that really allows you to build apps that run across all those places like I want you to build an add-in for Word. The user doesn’t care whether they’re using Word for Mac, or Word on the browser, or Word on their phone. That same add-in is just part of what it means to use Word. So we did that and we say, hey, we need to rethink our platform in terms of HTML. Really our modern Office add-in or here it’s called web add-in is exactly that. It’s HTML and Javascript. HTML for all the UI, if you want to render a task pane. Task pane is just an HTML service. You can go pull whatever controls you want. And then, to interact with the document models, go touch words UI, to change content and want to replace cells in Excel. If I want to go through with the document properties, all of that is just a series of Javascript module calls.

And sometimes we call it Office JS.

CHARLES:

Okay, just to clarify, because I think people kind of think, “Oh, so Office is no longer just a desktop app. You’re saying that this will work for the Web Office. But this works on any version of Office?”

SEAN:

That’s right. So today it works on Office on Windows, obviously, Office on Mac, Office Online, that’s the Office apps that run in the browser, and Office for iPad.

CHARLES:

And you can do it with Javascript?

SEAN:

And you can do it with Javascript and HTML. You can write a web app, you can write an Office add-in. It’s just really that web app, plus an XML file that tells Office, “Hey, here’s how to plug things into the ribbon and here’s what URL has HTML and Javascript that you need to render to the rest of the app.”

AJ:

I’ve got an immediate question here.

SEAN:

Awesome.

AJ:

Because people are always talking about how on mobile, HTML and CSS suck.

And so you got to write everything Native or the user experience is going to be terribly awful. So now you’re in the position of either telling you that they’re wrong, that you can make it a great experience with HTML and CSS, or that Office isn’t a great experience.

TRISTAN:

I think it can make a great experience using HTML and Javascript. I think what you’ll find is our team really does believe that the web lets you do powerful experiences that work cross-platform. Obviously, there are things that you’re going to want to do when you know you’re running on a mobile device, right? Like if you look at add-in running on Outlook for iPhone, the developer does a lot of things to make that feel like part of the iPhone UI, right? You’ll skin your controls differently. There are obviously things that you’ll do about making sure that it’ll agree with touch. I do fundamentally believe that you can build a great add-in for Office using HTML and JavaScript.

AJ:

High five!

CHARLES:

One other thing that I’ll just add to that because up until December, I was actually on an iOS development show.

And it was funny how many times it was, well, we needed these custom widgets in our Native app. And so what they did is they inserted a WebView, and then, they styled it up with CSS. They made it look like the rest of the app. You would never know. So yeah, it’s not an uncommon issue, I think. Now does that mean that these apps are written with Javascript or are you essentially doing what I just said? Or you have a Native app and you insert a WebView?

SEAN:

So you know, Office itself is Native. We’ve built Office Native for iPad and for Mac. All of it is Native code but our platform is very much web. So when you’re talking about the add-in, the add-in is literally just, hey, that manifest is like… the main piece of it is pointing at the URL. I’ll go load that URL and then, you’re off to the races. And then, you tell us, oh, by the way, I want a button on the ribbon that calls this function in my Javascript. And the button that opens this URL will have a task pane. That task pane is rendered in standard task pane UI, instead of Office.

CHARLES:

So I’m imagining that some of our listeners are probably having the same issue I’m having at this point. And that is, you know, I do JavaScript stuff on the web. I’m used to manipulating the DOM. What exactly am I going to be doing with extending Office, right? I mean, am I filing with Excel cells or what about Word? What kind of extension, how does that interface… is it similar to the DOM? Is it different from the DOM? I guess there are 2 questions here. One is, why would you do this? What possibilities does this open up? And then, the other question is how does it work?

TRISTAN:

Sure. I’m going to split those. On the first part, why would you do this? Before I joined the Platform team in Office, I worked on the Word team, the core Word team for 12.5 years. I love Word.

So one of the things that are true about Word is no one wants a generic word processor. They want an app that does the legal contracts that make the money. They want an app that does putting together memos for customers that use standard letterhead and use the standard wording. And really, the add-in platform is a way to help developers turn Word, Excel and PowerPoint into the apps that actually solve user’s business problems. I’m not saying that Word isn’t awesome. I’m saying, though, Word that has a contract generation tool that is super awesome. And we’ll give you the tools with HTML and JavaScript to go and pop into the Word UI and the API’s that let you go manipulate the paragraphs and texts inside of Word. So that you can build exactly what the user wants. You can build that contract generation tool or that memo creation tool. Or in Excel, you might want to go create custom formulas. You might want to go create your own custom visualizations. We have a set of charts that we ship in that crate.

We ship custom charts that are bubble charts. The size of the bubbles is rendered. We let people use D3 to generate their own Excel charts, as well. So you can take all the pieces of Office and really make them super customizable for what you need Office to do for you.

CHARLES:

Yeah, I think to put it in terms, developers who really latch onto… I know a lot of people customize their development environments. So I use the plug-ins, right? Or Visual Studio Code, you know, I pull in the extensions that give me syntax highlighting, function lookups, and all that stuff. We may all be using Visual Studio Code but ultimately, my Visual Studio Code may look totally different from yours because I’m working in a different way than you.

TRISTAN:

That’s exactly right. Office is only Office, I think when it’s combined with all these plug-ins, all these add-ins. It customizes whatever you want it to be. Just like, we as developers, exactly alike. And VS out of the box has a heck of a lot of customization. Word does some things great. And then, there’s a bunch of things that can be added onto it.

And we really want developers to build and add all those things and help users accomplish whatever specific task they need to accomplish.

SEAN:

Another thing about why developers would want to extend Office is it’s where a lot of business workers spend their days. We live our lives in Outlook, and now Teams, and writing Word doc, working with Excel all the time. So it’s a great way to kind of meet your customers where they are, rather than have them go and learn some other tool or some other thing. You can build and experience that fits this part of their workflow. You can deliver that value to them immediately.

CHARLES:

Yeah, that makes sense. I mean ultimately that’s what we’re doing anyway, right? The software developers are solving problems for some business persons somewhere.

SEAN:

And the value of Office add-ins is that you actually get to do it in a user experience that they’re already familiar with.

TRISTAN:

So less relearning…

CHARLES:

That makes sense. So how did this get delivered to them? Is there like an Office Store?

TRISTAN:

There is, yes. There are actually 2 ways to get this delivered. One, there’s an Office Store. If you go into Word, Excel, and PowerPoint, there a store button and you can go and see just tons of integrations that we have in partners. And that works for like either consumer is going and get things like, if you’re on Outlook, you might want to go and select addresses and look for places to go and eat, or your Uber ride reminder that you can say, “Hey, 15 minutes before this meeting. Send me a text that reminds me to go and call Uber so they get their own time.” And then, for enterprises, we say, “Hey, IT needs to deploy add-ins to users’ desktops.” That makes it really easy. Like I don’t want anyone having to stress about deploying MSI’s. And there’s a lot of intricacies and standard software deployment that the web completely gets rid off, right? We think we can bring that all goodness of it’s just a web app. It’s just a URL to the world of add-ins and so we make a whole lot pain in the past completely go away.

CHARLES:

So you can do an IT management solution where it’s like, “Okay, everybody in the company uses this particular plug-in so you just distribute it with Office.”

TRISTAN:

That’s exactly right. You can go up to the Office 365 add-in experience and say, “Hey, here’s an add-in. I want to go to these specific people. Or here’s an add-in I want to go to everyone who is part of this group.” And the cool thing is then, I can say, “Hey, I created a group called Sales add-ins and every Sales guy who joins the company, just join that group. Next time you do Excel, all the right add-ins just show up.” You don’t do like go and find 15 installers. There’s not a lot of stress that the software you need just get all pushed in automatically.

SEAN:

The other thing is from a developer perspective is once you’ve got the add-in deployed to your client, even though it feels like it’s client software, it’s actually backed by a web service. You could actually push updates to the web service and your users get the updates instantly the next time they invoke the app. So it’s a lot faster of a turn-around model than folks who’ve programmed against Office in the past.

CHARLES:

Nice. So what can you do it for then? I mean, you mentioned Grasp and D3.

TRISTAN:

There’s a lot you can do but we have a bunch of great partners who do things like, you know, Office had clipart forever. And Clipart doesn’t look awesome in 2017. And it’s on the side of so many…

SEAN:

Yes, Comic Sans in MS and Clipart.

CHARLES:

I want to put Clippy back.

TRISTAN:

I love Clippy. You know, Clippy and… so there’s a bunch of great partners who do things like, “Hey, here’s a bunch of really high-quality photography.” And the user can click and search for, like give me pictures of dogs, or give me pictures that have a lot of white space that I can put text on top of them. And then click and insert those pictures into their Word docs and go have really great looking presentations.

AJ:

So you’ve got like a GIPHY service in Office?

SEAN:

We do.

AJ:

But like business GIPHY?

TRISTAN:

We have a GIPHY service for Outlook on your iPhone. You can go and get the GIPHY add-in. And you can click reply with GIPHY and find the right GIF that really represents what you want to say about in your email.

CHARLES:

I really need that.

SEAN:

Well, it’s awesome. There’s a lot of times where it’s so much better to reply than anything that I can write.

TRISTAN:

So we have that class of things in Word, just a ton of just document assembly stuff, where it’s like, “Hey, here’s a template that has a placeholder for the customer’s name and their address, ten other things.” I don’t want everybody in the company having to figure out of how my template should look. So they just click a button and they say, “Hey, I’m going to send a letter to Sean. And it feels that all the right contents are all in the right places.” Make it just save and send that. So really just like in Excel, there’s custom chart. Some of it’s done in D3, the JavaScript thing that you can now slack in any range in Excel and use a D3 visualization. There’s a ton of things that pull in data like data from your back-end CRM get sucked into Excel so that you can go and change fields in Excel, which is a lot more familiar than most instance. And then, press publish and publish those changes. On Outlook, there’s just a ton of stuff you can go and look up.

Like, here’s a customer sending me an email, what else do I know about that customer? Okay, here’s a bunch of other information you should know if you apply to them. Or things like Uber, Yelp, or GIPHY, all kinds of great ways to just turn your email into a more interactive place to work.

CHARLES:

So that’s Outlook and you mentioned Word.

AJ:

So what about the conversations or bot integrations?

TRISTAN:

Yes, totally. So the add-ins are one thing you code using JavaScript. And then, there’s a bunch of other things you can do, right? Like one of the things you can do, when I look at Teams, is the idea of connectors. That’s literally just saying, “Hey, subscribe to this web book and we’ll publish JSON. When we get that JSON, we’ll create a new conversation inside of Teams or inside of Outlook.” It is formulated in a nice looking card. So I can say, hey, for example, our team has a setup so that every time someone posts on Stack Overflow with one of the tags we care about, it posts in Outlook. Someone asks a question, here’s the first 256 characters of it. And we can have, “Who knows the answer to this question?”

(00:15:00)

Who’s going to reply to this guy? I’ll have a little conversation quickly in Outlook and somebody goes off to Stack and says, “Oh, the answer is this.” We all make sure that all these questions get answered super quickly. And then, you’d learn the things like bots, where you can have bots in Teams, or bots in Skype, where the back-end of that can be anything you want. And users are interacting with it in their natural language for sure.

CHARLES:

So I’m wondering, though, in your example, say, you have something that’s monitoring Stack Overflow?

TRISTAN:

Yeah.

CHARLES:

How does that work? Is there an API that you’re heading or…

TRISTAN:

Yeah, that’s exactly right. So connectors are literally just monitoring Stack Overflow. Wherever partner we’re connecting to, “Hey, all you need to do is create a web book that you can hit us with a JSON and format it like this.” And then, just publish that web book and send us that JSON data and we take it from there. So that one is just literally declared, so on the server-side, you know, you can be using whatever you want to go and publish that web book to us. On our side, we’re listening, “Cool, something came through.” That starts the conversation.

(00:16:00)

Whether that’s Stack or you know, for Visual Studio, for VSTS, you can have a setup for, “What happens to this build?” “Oh build failed.” You know, you get a conversation and someone can go, “Okay, who broke the build? What’s going on? Who’s going to fix this?” And someone can actually run over and take care of it. But it’s a great way to bring all that stuff that’s happening in Outlook, which for a lot of business users, they live in Outlook. Great. Let’s take all the notifications in the universe and rather than have 20 different apps that are shooting 20 different sets of notifications, it’s just all conversations in email, making do all the standard email things. They can forward it along. They can add people and have a discussion on whose fault that build break was, all the fun stuff that you won’t be able to do. For all the services in the universe, all within Outlook.

CHARLES:

So you’re essentially looking for these services to push data to you?

SEAN:

In the connector case, it’s a push model. So the service can say, “Hey, here’s a little config UI so the users could choose what notifications they want and then, they push us the data.

Add-ins are a little more of an open season. It is like, “Hey, it’s just HTML and JavaScript, whatever you want to do, show us rectangles of UI and task panes or dialog boxes.” And then, bots – natural language, right? It’s just, I say to the bot, “Hello.” And the bot will come back and say, “Hi, here are the things I can do.” And you can go on and have a discussion or whatever you want.

CHARLES:

So one other thing that I’m kind of going to go back to another example you gave and that was you know, a template, for example. Let’s say that you want to pull information, not necessarily out of Outlook, in the Word, or Excel, but of a third-party service like CRM or something. Can you build those kinds of web calls out from your Javascript?

SEAN:

Absolutely. What folks do is, hey, here’s a Word template with a bunch of placeholders. I need to go to my back-end, in CRM, which could be anything. It could be Salesforce, could be Dynamics. It could be some custom back-end that they have for 20 years. I’m going to go and grab the right data from all the back-end systems and pumped that into Word.

Or hey, I’ve got a setup or snippets of… if you’re going to talk about renewing of insurance, you should say it like this. And the user can say, hey, I need to write a letter that you know, we’re renewing the policy, the new premium is X. Okay, there’s the Word. Click a button and they can use our JavaScript API’s. Okay, cool, I have a new paragraph to Word. Here’s the text. And then, paragraph shows up right in the document. They users don’t have to type it. They don’t have to worry if they get the words right. It’s all stored in some back-end database that is kept by the company. Okay, here are the approved ways to talk about this ten or twenty things that we have to tell customers.

CHARLES:

So what about secret data, then? Like if I have to put in the username and password, in order to authenticate or you know, store some API key or a log token?

TRISTAN:

So one of the things we’re announcing at Build this year, which I think is super cool is we’re going to make it so that as long as the users are signed into Office, you can actually go and get a token straight from us.

So you can just call JavaScript API that says, hey, give me an identity token for the sign in user and we’ll hand back a JWT. That is whatever user signed in Office. And that’s coming from Azure Active Directory or from whatever customer directory service. And then, you got everything you need to authenticate them against your own back-end. And that’s standard. We don’t do anything secret or fancy. We’re trying to be very, very standard about that stuff. And then, if you want to do more, you can actually take that identity token and you can say, hey, can I exchange that for a token that can call the Microsoft graph? And we’ll give you back a token that you can then go and call our services. And go nuts, looking at user’s mail, calendar, contacts, all the intelligence that are inside and all the great stuff that we have up in our cloud, assuming that the user consents. This app wants to get access to phone and things. Are you okay with that? Assuming they say yes, you get a token that can go and grab whatever data you want from our back-end.

CHARLES:

What about third-party services like Google, for example?

I want to connect to Gmail. I have to go to the OAuth song and dance. Maybe I have two-factor authentication on my phone. Anyway, so I want to connect that way, where does it store that token? And how does it store securely?

SEAN:

Yeah, so we sort of leave that up to the developer to decide how they want to handle that. We have facilities that make sure you can pop a dialog box and you can go to the LO-flow. The token comes back. We try as many places we can to not sort of demand that you do things a certain way. “Hey, we don’t have a strong opinion, here’s the token.” Most dances do is then, sort up on their own service because they can do some… they can actually secure that token and build the right things to handling it. You could theoretically cache it in the browser or a cookie if you want to. You start to say agnostic to stuff like that and really a lot of people do, whatever they think is more appropriate for the scenario that they have.

CHARLES:

Right, so the other question that I have then is, what does the API actually look like from JavaScript to say, insert a paragraph, or create this graph, or you know, add this image in, or whatever?

TRISTAN:

So what we try to do is just sort of meld two worlds. And they’re kind of 2 very different worlds that hopefully we got a good job of melding. One is like the world of JavaScript and the other one is hey, there wasn’t existing object model. Many years, they have a very good representation of the object hierarchy of the apps and things you can do for Excel. There’s a workbook that’s a collection of worksheets. And those collections of worksheets have ranges and those ranges have names and all those fun stuff. So we said, hey, how do we bring all those in a sort of JavaScript syntax? And maybe fit some of the things in the past with some weird naming stuff 20 years ago when we call different objects? But try to keep the spirit of that object hierarchy similar to what we have before as we can.

So if you’re kind of familiar with Excel UI, you go look at Excel API, you’ll see that it’s workbook.worksheets.getItem() and you can go and say, pass the name of the worksheet. Or it can pass the index of the worksheet. Hopefully, if you’re super familiar with most of the JavaScript devs and the folks who have been doing old school Office com development, which we still love. We are looking to come forward into this era of sort of modern web dev. And they don’t get totally freaked out that this is something completely different with what they’re used to.

CHARLES:

That makes sense. So what’s the process of getting setup, then? Is it just install Word on your machine? And then, download the Office JS and then just kind of go nuts?

SEAN:

We actually provide a variety of options. So yeah, you can just essentially download Office. Write the XML manifest. Take a sample. And then, you can side load it into Office, sort of different mechanisms. But in another way, that you can do that is actually through the web apps. So there’s actually no install required because you can actually go work against Office online.

And in the insert menu, there’s a way for you to go and configure your add-ins. And then, there’s a upload a manifest there. So you just upload that XML file and that’s going to work against whatever web service that you have set up, either on your local machine or up in the cloud. And we try to make it as much as like regular web development as you want. Just bring your own tools. So if you’re very comfortable with Visual Studio or Visual Studio Code, party on. If you want to go use your own thing, you can do that, as well.

CHARLES:

So one other thing that I’m wondering about, then, is if it’s within the context of the desktop app, you know, there’s a lot of sandboxing that goes on. The operating system kind of handles a lot of that. On the web, it’s kind of a different animal, right? I don’t know how you’re handling this if you’re just loading the Javascript files and the manifest information from my plug-in. If I’m going to be a jerk, I could make it interact poorly with other plug-ins.

Or mess with people’s data, you know. Depending on how it’s loaded into the page, you know, it could be considered first-class citizen and actually really stuff up. So for the web experience, you know, how do you a) protect me as a plug-in developer from other people’s plug-ins and b) how do you make sure that the security works nicely so that they don’t, you know, reach in through my JavaScript and take advantage of what I got going on in my own back-end?

TRISTAN:

So we try to cover that too. You’re absolutely right. We stress a lot on how we sandbox these things. I don’t know. Rich clients on Windows are on Mac. Every add-in runs is a separate instance of the browser. And we go and sandbox and say, hey, I don’t want that guy accessing any local resources at all. Yup, you can go and call on the web, that’s totally cool.

Or you can use our API’s to get access to the document. That’s literally how… and even those are gated behind that manifest that they’ve talked about. You have to tell us I want information from the following things. And when the user goes and gets his add-in, we’ll say, hey, this add-in is going to be able to access the web. This access add-in will access the document. Are you cool with that? Assume they say, yes, then, we open those pipes and they can go talk to those things. But we really do try to sandbox the heck out of it on the web. They’re just iframes. And we iframe everything away so that, hey, it’s not one page that has everybody’s sort of plug-ins intermingle that I can go and poke at other people’s stuff. But we try to use iframes to sandbox the heck out of these things. Hey, you’re in a different domain, you’ll see your rectangle. You’ll see our API’s but you don’t have access to go mess bits of other DOM. Like, you can’t go to the browser and say, hey, I’m going to go change the CSS of the ribbon and make it look a little different. I’m going to delete some buttons because I don’t like the type that you have these buttons in this order.

(00:26:00)

We make sure that Office experience can only be sort of manipulated it through the ways that we prescribed, which ensures that Office kind of looks like Office. But the plug-ins, of course, can go and add things to the ribbon. You can still add buttons. You can tabs. You can only do it in ways that we say are okay. And not like, “I’m going to start hacking your DOM behind the scenes to try to turn it into something that it’s not.”

CHARLES:

Iframes, it just makes me kind of cringe a little bit. I’ve seen reviews so many times. But I’ve also dealt with the issues where you go to an iframe, and then to a page, and it doesn’t have the kind of access that it needs to do the job. So how do you allow it access then to the document?

TRISTAN:

That OfficeJS is really like… our JavaScript library is our answer to that. And we keep looking for, I would say, the JavaScript library is very much a result of us spending time with developers saying, “What does that pipe between you and Office need to look like?” What holes do you need?

What access do you need to the document? What things do you want to change? We constantly sort of… in real-time, adding capabilities to it, opening new pipes, opening new capabilities to hopefully let it do all things that I want there.

AJ:

So how do you handle…? I know I’m sure there must be API changes as part of this process. But you’re going to maintain backward compatibility with stuff. But then, you find, like, “Oh, well we need this API to change in such a way that it’s not that backward compatible.” And you end up splitting… I mean, there’s lots of old code. How does that work?

SEAN:

Yeah. One of the lucky things we got to do with the JavaScript model, the whole thing is kind of a, hey, we have 25 years of experience building the call API’s. I think we learned all the right things to do. We probably learned some of the wrong things to do. And we start aggregating all that knowledge and start building a new API from scratch. And a little bit of this is like, okay, we have all the foresight of with all the right intentions, here are the mistakes you’re going to make.

Let’s not make those ones. But we do have cases where we change the behavior of the API. And what we do there is every set of API’s is gated by something called requirement set. So you say, hey, I need access to this set of API’s. Server requirements said X, or maybe it’s Excel 1.1. And then, over time we can say, hey, we’re going to replace API A with API B. We’re going to create new requirement set for that. So a developer can say, hey, I need to have access to these requirement sets. And you get an aggregate instead of API’s you can go and work with. It isn’t like fixed forever. Largely, what you’ll see it do is backward compatibility is very important to us. Because one thing I think I’ve learned from the com days is you know, you still have add-ins that you’ve already written in the early 90’s that work in Office… because we’re really hardcore about backward compatibility. So very rarely, you see us break something versus say, okay, we’re going to deprecate that one in place. We want to create new requirement set or a new way of doing that as a second thing and tell developers, hey, you should have said you need that requirement set and get those API’s to do it that way.

We’ll see how it works out. You know, you can come back in 10 years and ask us how many times we trip over ourselves and how many deprecated requirements set that’s out there.

AJ:

Yeah, I’m just kind of wondering because when you’re talking about… I mean, I don’t know how big the Office it still is. But even hard drives are smaller than they used to be. Yeah, so you can’t take 25GB of space and certainly, you can’t on your phone. In some way, you have to remove stuff or maybe you don’t.

TRISTAN:

That is a great question. I would say we’re not at the point yet like we have a ton of API’s. We’ll announce a bunch more this week. We’re sort of rapidly building out what you can do especially in Excel right now. We haven’t gotten to a point where we had to start talking about removing things. It’s an interesting question about whether or not over time, we’re going to end up to remove things completely. One of the things we do in OfficeJS, we talked about API’s as one Javascript library but really it’s a bootstrap that brings in a bunch of other pieces that you need. So a developer can say, hey, I need XYZ. You just bootstrap it in real-time.

Okay, here are the 3 little parts of the library that we actually need. We don’t have to bring the whole Monolith in.

AJ:

How does that work on mobile where the app approves of having all the components? Or do they allow to download components now?

[Music]

[This episode is sponsored by Newbie Remote Conf. Newbie Remote Conf is a 2-day completely virtual conference hosted by, none other than, Charles Max Wood. If travel expenses are an issue where you just can’t afford to be away from home for 2 days.Then, join us! It’s virtual. This conference is focused on people who are new to programming who want to learn what the pros know, or just get a leg up, and getting a job, and getting into the programming community. We will have speakers from all over the programming community to help you stay current in a Slack room where you can connect with speakers and other attendees in real-time. We’ll also have a live round table video chat for attendees and speakers. Plus, we’ll provide the top recordings to you within days from the conference.]

TRISTAN:

You can go and download components because we’re using, like in the iOS case, we’re just using Safari. We’re using the browser that the operating system gives us.

(00:31:00)

And we have a little bit of flexibility going on and say, okay, because these things are just web apps, as long as we’re living in the box we’ve been given, here’s the browser control. Here’s what I can do. We’re able to sort of do that bootstrapping on the fly. It’s another one of the virtues of being based on the web. Every platform, even you know, restricted platforms like mobile, I have a web browser, I have a JavaScript execution run-time, allow for the way that their app guidelines are written, apps that are using that sort of dynamic melding capability. So rather than Office try to go and build some… oh, here’s a Native DLL. That should be downloading binaries from the web in real-time. We can say no, that’s just the web. It goes to the same execution run-time that any other web platform goes through.

CHARLES:

Yeah, iOS, they actually consider HTML, CSS, and JavaScript to be static assets. And so, they’re downloadable and replaceable within an app.

And so yeah, you get around that down there.

SEAN:

So you know, we have web kit that sets all that stuff in. And then, in the future, we don’t want UI. We can just go reference JavaScript core. And they must still be able to pull JavaScript libraries and do that runtime instead of Office, well respecting all the rules of the platform.

CHARLES:

Yeah, that’s also why, for example, React Native apps and Cordova apps were able to just, you know, they can push hotfixes up because all of their logic is executed by JavaScript core. And since Javascript is considered a static asset, they can just do that. And then, a lot of the rest of it, you know, the Native components within it are binaries and so we can’t replace those on the fly.

TRISTAN:

It’s just another one of the many reasons why we love the web. It gives us this, like, “Oh, if Office isn’t Office without add-ins, you need a way to make sure that those add-ins work even in the universe of iOS, Android, or any other mobile platform.

Yup, all of those platforms got rules but generally, those rules have to allow for the web. It gives us a great way to make sure we can respect the rules and also respect the fact that without plug-ins, Excel isn’t Excel, Word isn’t Word.

CHARLES:

So one of the things that are really important to me when I’m writing code is testing, so writing unit tests, integration tests. This is a good way to get tests around a plug-in like this. So I can run it through like continuous integration or something like that.

TRISTAN:

It’s probably a place where we still have work to do. So then, a lot of work on dev experience isn’t getting these projects stood up. One of the things I know we’re still working on is, for example, I really want a mock of OfficeJS that you can say, “Hey, I can mock up the whole app and just build a bunch of web tests.” It’s not fully in place yet. We have a bunch of open-source projects that partners have started that do exactly that.

Our best partners, what they’ve done is they said, “Hey, I know I have this 15 API’s. That’s what matters to me. So I’m going to mock those 15 API’s.” And then, it’s just the web app, right? Office is completely out of the equation. It’s just the web app that I can go use whatever tools I want. Let’s go and build a testing library. And I’ve seen many amazing stuff get build. Do I want to provide the definitive Office? That’s something you’ll see us do. We’re not quite there yet but we’re working closely with all the folks we’ve seen go and build this stuff. We say, “Hey, how did you do it? What pieces did you build? What can we learn from that?” Ultimately, I love this and most of the stuff we do. This is open-source friendly. Whatever that mock is, it’d just be a thing on Github. We could be able to contribute to it and say, “Hey, here’s an interesting test case for this API. I want to make sure it behaves like this.” And you can just take any add-in and say, “Okay, we’ll place our real Office with this Mock. And then, we’ll go nuts.” And you’re basing a lot of stand-alone web projects without any of the dependencies on any of the Office bits anywhere on your system.

CHARLES:

Right.

TRISTAN:

We’re getting close. And I’ve seen like I said, some of our best partners have to solve this problem. We’re still getting the efficient solution, though. They’ve done an amazing job doing exactly done for a set of API’s that they care about. It’s certainly possible. It was proven them to me time and time again. It’s certainly possible.

SEAN:

And the projects that we created in Visual Studio for it are all based on the ASP.NET infrastructure. So all of the continuous integration could just use delivery pipelines to just kind of work for this. The only thing you need to think about really is having a different manifest for each version of your environment that you’re deploying to. And other than that, you just follow the same kind of pipeline that you use for any web development.

CHARLES:

Very cool. So I’m also wondering a little bit here. I guess you could just write it with whatever… I guess 2 questions. One is any version of Javascript that includes like TypeScript, or whatever, as long as you trans file it into something that the browser can run?

TRISTAN:

Yeah, exactly.

And we even published… so we definitely type and publish all the definite type files for OfficeJS.

CHARLES:

Oh, nice.

TRISTAN:

A Huge chunk of the team is like big TypeScript fans. We’ve got some TypeScript fans back in Redwood right now. And they’ve done a lot of work to make sure that the TypeScript experience is excellent. You can go in get the IntelliSense you ever want.

SEAN:

We’ve also been getting a lot of good help and advice from the TypeScript team itself. They’ve seemed to spend a lot of spare time with us to kind of give us advice and how best you can use their capabilities.

CHARLES:

Yeah, I was going to say, so those who aren’t familiar, I don’t like to assume that people know. But definitely, Type is basically a collection of typing files for TypeScript. And basically, there’s a runtime process that parses your TypeScript and gives you feedback on your code, checks for errors, things like that. It runs on the background on like Visual Studio Code.

But, you know, you can also run it in the background on like Emacs and stuff, you know, just depending on how you have things set up. But yeah, it essentially does that type checking for you and just pull compile time, as well as, you know, when you’re running it and editing it. So that you can get that feedback and can say, “No, you’re trying to edit it. You have the wrong type because this is actually expecting you to have a different type.”

TRISTAN:

Yeah and the same folks… one of the cool things is the same folks that are in love with TypeScript and have done an amazing job there actually said, “Hey, I don’t necessarily want the user to have any IDE at all. What if there’s an IDE built into Word, Excel, and PowerPoint that let me do the JavaScript in TypeScript and HTML that I want right there? So that should build if you’re going to run Office store, there’s an add-in called Script Lab. Script Lab is literally, you hit the code button and you got a web IDE right there. I go start typing JavaScript code, play with our API’s, and uses TypeScript by default.

You get all the IntelliSense you want. When you hit play, it takes that JavaScript and turns it into an add-in. It compiles it in real-time and let you go run right there in the browser. That’s a great way to kind of get started with this stuff. It is like, “Oh, Script Lab, they have probably like 50 or 60 snippets we’ve written,” of like, “Hey, insert the picture in the PowerPoint. Or hey, add a paragraph, or bold any third word, or a bunch of different things to show how the API might work.” You got all the JavaScripts, you got all the HTML, and you got all the CSS that was needed for that. Let me hit run. We’ll just actually load that up in the browser, executes, and you can start watching and say, “Ah, so that’s how they did that.” That would work. It’s a much better way to learn than like documentation. It’s been a lot of harder in our docs. And I love our docs but at the same time, as soon as I saw this, I’m like, “Oh, I don’t want docs. I just want a ton of snippets,” because I want to be able to go.

How does that work? Okay, I’m going to change that line of code. Oh, interesting. Okay, that’s how that works. It’s amazing how quickly you learn this stuff just by getting some output in front of you that does something. And say, “Okay, can I make it do this kind of thing?” And you can say, “Start playing around with the TypeScript and Intellisense.” Pretty quickly, hopefully, get your bearings in the universe and create some interesting stuff.

CHARLES:

The other part of this question is what kinds of third-party JavaScript libraries it’s going to pull in? I mean, you’ve mentioned D3 but is there any limitation on which JavaScript libraries I can pull in or how large the package can be?

TRISTAN

We don’t have any limitations in place right now. We have partners that are… they use Angular. We have partners that are big React fans. If you can go and use it on the web, you can use it on one of these add-ins. And there’s probably some good questions about, you know, I won’t get into a sort of debate about what libraries should you use if you want to optimize for PLT.

CHARLES:

PLT?

TRISTAN:

Page load time.

So if you’re really obsessed with like, oh, when the users click the button, how fast does that test play up and running, and rendering? Again, I want to take this position of like, hey, Office just love the web.” And if you’re a web dev, you bring whatever preferences around frameworks, around tools, around TypeScript versus JavaScript. Just come in with that opinion. And we’re a blank canvass. We’ll just let you do anything you need to do. I’ve seen some amazing results like there have been some really excellent add-ins that have come in that do things like I never thought of. Oh, cool. I get it. That brings a lot of interesting stuff from the web down to Word, Excel or PowerPoint, in a way that leverage is tons of libraries that already exist. You can sort of build on the shoulders of every web dev who’s come for you. So build something really neat pretty quickly.

CHARLES:

Yup. So another thing that I’m thinking here. I’m just trying to think as evil as I can, right? So my next dirty thought is browser extensions.

So browser extensions, in a lot of cases, inject JavaScript into the page.

TRISTAN:

Yes.

CHARLES:

So can I build a browser extension that effectively builds, what am I thinking… so effectively would build a document for me using OfficeJS? Or you know, something interesting like where there’s an API. I’m assuming you basically have to be on the page in order to use it.

TRISTAN:

Yeah, right now, you do have to be a part of our page to use it because it communicates pretty deeply with the actual back-end model of the document. You’re totally right, though, that browser extension level, you can kind of go nuts, right? You can probably build a browser extension and makes the ribbon think. There’s a certain point which we embrace the fact that your online apps are just web apps. You can do whatever you want on these web apps. If you use our add-in model, we’ll try to make the world as safe for you as we can. But at some point, you’re on the browser, you have a lot more power over what the right things do that we can actually refer as individual web apps ourselves.

AJ:

To me, it seems like the best practice, in that case, is, what you’re doing is making it easier to do it the right way than the wrong way. If you make it easy to do the right way, then, you’re not going to have people making honest mistakes. And when it comes to people that are really trying to screw things up… what does somebody clicked on that whatever the Downloads to their computer the whole things load anyway?

TRISTAN:

You’ve already opened Pandora’s Box a little bit on that. We’ve spent a lot of energy to like, I just want to give you the so many API’s in our JavaScript library that you’re actually hacking at the DOM that is Office Online is way less interesting. Because it’s so fragile, right? Like tomorrow, we might change the name of this div, or we might move around this piece of hierarchy. But here’s an API that I promise is stable, that I promise is performant. And it will be there next week, and next month, and next year, that lets you do most of the same things if not all of them. It probably won’t turn the ribbon pink.

But it probably lets you play with all the content of Excel, and all of the stats and shapes of the PowerPoint slide, and all the paragraphs in the Word Document.

CHARLES:

So could you… you know, I’ve been trying to conceive too, like, where are the limitations? I mean, you could effectively have it build the complete document for you that does some you know, wacky thing and has weird properties to it, all within the contents of OfficeJS. I mean, I’m just seeing somebody making this into a game of some kind. Or you know, something like that where it’s okay, well, the third slide in PowerPoint takes you into a link to the 16th slide, does this other weird thing. You can essentially just do something that’s totally off the wall but within the parameters of I’m building a document.

TRISTAN:

Yeah, we actually love that stuff. I’ve seen people do crazy stuff like build Battleships in Excel, right? Or they’re like, oh, it’s a grid. With a grid, I can do all the things that battleship lets me do so.

I just say go put X’s where the boats go and check that it’s actually valid, like, you have this one that’s 5 long, limits 4 long, limits 3 long. And then add an add-in that says okay, goes to this grid that says X. And it goes, checks, and says, no. I actually love that stuff. It helps us exercise the power of the API’s that we built. As long as you are within the constraints, who am I to say what a great add-in is, what is useful and what’s not useful? I might be more useful for a lot of people. And you know, that contract builder app, it has the same purpose, few of that really clever stuff like that. I see people do pong thing in Excel. Excel being a grid just lets you do all of the awesome stuff. That’s like one of the fastest pong game in the world. You can just have the rules to move through the grid and paddles around. It’s clever stuff.

AJ:

That sounds kind of like the level of efficiency of GIMP that let you export bitmap images to HTML. We’re like, it basically creates a table with all the cells with size pixel 1.

TRISTAN:

Yes. It’s like interesting. If you can find some use for that, more power to you.

AJ:

It’s kind of fun. It’s awesome stuff.

CHARLES:

So what is the craziest thing that you’ve seen done with this API?

TRISTAN:

I think Battleship was pretty cool. That’s pretty neat. It works pretty well. Oh yeah, it kind of make sense. Like I have seen that… we do hackathons as a team three times a year. And kind of let people play with this kind of stuff.

SEAN:

I really like the Star Wars entering credits, entering texts theme for PowerPoint. It’s turning your text to kind of fade in. That was pretty cool.

TRISTAN:

We’ve seen all kinds of great stuff. Most of the things in the store, obviously, are little more like business app things. But when you go outside the store, and tell the team like, “Hey, here’s a bunch of API’s. Let’s exercise them. We’ll do all kinds of crazy stuff.” Kick in a way that you never thought was possible.

CHARLES:

One last thing that I’m wondering about, as far as all of this goes, is that if you’re building a plug-in that adds real value to somebody, a lot of these businesses, they like having the integrations between their Office and whatever other tools or services they’re  using, right? But if I’m creating that connection, a lot of times I’m going to want to get paid for my work. And so I’m assuming that there’s, you know, you said there’s an app store essentially. And people get the extensions on there. How does that work as far as, okay, you’ve got to pay for the Office integration to my awesomeservice.com?

Does Microsoft take a credit for that? How do you get paid? How do you check how many people are downloading it, all that kind of stuff?

TRISTAN:

Yes. There are two ways that folks can do it. You can do paid add-ins to the store. So I can either do the standard perpetual 99 cents and you’ve got my add-in thing, or I can do subscriptions, where it’s okay $2.99/month and here’s the access to the add-in. That set of folks and of course, smaller set of folks from group 2, which is just you got this a web app, and you can go and say, hey, the add-in is free but logging in to the service behind it, you need a subscription. I’d say, I encourage that model because of most of the integrations at Office, the integrations are just a piece of some larger piece of software. I’ve got my thing that I’m building. That’s what I’m charging for. And just a feature of this really awesome app I build on the web is, oh, by the way, that’s for Excel. Here’s an add-in for Excel. I can go on and filter all the table later and fill it in. And format it in some really cool way creating a pivot table, that sort of stuff.

So in our offers, we can say, hey, you can certainly go to the store but you don’t need to. I’m not in the business of trying to get you to pay me a little bit of 10 cents on the dollar. I’m really in the business of making sure that you can integrate with Office as quickly as possibly can. Help your users and help your users do awesome stuff.

CHARLES:

What if I wanted them to pay a dollar for Battleship or something?

TRISTAN:

You can totally do it. They can pay that into the store. You can go through and set it up.

CHARLES:

Set it up and…

TRISTAN:

…$2.99 and when they go to the store, they use the same Microsoft account that you use to buy an Xbox games or movies on the Xbox, Windows apps in the Windows store. It’s all the same commerce. So you can go and pull all that kind of stuff. But like I said, we’re not spending a bunch of time, hey, I really want to get a bunch of paid ads because I want to get my cut.

What I really want is as many cool add-ins in our store as possible. Even if they’re all free, I’ll be super excited because there’ll be a ton of free integrations in Word, Excel and PowerPoint, and probably other great pieces of software in the universe.

CHARLES:

So the last question I have is it sounds like there was or is kind of a Native way of writing plug-ins.

TRISTAN:

Yeah, that’s right.

CHARLES:

And it still works?

TRISTAN:

Still, absolutely works. My team is thinking how to bring all of Office’s platform into the web. And there’s a chunk of the team that says, “Using native way using COM that seems to work forever.” Like no matter what changes, that boat needs to stay like right side up and smooth sailing. And all that will keep working as well.

CHARLES:

Is there one way that’s more capable than the other?

TRISTAN:

The awesome thing about the web model is like I said, it is cross-platform, right? What we’re seeing more and more in Office is like, hey, a company won’t have desktops and everybody’s using… It’s not like I show up on my first day of work and there’s a tower under my desk.

Like 17” monitor… It’s more like okay, here is your PC. If you’ve got a Macbook, bring it in or if you want to use an iPad pro, bring that in. And all those folks come in and say, okay, cool. I’ve got Office. So I expect to be able to use all the add-ins that the company has. Obviously, that COM model is like super tightly tied to Windows in a way that those add-ins are in one place. They run on their Win32 apps on Windows. Whereas these modern apps, run in Mac, browser, PC, iPad. They sort of much go everywhere. We think what really lines up with what users expected Office itself is this is my device, this is where I want to use Word, give me an app that lets me use Word on this device. It’s the same thing for add-ins. This is my Word. I want the add-in for Word. I don’t care that I’m on iPad but I want to be able to use this add-in.

CHARLES:

Makes sense. I just kind of envision, oh okay, if there’s another way, is there a reason you would ever use it?

TRISTAN:

Yeah, the COM model was built in an era, right? There was a long time where Office was a set of desktop apps for Windows. And we built a really great extension model for Desktop apps on Windows. And then, we have to step back and say, hey, we now shipped a Mac version, we shipped an online version, we shipped mobile version. That COM thing isn’t going to work, right? Getting a COM assembly to run in our web apps, the idea of “Oh, we’re going to take that, run it on the service and try to remote UI.” That gives me nightmares. We’re saying, hey, it’s just a web app. That’s awesome. It fits natively into the browser. It does everything that you’d expect like all the governance models. Everything’s set up for that thing to be awesome. The COM add-in model is set up to be awesome in one place and that’s Windows. And so, make sure it works great on Windows. We’ll encourage folks to think about Office as a constellation that should totally follow users around.

CHARLES:

Sounds good. Is there anything we should have asked about that we didn’t think of?

TRISTAN:

I don’t think so. That’s a pretty good tour of what we’ve done.

SEAN:

One thing that I need to call out is that if folks are actually interested in the app model that we’ve just been talking about, they should go to dev.office.com to learn more about it because that’s where all of our documentations is. And there are lots of great ways to get started there. Definitely, like to call that out.

TRISTAN:

And we’re all over Stack Overflow. If you go to any question, the community gets you a fair number but if nobody gets to them, our engineers and PM’s are there answering questions every day. We really take a lot of pride making sure that folks aren’t stuck. We’ll make sure they get on stuck. Check it out. It’s pretty cool. Even with the API’s themselves, the last thing I think that’s really cool, every time we add an API to Excel, even before we code it, at the stack for those new API’s, we probably shoot to Github. Our master.repo is what’s shipped and then, we have forks that are… here’s the next thing that we’re going to go and build.

And you can go at any points at that Github repo and say, what are they working on for Excel API’s? Right there in the open, there’s the spec. Literally, the engineers who are coding the product are reading the same marked-down files in the same repo that you, as a developer, can come and look at. And you can comment. You can add issues like you could have a dialogue with that PM, like you’re on the team like you’re sitting in our hallway from halfway across the world because the only reason we build API is so that people can use them and build cool stuff. I don’t want API’s that nobody wants. And I don’t want to miss those API’s that everybody wants. We try to say, hey, if we just open the books, it is way easier to have that conversation when you say, hey, next quarter, we’re going to build these 20 things. And then, they write 20 things. Somebody will come along and say, hey, if you’re going to do pivot tables, then, you don’t do this other thing that I don’t see. Well, why are you doing it at all? We’ll be like, oh great, you’re right. Plan changed. I think I’ve only seen one pull request set up on our specs.

It’s external but I got a lovely idea that somebody can come along and go, that spec is wrong. I’m going to fix your spec and I’m going to submit a PR. I’m going to tell you how to do it. And the PM will look at that and go, “Oh, that guy’s totally right.” When we’re here she is out in the universe. Right, I’m going to accept that pull request and literally change the design of Office from halfway around the world. That’s just to me, it embodies everything we want to go with this platform.

CHARLES:

Nice. You hear that folks? You can tell them what to do.

TRISTAN:

You all tell us what to do.

CHARLES:

Alright, well, before we go to picks, is there anything else you want to talk about before we go? If people want to follow you on Github or Twitter, or anything…?

TRISTAN:

Yes. They can go to Github. Under the OfficeDev, you’ll find a tunnel repository that contains samples. Our docs are there. All that great stuff is there. We also have Microsoft graph. We haven’t talked a lot about the graph which is our source service API’s.

We have a great JavaScript SDK’s for those, as well. If you want to go and build Node apps, you want to build single page client-side apps, you can go and import our graph SDK and work with that as well. So a ton of great stuff at Microsoft Graph. Again, those docs are out in the open. Just like they’re on the client, you can go and you can post issues, you can go and make comments, you can go and make pull requests. You’ll love that kind of stuff. We really leave for having a really open dialogue with our developer community. “What have we done that’s right? What have we done that’s not right? What should we do differently?” I only feel that I’m successful if I’m getting constant feedback like what’s working and what’s not. We can really build awesome web stuff inside of Office.

CHARLES:

Nice. Well, what about you guys, personally, what are you up to?

TRISTAN:

Sure. So I’m a Canadian to the US, grew up on the west side of Canada, in Calgary. Kind of work in Microsoft, straight out of school.

I went to Waterloo. Microsoft recruits pretty heavily there. I came down and say, I’m going to work at Microsoft for 2 years. And I’m going to do something different. And I woke up and said, oh, I’ve been here for 13 years. That’s a surprise. It’s a lot of fun. Like I said, I worked on Word for a really long time. There’s probably no app in the world that is as known as many people as Word. You can’t show up in a room and tell people you worked on Word without knowing what it is. And then, having like 10 minutes of feedback of, “What’s good about it? What we should have done differently?” Which I think is super fun. And I’ll move over to the platform and much the same thing like it’s a different group of users. It’s talking to developers specifically but again, the developers work on Office are really passionate about it. If I tell somebody that I own the Office platform, who cares about Office? We’ll have an incredibly interesting conversation like they can tell me, “This is great but you need to change these 10 things.” I just love that stuff. That’s kind of what I get for our work is these conversations.

SEAN:

And I have a bizarrely similar story. I also went to the University of Waterloo. And came here at Microsoft 13 years ago. I joined the Visual Studio team. I spent over a decade working on various aspects of Visual Studio, including like the editor, VB, C#. Then, one day I got the opportunity to work on the Office tools in VS. I kind of fell in love with it. Then, about a year and a half ago, I made a leap and said, “I want to work on the platform.” So Tristan kind of give me the opportunity to work there and I’ve been pretty happy to kind of being able to help influence the platform itself and being able to kind of really shape Office development. Being honest, he tells me everything that I’m wrong about. That’s not quite right. You should do it a little differently. Okay, that’s cool.

CHARLES:

Yeah.

SEAN:

And he’s my boss.

CHARLES:

There you go. Sounds like my wife. She tells me where I’m wrong and she’s my boss. Alright, well, let’s go ahead and do the picks.

[Music]

[Have you ever felt like you’re falling behind or the programming world is moving so fast that it’s impossible to keep up? Then, there’s the issue of where to go to ensure you’re up to date. The answer is to join a community dedicated to discussing the latest in Javascript. Would it be nice if you’ve got Javascript Jabber all day? Well, you can, kind of. We’ve created a Slack community for Javascript Jabber. That means you can collect with our listeners and guests on a platform you’re most likely you’re already using. Plus, we set up a keeping current channel that pulls stories from across the web to help you know what people are talking about. And coming soon, we’ll be holding monthly webinars and roundtable video chats to connect with experts, the community and each other. So come and join us at javascriptjabber.com/slack.]

CHARLES:

We’ll make AJ go first.

AJ:

Yeah, I’m going to pick Lithium because what else is spontaneously combustible, used as an anti-depressant, and charges your phone? Done.

CHARLES:

Awesome. I’m going to throw a couple of picks up there. One of the things that I’ve been doing that has made a difference for me. And I’ve mentioned this on the show a few times. I’ve been finding new ways to do it. So I read a book called the Miracle Morning by Hal Erod. And it talks about just how you start your day, going through your morning routine. You get up. And he has an acronym for the 6 things you’re supposed to do. I’m not going to spoil the book. You should really go read it. You start out with the meditation. And anyway, you go through all these things, affirmations, and things. There are a few apps that I found that will help you with that – solution meditation app for iPhone. I don’t remember what it’s called off the top of my head. I think it’s called Meditation Something (Studio). But anyway, it’s pretty cool and it has a whole bunch of meditation. I think it costs me $3. I don’t believe it’s a subscription.

And then, you can just download the meditations you want. And so, typically, I go through 5 to 10 meditations as part of the process. And then, one of the other things is envisioning. You kind of sit back and envision what your day’s going to be like. One other thing that I like to do is just envision where I want to wind up. There are a number of apps in the Apple store. I’ll put a link again for the one that I’m using but they’re for the vision board. And so, essentially, you can put pictures, or texts, or quotes, or anything like that into your vision board. And then, you can sort of look at it for 5 minutes. It’s like, okay, I want to have days like this. I might have a picture of a sunrise, you know, other pictures that are inspiring to me, you know, a picture of my family, stuff like that. And then, anyway, it’s just kind of start with the day that really gets me going.

The last pick that I have, one of the other things that put in there is reading. I read my scriptures but I split my reading time between that and some other book about something I want to learn. And so, later on, I’ve been reading a book called Clean Code by Uncle Bob Martin. I’m enjoying that. I’m also going to pick Clean Code. Those are just a few things, you know, are kind of in my life that I’ve been enjoying lately. Kind of a cool thing. You’ve got some things you want to shout out about, Tristan?

TRISTAN:

Sure. My Amazon Echo. It has changed my life. I’ve got every light switch, almost every plug, the locks in the house are all automated like the Z-wave network. It sounds silly but being able to have Alexa like turn lights on and off, and unlock the doors, change the thermostat, turn on the room bulb, it’s just a wonderful world. If living in the future, I really love that everything from my alarm… it’s like Alexa, set an alarm for 6 AM. Cool. You’re done and say Alexa’s snooze maybe 15 times.

(01:02:00)

But you know, you have the intent of getting up at 6 AM. That has totally changed my life. I love our home automation system but it’s like 5 times better now. It’s all wired through. We’ve got a couple of Microbots and a couple of Echoes so wherever you are in the house, you can tell Alexa what you want to do. And the whole house just magically transforms in whatever way you want. That’s certainly one thing. And the other thing, I have to call out, super different is… I’m really obsessed right now with the microbiome. Microbiome really controls your life. Like it turns on your mood. Everything about you is influenced by bacteria going on in your gut. So I’m kind of obsessed with like, “How do you fix your biome?” What is in and what did you change? It turns out that you can test it online, all those crazy things you can do but we’re starting with like, “Okay, how does changing what you eat change your biome and change your life?” I could shadow to the biome because of how much of my life is determined by what’s going on in that part of the body.

CHARLES:

So I have to ask, are you testing your biome?

TRISTAN:

We’re going to. Sounds weird, isn’t it? It’s actually super gross when you think about what it literally is. But it’s also fascinating. It’s perfect line between “Oh, that’s disgusting” but it’s also fascinating. I think it’s probably important and fascinating enough without really going through the gross part.

CHARLES:

I’ve been doing the Ketogenic diet and I hate to call it a diet because it’s more of a lifestyle. I’m doing it for at least 3 months just to see how it goes. And then, you know, I’ll stick with it if it’s working for me. Yeah, a lot of literature talk about the effective hazard on your microbiome. It’s really interesting. Some of the die-hard people, they talk about sending samples to find out exactly what their microbiome looks like.

SEAN:

We’ll just leave it at that. How do I fall off sending a new biome? One thing’s I’m kind of back into recently has been my running. We’ll tell you like running is my meditation. And one thing that I really like to do is kind of pick something like a problem that I’m going to work through when I run. And kind of go for an hour, hopefully, figure out something. At least, at the end of the run, at least I’ve gotten back in physical shape as a result of it. I’ll definitely get a shout out to that. The thing that also transformed my running is my Garmin watch, which basically gives me all sorts of sensor data about my runs like am I performing well or am I not performing well. And I’ve started dumping the data to Excel. I can actually start doing way too much obsession and analysis over all the trans that I get as I seem to be getting older. Those are the 2 things that I kind of think about. Have you built an add-in, though?

TRISTAN:

I’ve not built the add-in yet.

CHARLES:

Oh, I thought you were using the business intelligence stuff that they have here at Microsoft. Along the same line when we’re sort of recording, running and thinking through a problem, have you read Deep Work by Cal Newport?

SEAN:

No, I haven’t.

CHARLES:

So he talks a lot about that. Just preparing your mind… basically, longer periods of focus is where you get more deep work done. And one thing that he recommends is you go for a walk or a run. And you focus on a problem for an hour, or however long you’re out walking.

SEAN:

Yeah, I just kind of stumbled on it kind of myself just when I realized that there are just these random things that are bugging me at work. But if I focus on one and have a longer run, I could kind of come up with really interesting ideas. And realize that there are bad ideas that can come up with better ones in a long run.

AJ:

Yeah, I kind of sleep through problems. I feel the same way. I had a dream that solves at the wrong way. Then, hopefully, by morning, I’ve had enough of those. I wake up at the problem and there’s the solution in the right way. I like walks, too, actually.

CHARLES:

Alright. Well, we’re going to go ahead and wrap this up. I just want to verify, dev.office.com?

TRISTAN:

Yup!

CHARLES:

Okay, so go check that out if you’re looking at some of these options. I’m assuming that there’s a place to ask for help if you need it on there.

SEAN:

Yeah, the content links are at the bottom of the page if I remember correctly. Stack Overflow, OfficeJS, the tag is where we also look.

CHARLES:

Alright. We’ll go ahead and wrap this episode up. And we’ll catch you all next week.

[Bandwidth for this segment is provided by Cachefly, the world’s fastest CDN. To view your content fast with Cachefly, visit cachefly.com to learn more.]

 

x