[This episode is sponsored by Frontend Masters. They have a terrific lineup of live courses you can attend either online or in person. They also have a terrific backlog of courses you can watch including JavaScript the Good Parts, Build Web Applications with Node.js, AngularJS In-Depth, and Advanced JavaScript. You can go check them out at FrontEndMasters.com.]
[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco, New York, and L.A. 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 $130,000 a year. Users can either accept an offer and go right into interviewing with the company or deny them without any continuing obligations. It’s totally free for users. And when you’re hired, they also give you a $1,000 bonus as a thank you for using them. But if you use the JavaScript Jabber link, you’ll get a $2,000 bonus instead. Finally, if you’re not looking for a job and know someone who is, you can refer them to Hired and get a $1,337 bonus if they accept a job. Go sign up at Hired.com/JavaScriptJabber.]
[Let's face it. Bookkeeping is hard and it's not really what you're good at anyway. Bench.co is the online bookkeeping service that pairs you with a team of dedicated bookkeepers who use simple, elegant software to do your bookkeeping for you. Check it out and get your free trial today at Bench.co/JavaScriptJabber for 20% off today. They focus on what matters most and that's why they're there. Once again that's Bench.co/JavaScriptJabber.]
[This episode is sponsored by DigitalOcean. DigitalOcean is the provider I use to host all of my creations. All the shows are hosted there along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent and their VPS’s are backed on solid-state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code JavaScriptJabber you’ll get a $10 credit.]
CHUCK:
So, welcome everyone to JavaScript Jabber. This week we are at Build Conference. AJ and I are here. We're talking to Jeremy. What's your last name, Jeremy?
JEREMY:
It's Thake.
CHUCK:
Jeremy Thake. He's from Microsoft. He works on the Office 365 team. So, we thought we would take a few minutes and talk to him, see what Microsoft 365 is all about and how it applies to JavaScript. So, is there more of an introduction you want to give, Jeremy?
JEREMY:
Yeah. I've been at Microsoft for two years. So, before that I was actually a partner building solutions on top of SharePoint. And Microsoft were like, “Come over to the marketing side.” So, I'm actually [at] technical product management focused on Office 365, all that. It's a big thing to own [chuckles] because it's not just [as I said SharePoint.] It's also Office as a client wherever that's on. The Mac, PC, iPhone, Windows, 32 or even the UWP stuff that we've been talking about a lot at Build. And then obviously the browser version of Office.
CHUCK:
Right.
JEREMY:
And how you can extend office across all those platforms. And then because what we're running is an Office 365 as a cloud service, all our APIs can be hooked into as well. And we call that the Microsoft Graph. So, the three things that we focus on as we go forward with that.
CHUCK:
Gotcha. I'm also going to put a link in the show notes. We had somebody on Adventures in Angular talking about building those extensions with Angular.
JEREMY:
Oh yeah, was that Dan Wahlin or, who was that?
CHUCK:
No, it wasn't Dan Wahlin. It was somebody else. But…
JEREMY:
Oh, okay.
CHUCK:
Anyway, it was really interesting. So, you can effectively extend Office with HTML and CSS…
JEREMY:
Yeah, because…
CHUCK:
Or HTML and JavaScript.
JEREMY:
Traditionally one always uses Xobni which was inbox backwards which was the one in Outlook and you selected a mail and it allowed you to see more information about that user, which Outlook almost does now. But five or six years ago that was all the rage, was to have that plugin installed.
But that was a [COM] plugin. So, it was built using C# and it was managed code. It was compiled.
CHUCK:
Right.
JEREMY:
You had to ship an MSI on everybody's PC's that they run to get it installed on the machine. And so, we realized that's not going to work when we want to try and release add-ins that are valuable not just for Windows but also for the Mac or iOS and Android eventually. And so, they looked at the architecture and decided actually this makes more sense if we do it as HTML and JavaScript and not run it as part of the Office client. So, it's not impacting the performance of Outlook. It's running inside an iframe within the Office client no matter what platform Office is running on. And essentially you use JavaScript and our API or the Office.js framework to communicate back into the host whether it be Outlook, Word, PowerPoint, Excel. And this week we've actually announced OneNote. So, you can build add-ins using HTML and JavaScript across all of those platforms, which is pretty cool.
CHUCK:
So, what you're telling me is that not just the… because I've seen the web version of Office 365. But back in the day when I used Outlook it was a desktop application. So, you can write your plugins for your desktop applications with JavaScript?
JEREMY:
Right. And so, the same code will essentially allow you to run it whether I'm Outlook Win32, whether I'm Outlook Online in my browser, whether I'm Outlook on my Mac, Outlook on my iPhone. Those things, it'll all show up. And essentially we just got each of those platform hosts understand how to work with the HTML and JavaScript that's hosted. So, it gives you a way that we couldn't put COM on an iPad version of Outlook. So, we had to work a way architecturally to do that.
CHUCK:
Right.
AJ:
Is the data structure for each… I imagine there's a data structure for Excel, there's a data structure for Word, and are those the same as what were in the binary files? Or is that a completely different type of data now?
JEREMY:
Yeah, good question. So, the way that you interact, you have different shapes that can appear in Office. So, you can have a task pane that shows up on the right-hand side. You can have what we call a content add-in which is essentially a piece of content that lands in PowerPoint that you can add to a slide or lands almost like a chart in Excel. Or you can have ribbon buttons as well in Word, PowerPoint, Excel, Outlook as well. And when you click off the ribbon buttons essentially it's executing JavaScript behind the scenes. And then you can say, “I want a pop up to say that that button is completed” or maybe a status bar shows up on the top.
And in terms of the data structures, obviously COM did a lot more because essentially with COM you could totally transform Outlook or PowerPoint or Excel because you owned the whole UI. So, you could override pretty much the whole of the Office client. With Office add-ins we've put it a bit more [inaudible] and said here are the shapes you can have in each of these products, because now we're not just maintaining this on Windows Office. We're maintaining it across all the other platforms of Office. And then the Office.js calls allow me to do things like, I'm in my task pane. I want to inject content into Word. I'm going to inject this photo or I'm going to inject this body of OpenXML text with formatting. And so, those APIs, the Office API calls, there are some common ones. It makes sense to have the ability to insert into the body of an email or insert into the body of a Word document or to a slide in PowerPoint. But then there are some special APIs that you can call for each individual client.
So for instance, in Excel you can insert special formulas into cells based on the X, Y coordinates on the sheet. And so, you can learn one… it's very easy to learn for Outlook. And then, oh, I want to build a Word add-in. The API is exactly the same shape and the way you call things is the same. It's just that now you've just got different hooks that you can take advantage of in Word that you couldn't in Outlook because of the context of the client you're in.
AJ:
Okay. So, there's… because I was just thinking of data APIs like I guess a DOCX is just a zip file that has some XML inside, right?
JEREMY:
Oh, okay.
AJ:
But there's an API for UI elements.
JEREMY:
Right.
AJ:
So that no matter which platform you are on the UI elements are similar.
JEREMY:
Correct. And then the way you interact with the [data] [inaudible] the document itself, you're right. So, it's a DOCX, a PPTX. Essentially that's a compressed file. But when you open it up it's a bunch of XML files and the format's called OpenXML. And what you do is our APIs do that translation for you. So, you don't have to write in OpenXML if you want. You can just add text into a Word document like you would assume, like sending a string variable to an API call. But you can actually also if you're very knowledgeable in OpenXML throw an OpenXML string at it as well. So, you can do a lot more complex curation of documents that way as well. But in terms of, because you're hosted as JavaScript in the Office client you don't need to have access to manipulate the document itself. Everything is bridged by the Office.js calls. So, whatever you do with Office.js it's just manipulating the underlying document or email, for the sake of Outlook.
CHUCK:
So, it seems like there are two different types of APIs we're talking about. One is as AJ pointed out the data APIs. And I know that with Office 365 being in the cloud on the web and on client machines like your iPhone or things like that, that there's some data that can be passed around. And then there are the other APIs which are more the programmatic APIs. Put a button here, that kind of thing. So, what kinds of data can you push around or pull around? Is it just documents on the document level or is there more data than that?
JEREMY:
Yeah, so essentially the best way to manipulate it is if you have the documents living in OneDrive of OneDrive for Business you can get at those via the Microsoft Graph APIs.
CHUCK:
The Microsoft which API?
JEREMY:
The Microsoft Graph API.
CHUCK:
Oh, Graph API. Okay.
JEREMY:
Sorry, it's my accent.
[Chuckles]
JEREMY:
Graph.microsoft.com. And then essentially it's all versioned, so you go V, V1.0/me/drive. And that allows me to get at all the files that are hosted in OneDrive. And so, in this scenario, you would either download the document and manipulate it and then re-upload it. But we actually announced a new API endpoint as part of the Graph this week which is called the Excel REST API. And what that allows me to do… and we've had it traditionally in SharePoint's server land. It was called the Excel Services API. What it allows me to do is if my Excel document is living in OneDrive or OneDrive for Business I can with one REST call essentially add a row to an Excel file or remove a row from an Excel file or query an Excel file and get out the chart a JPEG to then use in my web application. And all that's just using standard REST and OAuth to authenticate to get the tokens to make the call.
CHUCK:
That's cool.
JEREMY:
And so, that's really nice because it's… there are a lot of businesses that run on Excel. Being able to programmatically get at that data that lives in that sheet without having to download it and use… there's a bunch of different SDKs out there that can read Excel files locally. So, you don't need to install Office on your server to be able to manipulate documents. You just call the service Excel REST endpoint and it can manipulate that. And in the future we'll actually be able to do that with Word as well, which is going to be nice.
AJ:
So, one of the things that I don't like about Google Docs is that there's no actual document, right? When I have Google Drive, there are… none of those spreadsheets actually exist. When Google Drive went down a couple of months ago for four hours, I couldn't access any of my stuff.
JEREMY:
Yeah, yeah, yeah.
AJ:
But it sounds like with the Microsoft OneDrive APIs, you're saying you've got the file. It's on your computer. It's a legit, real file that I can open up with a program. But you're allowing access to that through the API so it's connected with OneDrive and it's going to sync back to the computer?
JEREMY:
Yeah. Okay, without using my hands too much because we're on an audio podcast, but essentially the way that OneDrive or OneDrive for Business works is very much like Dropbox or SugarSync or Box. You can upload documents into your drive (or Google Drive). You can upload it into the cloud. But then there's a sync client that allows me to synchronize that locally. But in terms of… if you're trying to use the Excel REST API to go to connect to those files, you'd be going directly to the version in the cloud, not the one locally.
AJ:
But it'll sync back?
JEREMY:
Yeah, yeah. So, if I… and actually one other thing which is nice, if I went and added a row to Excel, the OneDrive sync client on your local PC would sync that file so that if you're in an offline scenario you'd see those changes. But the cool thing is if I have Excel open or if I have Excel Online open viewing the Excel file when I'm doing an API call to add the row - because we do co-authoring which basically means we can all be in the same document changing it and we see those changes - when you do the API call to say add the row in the browser version of Excel you'll actually see the row come straight away. And it'll show you the author of whoever made that REST call. So, it's really nice from that real-time side that you can have a lot of systems like writing into these documents and be able to see in real-time. Essentially the API calls are co-authoring alongside real people. And then obviously then because it's in OneDrive if you've got OneDrive sync client down on your machine it's going to pull down that new change. And it doesn't pull down the whole document again. It's just doing file diffs.
CHUCK:
Are all of these data APIs and everything that we're talking about here, all of that is wrapped up in that Office.js that you're talking about, right?
JEREMY:
So, yeah. So, the Office.js API is used when you're using and adding in the Office client itself.
CHUCK:
Oh, okay.
JEREMY:
So, if I've got a task pane or a ribbon that's the framework you'd use.
CHUCK:
So, it's a UI library.
JEREMY:
Correct.
CHUCK:
Not a data library.
JEREMY:
Yeah.
CHUCK:
Okay.
JEREMY:
The data library aspect is the Microsoft Graph and we have an SDK for that.
CHUCK:
Okay.
JEREMY:
So, you need to authenticate first to the Graph. And that's just using Azure Active Directory. And there's a ton of information out there on Azure AD. It's just an OAuth hook. You need to get an identity token and then you get an access token that allows you to call with the appropriate permissions to get files or call the Excel API or get information about a user. Right now we don't have a JavaScript SDK for that. We have a .NET, an iOS, and an Android one. But essentially it's just a REST call.
CHUCK:
Nice. So, I'm also worried… or not worried but I'm curious about security.
JEREMY:
Yeah.
CHUCK:
You've talked about OAuth as your way of making sure that somebody is who they say they are, that they can access whatever it is that they're trying to get at. But beyond that, just checking tokens, is that the extent of the security there?
JEREMY:
So, the expert… obviously the access tokens and the identity tokens much like… it's the same old stack as what Windows 10 uses and what all of the Azure stack is using. Our own products. So, when you login to our Office client [where they] use their own password, you're using all the same authenticate layer. And that's one thing that at Microsoft we decided. Everything has to use the stack. And so, it is the central point of failure if ever it did fail, which it's running on a cloud so it doesn't. What that allows me to do is expire those tokens. So, you can't just have this notion of I've got that token, now I can use it forever. At some point, the user that's using your web application will get prompted again for credentials to go, “Okay, we need to make sure you're who you are.”
And that's all handled within… there's an ADAL JS library in the Active Directory authentication library that you can just plug into your Angular application or your Ember application or your React application and have that authenticate dance as I like to call it handled for you. But so, from a security perspective because it's something we use across all of Microsoft you can be sure that from a security aspect, it is kind of bulletproof in that sense.
CHUCK:
Right.
JEREMY:
Yeah.
CHUCK:
One thing that I can see though is that a lot of systems that I've used or built plugins for, basically the plugins are isolated from the main context in some ways. And so, when people authenticate does that authentication get shared down to the plugins or do you have to authenticate separately?
JEREMY:
Once you've got that token you can pass that token into any of the plugins that you're using.
CHUCK:
Okay.
JEREMY:
It is separated but it's going to be in the page DOM. So technically if those plugins are aware that that exists, they could go and grab it. A lot of what we see our partners do that are building products on top of Office that leverage our APIs, there are various different was that you could hide those tokens so they're not accessible by other frameworks. We've got one partner that actually uses an iframe to hide the scope of what's going on so that other things can't get at it.
CHUCK:
Okay.
JEREMY:
So, there are a few different techniques that the Azure AD team recommends depending on what framework's using JavaScript, if you're going to have a server backend. Like if you're using Node, technically you could hide all that on the server side and have a facade on that for instance. That kind of is separated from the Office story in a sense but it is something that we get asked a lot by developers. Like, “Where should we be storing these tokens that we're using? Is it fine just to have these very open in the DOM or should we be storing those in the server side and fetching them each time?”
CHUCK:
Right.
JEREMY:
and it's the user context. So, when I hit JeremyIsAwesomeWebApplication.com, the first time I make a call to the Microsoft Graph it routes you off to the Azure AD login screen which is what you see when you go into Office 365 or when you login to any of our products. And you put in username and password. That's on their service. And then what it does is it returns the identity token back to your web application on a POST. And then you handle that token from there on out. And so, that's something. Azure are very, very careful of people who are trying to spoof login pages or denial of service attacks. They monitor all the time so that's something that is… all of our product services run on this so it's very important for us that security is tight.
CHUCK:
Cool. AJ's actually our security expert. [Chuckles]
JEREMY:
[Laughs]
AJ:
Do you want me to ask a question?
CHUCK:
Yeah, if you have any others that I didn't think of.
JEREMY:
That was like a hand-off. There was that awkward stare moment. [Laughs]
AJ:
Yeah. So, one thing I was thinking as you were talking. So the tokens, are you using JWT where you have the metadata about the expiry in the token?
JEREMY:
Correct. So it's all JWT. And essentially what we find with a lot of people that's starting out in this is they'll all have Fiddler running in the background or something and just watching the traffic and having a look at what's coming through to get an understanding about it. You don't need to go to that level. The ADAL JS library handles it all for you. But sometimes it's useful, especially if you're getting errors in what you're doing to be able to go to that level and have a look at the JWT token at all, look if it's expired, or actually we're not getting the correct permissions back in the access token. Because it's granulous security.
For instance if my web application only needed access to OneDrive but it didn't' need access to my user's calendar or my user's inbox, the application when it does that first login, when it does the dance of I need access to this, you as a user will have to consent that application. A little bit like how Facebook apps work and so forth. And so, the access token I get back from the Azure AD service, essentially in that JWT token it declares exactly what scopes it has access to. And that's the token that you use to go get the services back.
AJ:
Okay. How is it that somebody would compromise the token? Obviously if they've got malware running on the device you've got access to the whole device.
JEREMY:
Yeah. If they can fetch that token they can then reuse in the context of that user for a set period of time until it expires. That's essentially where you would have that issue.
AJ:
So, with Facebook at least you get two tokens. You get your refresh token and your access token.
JEREMY:
[Yeah] it's exactly the same, yeah.
AJ:
Your access token is what you're using. But if you were to grab the refresh token that thing can last for a year.
JEREMY:
Yeah. The expiry's a bit different. I can't even… because it's not actually my area of expertise. But it's not a year. It's a lot lower because of the fact that it's enterprise data we're getting at. So, it's a lot more secure in that sense.
AJ:
Okay.
JEREMY:
And you could also do things like it can be encrypted and signed, too. So, the applications have to be doing this over encrypted tokens as well. So, there are levels you can escalate if you're very conscious of it.
AJ:
Do you allow unencrypted connections?
JEREMY:
The tokens are encrypted but there's another level of encryption you can do on top, yeah.
AJ:
Well, I mean I assume HTTPS is the default.
JEREMY:
It's mandatory, yeah.
AJ:
Yeah, okay.
JEREMY:
Yeah, yeah, yeah. But you can go at the token level even further if you want to.
AJ:
Okay.
JEREMY:
But yeah, so the ADAL JS library just can easily be plugged in. they've actually built a special version of that library that works specifically with the Angular framework. But it's really easy to get started no matter what JavaScript framework you're using or none at all if you're a hardcore JavaScript developer I guess. But I think the real benefit to JavaScript developers out there is that there's a lot of power in the add-ins that you can build in Office now, like having that context of putting your product inside the user interface of Office where your users spend a lot of your time. We see a lot of partners now. We talked about one this week, which is the Starbucks add-in. It allows you when you go and create a new meeting in Outlook I can click the Starbucks button and it will actually pop up a task pane. You can go, “Let's give this meeting 25 bucks,” and it injects the voucher code so that whoever is going to that meeting can pop into Starbucks, use that code, and get the coffees for the meeting.
CHUCK:
Oh, that's cool.
JEREMY:
Yeah. So, there's a bunch of those kinds of things where they didn't have Office dev skills. They were web devs. We just show them that this is how you use it. You can use out Yeoman generator to scaffold out your project and just put your HTML and JavaScript here and here's the Office.js call to go and inject that into the body, and they're away. So, there's a lot of benefit of being inside our user experience. Because unfortunately it's where we spend all of our time, is [inaudible] trolling for email all day long. So, the Starbucks one is great because it just totally makes sense. Everyone's doing that. And so, Starbucks wanted to be part of that experience rather than, “Go to Starbucks.com and fill out your meeting time and location and we'll suggest your Starbucks location based on where your meeting is.” Now it's reading using Office.js into the location box within an event. And it's looking who's in a to line. And there's a bunch of other stuff they're doing there as well.
AJ:
So, at the keynote there was a lot about Cortana.
JEREMY:
There was.
AJ:
Cortana, Cortana, Cortana. And I thought it was awesome.
JEREMY:
Yeah.
CHUCK:
I was going to go there. So, go there. [Laughter]
AJ:
Yeah, so is this integrated at all with any of the, what is it, conversation intelligence of Cortana?
JEREMY:
Yeah, so the keynote is split in two. And so, this is going to be odd because the show is going to be published after the both have been played. But essentially we have this concept of three pillars in Office development. The first is the add-ins which is all about being inside the Office client. The second is all about our APIs which is the Microsoft Graph. And the third pillar which we've announced this week is around engaging users in conversations. And for us that's all about Skype and it's also about Office 365 Groups.
So, Office 265 Groups for non-Office 265 people is essentially a container that you can go and create, a bit like Google Groups, a bit like I guess Slack in a way, where you get a place to put your files. You get a OneNote notebook to put your notes. You get a plan with basically like Trello, like boards for managing your tasks. You have a conversation thread much like you do in Outlook for email. And then you get a SharePoint site where you can do more advanced type collaboration. And so, in these groups we have this notion of having a connector that allows you to have things injected into your conversation thread.
So, what we'll show tomorrow is a partner called Zendesk which is like an IT help desk support system. And what they've done is when a new ticket gets raised in Zendesk it'll actually post a new card inside the conversations view within your group. And then you can start making comments about that card. Or you can click on the card and go launch Zendesk and see the ticket. So, it's really about this notion of from a conversation perspective of my team lives in my group and I'm chatting all day in there, and allowing me to have essentially what it uses as a webhook to call a webhook to then promote and push that card into the conversation and then build it. And then the other one which they did show you in the keynote was the Skype notion of I can embed Skype into my web apps.
CHUCK:
Oh, [inaudible] yeah.
AJ:
Do you know what this sounds really reminiscent of? Google Wave.
CHUCK:
I was thinking that, too.
JEREMY:
Yeah. So, when I first saw Groups I was like, “Wow, that's interesting,” the notion of adding things into this wave is very similar to this conversation flow. And I think a lot of people see it and they compare it immediately to Slack. And I think the main difference between Slack and this is that Slack is very much a real-time notion whereas Office 365 Groups is more of a, I would say it's more like a modern distribution list. You can join the group much like you used to join a DL. And the conversation is happening more in email traffic as opposed to the Slack. So, I'd say Wave is more on the real-time side of the house.
But it's just interesting that now we're saying, you can inject into that DL for lack of a better word, and then have conversations around what's going on in other systems. And there's… we announced 50 connectors today. So, there's a bunch. You can even have a Build 2016 hashtag which you wouldn't do because it would be very noisy. But you can have aggregated reports of here are the tweets that happened in the last hour that used this hashtag. Or Salesforce, here's a new customer that [got created] in Salesforce and injected in. And then you start your conversation in the group around those activities that are happening. So, that conversation aspect is cool.
AJ:
It is.
JEREMY:
And then the other one was Skype. So, the ability that I've got a web application, MDLive is the scenario we'll use in the keynote tomorrow, where it's a doctor's portal. So, I'm logged in as a doctor. You're logged in as a patient, hopefully not really ill. And then you can embed a Skype chat directly in. but you can also do voice and video, too and it's a few lines of code. It's pretty incredible. So, when I log in as a patient to the portal, if you're using Azure AD then it's going to know straight away and it's going to know your Skype identity, allow you to go. If not it's going to prompt you for your Skype creds and I can start having my conversation with my patient at my desk without having to have the Skype program installed.
And as you saw with the chat box we'll get a lot more intelligent on the portal itself, the whole web application having intelligence on, “Okay, there's a voice call going on and he just mentioned the word liver,” for instance, and your web application could have a hook that when, “Okay, I'm going to show you some information about the liver of that patient,” or go look up the information on my [doctor's] journal and show it on the screen. So, it will be able to monitor your conversation that's embedded inside your web application and make intelligent decisions outside of it based on those hooks of translating your voice or monitoring what you're typing and chatting in the chat window as well. So, those two things are really strong. And I think where things have gone is it's just so easy now to integrate those things in. like the Skype team have made it super simple just to embed Skype directly and to have those hooks out to whatever you're writing in JavaScript.
CHUCK:
Now, my understanding is that you can write Skype bots and the Cortana integrations with Node.js?
JEREMY:
Yes, yeah. So, they're all platform agnostic. I think one of the decisions we made really, really early on in the process of Skype and even with the Microsoft Graph SDKs and the Office stuff was we didn't want to pick a framework, because they come and go as much as someone goes, “No, this one's here to stay.” We've all been there. We've seen them crash and burn. Just recently there was that JavaScript library that basically broke every framework. And so, we didn't go, “We're going to pick React and you're going to have to use React to work with the Skype thing.” We've essentially written it in such a way that it will just work across all frameworks without conflicts. And they do a lot of testing across all those things.
Now what we will do is for the most common ones as we get the demand we'll build SDKs that makes it easy to throw it into Angular and use directives for instance or if you're in Node use that language. Or in React we can build some components. And so, we're waiting to see where the interest is based on the frameworks and the audiences on which SDKs we tackle first. We've made some educated guesses on Node for instance. But yeah, we will… I can absolutely see us coming back and doing a React one and Angular 2 and probably an Angular 1 as well.
AJ:
Well, I think it's a better strategy anyway to write your code to work with multiple frameworks because then, I mean honestly when you want to create an Angular service it's just like any other package manager. You're writing those five lines of code up top and the two lines of code down bottom and then you've got an Angular service now.
CHUCK:
Well, the other thing is that across many businesses and across many concerns, you're going to have different people wanting to use different technologies. And so, if you make it easier for people in Go or Ruby or JavaScript or any of these others to effectively say, “I want to use this. I want to wrap around the API, maybe even start building an open source version of it,” then this experience gets spread across the web and has the effect on the way people use it in their mobile apps and on the web and on the computer to where it reaches all kinds of demographics and has a major impact in the way that people interact with their machines. Well, beyond just keyboard and mouse anymore.
JEREMY:
Yeah. And I think it will be interesting to see which partners jump on this, or even enterprise devs in-house building applications start to leverage this in what they're building. Obviously the Starbucks one for the Office add-ins is a no-brainer. You look at it and go, “Wow, that's awesome. That's just fixing a gap that would have been a bunch more extra clicks.” I think with the Skype and the group conversation connectors it's going to be interesting to see which partners pick that up first. And having 50 connectors out of the bat I thought was quite surprising as well that our teams back at base have done a really good job of going out there and reaching out to Zendesk and going, “Look, this scenario really makes sense for you guys. You should go and build this.” But I'm excited to see where that goes and what kind of Skype integrations people build into their mobile applications or their web applications for sure.
CHUCK:
I think the Starbucks example is also really great just from a business standpoint. Because in a lot of cases, if they have a standard operating procedure of ‘get food for the meeting’, then it saves them the clicks. But for Starbucks a lot of those folks are going to schedule a meeting and then they've been fiddling around with this so they have the Starbucks plugin there and it says, “Hey, do you want to allocate some dollars to this meeting for food,” and they go, “Oh yeah, that's a great idea.” And so then Starbucks then benefits from that as well.
JEREMY:
Yeah. And it's visibility. When we first launched the Office add-ins we kind of [hated] it a little bit. Like when you had to launch a task pane you had to go to the insert ribbon group and then click on add-ins and find it. Whereas now we have the ability that we can push installs to everyone in the organization and immediately the Starbucks ribbon button shows up or the PayPal ribbon button shows up for the client. And the cool, fun thing about the Outlook example with the Office add-ins from a reach perspective is that Starbucks can build this and it works not just for Office 365 like work and school people, like people using it in business, but the Starbucks add-in also works in Outlook.com. So, for the 40 million users of Outlook.com or more than 40 million users of Outlook.com that are out there doing normal email, like they would do in Gmail, then can now go get that Starbucks add-in from the Office Store and use it. Again, no matter where they're using Outlook, whether it's in the browser or Mac, PC, it doesn't really matter.
And so, there's a definite value in you write this add-in once but it will run everywhere not just work and school but also in their personal world as well. So, I think at Build like we did last year we're seeing a lot of interest from startups. The want to go to a Group, an audience that already exists, and go like, “Let's just see whether we can get market share here by just being visible in the store and people discovering us that way, rather than force-feeding marketing through broader channels.” And we've seen a lot of partners be very successful in the Office Store through that as well.
CHUCK:
That makes sense.
AJ:
Let's say I'm building a messaging application. Would I be able to use those APIs at all? Or is it only for Skype and for designated partners?
JEREMY:
The API is open. So, you have to register much like you would register when you go to Microsoft Graph to have permissions to go to Files API or the Mail API. You'll just basically register to go use those Chat APIs and build them out.
AJ:
So, I could have my own Slack-type thing or an IRC bot and have my IRC bot feed, “Here's the piece of conversation,” and then get back…
JEREMY:
Correct, and then get that. And that's all webhooks-based. So, essentially you subscribe to webhooks or you push off to your own services and handle that work.
CHUCK:
Yeah, they mentioned Slack and Telegram in the keynote.
AJ:
And also SMS I remember.
CHUCK:
Yeah.
JEREMY:
That's right. Yeah, so actually my friend Richard [inaudible] built the Build Bot, I don't know if you've used that yet. So, you can SMS the Build Bot and go, “When is Jeremy's session?” and it will basically look at the whole schedule list and go, “There are three sessions by Jeremy. Which one do you mean?” and then you could like, “This one,” and then it will return more information about the session, the location, what capacity is the session, that kind of thing. And so, he built that very quickly last week actually. It was a last minute, kind of like we need this Build Bot. Let's just show off the bot and have the attendees use it. He's frantically running around making sure this thing is all good.
CHUCK:
[Laughs]
JEREMY:
And people aren't asking it odd questions like the last bot that got shipped a few weeks ago. But yeah, this one has definitely proved useful. And I think a lot of the feedback I've had from the keynote is, “Oh, [inaudible] overreaching on the bot stuff.” I'm like, “It's actually really useful.” Because I can go to the session list on the Build website and see all the sessions. But just having a conversation with a bot is actually, it's more natural I think. And again, that's another area I'm like, “Wow, I really can't wait to see which partner goes and builds something really cool in a bot.” And you'll be like, this will just be part of normal day-to-day life in a matter of years, much like I have Alexa at home.
CHUCK:
I was going to say…
JEREMY:
I can't be without Alexa now. I go into one of my friend's home and start asking Alexa to play music and, “Oh that's right. I'm not home anymore.” I think the bots aspect even plugged into Alexa will be amazing once that gets going, too.
CHUCK:
Well, and that's how Alexa works is that you effectively add skills which are a lot like these bots, right?
JEREMY:
Yeah, that's right.
CHUCK:
And so, Alexa as far as its capability for parsing what you want, it's kind of horrendous. But when you get a new skill in there and it knows when you say these words or these kinds of words in a sequence it means, “Go look up this app and apply this API in this way,” and it sounds like yeah, the Skype bots and the Cortana plugins all work kind of in the same way.
JEREMY:
Yeah. And it will be interesting with the Cortana stuff in terms of you did say Slack is there as one for instance. And SMS is one, the Telegram. It won't be long before that list is a lot longer I would imagine with other partners like Alexa. So, you can actually [lot] those in. It's not an area I'm an expert in but you can imagine that's probably not far around the corner in terms of that aspect. And it's an interesting approach that Microsoft as a company has taken on saying, “Look, we're not building this so it only works with Cortana on Windows. We're just saying look, go build your bot. We know you use a bunch of different platforms but if you build them here and deploy them here, that's the area we want to be in.” And it's very, very easy to do, too. There's a lab section over here and you can go and build one step-by-step instructions in about 10 minutes from scratch.
CHUCK:
Nice.
JEREMY:
So, that side of it's really, really neat.
CHUCK:
In fact, I was going to say we've gotten a little bit afield from Office.
JEREMY:
Yeah, that's right. Totally out of my realm. But fortunately a colleague works in that team. So, I'm [inaudible].
CHUCK:
So, my other question about Office and Office add-ons in particular is that because they're HTML and JavaScript do you style them with CSS?
JEREMY:
Yeah, good question. So, when we first shipped this three and a bit years ago now, we just said, “Yeah, you can just do what you like,” and then we got feedback from customers and partners that we're trying to mimic what Outlook looks like or we're trying to mimic what PowerPoint looks like so that it feels part of it rather than, “I'm a developer and I can't make things look pretty.” And so last year we announced something called Office UI Fabric. Essentially it's very similar to Google Material Design. But it's actually what we use internally.
So, when we're styling Word Online, Outlook Online, PowerPoint Online or we're styling the Mac or we're styling the Win32 version of Office and so forth, we're using that library. And it gives you the ability to leverage those style sheets and common controls like [people] pickers, file pickers, the persona cards that we have that you see in Outlook when you click on someone's name and it comes up with a card with all their details. You can leverage all those components directly in your web application. And so, we've seen a much better consistency of look and feel now when you go to the store and you add add-ins, that they look all the same. There's a bit more uniformity. They still have their own brand. So, the Starbucks one looks like Starbucks but they're using all the same controls that we use in the product. So, it doesn't feel so jarring when you open up the task pane and see Starbucks or PayPal or any others come up.
CHUCK:
So effectively, you could use Office Fabric UI to build out your button and then you're saying, “But this is a Starbucks button so I'm going to tweak the style a little bit and maybe give it a little bit of that Starbucks green or maybe put a logo in it or something like that so that it has its own feel.”
JEREMY:
Yeah, yeah. And so, it's really a baseline for developers. And again it's been done in such a way that it's framework agnostic. There's an open source project actually that a guy called Andrew Connell has built out to build them all as Angular directives as well. So, you can essentially just chuck an Angular directive on the page and it's a lot less lines of code and it's more Angular dev friendly to be able to use the people Picker and so forth, which is cool. Or a calendar control, the date pickers. Essentially, everything you see in Office, there's a Fabric equivalent of it. And it's all open sourced. And actually there a lot of the team here this week getting feedback. And they've been great. They've had a bunch of teams go, “We'd really like these hooks in these components. Can you add them?” and they've been very reactive getting that into Fabric and getting it out there on the CDNs really quick.
CHUCK:
So effectively then I could build a plugin that looks like it belongs in Office that has the button that when I click it, it can connect to the Graph APIs that Microsoft has for all of this stuff including documents and calendars and email and all that stuff.
JEREMY:
Yeah, yeah.
CHUCK:
And it can also hook into some of this conversational stuff. So, I guess what I'm saying is, is it looks like it's part of the application but it has these vast capabilities that Microsoft provides as part of the platform.
JEREMY:
Right. And so then, there are some really cool scenarios. The Salesforce one for instance where you're in an email in Outlook and you want to go install that against your customer. Traditionally you would probably have to remember what the Salesforce email address is that you forwarded to. Now with just one click in Salesforce it goes and scrapes the body, the title, who's in the to line, the date of when it was sent, and then it calls the Salesforce API and pumps it over to Salesforce. So, it's not just our APIs that you can call in an Office setting. It's anything you want to do, because it's just HTML and JavaScript. And we actually this week have launched authentication dialog display window that allows you to pop up like the first time you do anything with the Salesforce API or open up a dialog API, that allows you to put in your Salesforce creds. And it handles the tokens back and your add-in can use it. Whereas before our partner were having to build it themselves. So, we've got that feedback and we've added this much more streamline way of handing authentication to any service from the inside of Office add-in whether it's Outlook or PowerPoint or Excel. Yeah.
CHUCK:
Very cool.
JEREMY:
Yeah. It's fun.
CHUCK:
Do you have any other questions or anything you want to…?
AJ:
No.
JEREMY:
So, if people want to know more, the dev.office.com is our website. We have about [inaudible] of training videos based on whether you want to use the Graph or whatever other services are available or if you want to build add-ins.
CHUCK:
Is there a tutorial up there?
JEREMY:
Yeah. And this has step-by-step labs, too. So, each of those videos has accompanying step-bystep lab that you can follow. And all you need is an Office 365 tenant. So, you can go if you join our developer program which is on the home page of dev.office.com, we'll actually give you a free developer tenant for a year. So, you can get started and play. And if you're building an Office add-in you can just use the web browser because you can use Outlook Online and Word Online. But if you've got Office for your Mac or for your PC you can test the add-ins locally really, really easily as well.
CHUCK:
I guess that brings up one other thing that I didn't think about before and that is that then can you build… I guess you have the Graph API so you could conceivably build plugins or widgets to go on a non-Office website.
JEREMY:
Absolutely, yeah.
CHUCK:
To put that stuff in.
JEREMY:
So, I could have foo.com running on the Node stack and call off to Microsoft Graph, user Office UI Fabric to style your standalone application and make it look like an Office add-in, and Office application even though it isn't. And then actually one thing I didn't mention is that you don't need Visual Studio to do this.
CHUCK:
Right.
JEREMY:
Essentially it's a website running HTML and JavaScript. And then it's what we call a manifest file, and XML file that you upload into your Office client so that it knows… it's a way of registering the add-in. Because it's just XML. You can write that yourself. Obviously the experience in Visual Studio file new project and F5 is going to be a lot nicer. But with the Yeoman generator we can even scaffold your files out so you don't even need to use Visual Studio if you choose. So, for the Mac audience it's very, very straightforward to use without having Visual Studio installed.
CHUCK:
Right. So, effectively then I could put a widget on my page that has some functionality that calls back into the Graph API and store stuff in a document or updates my calendar or whatever.
JEREMY:
Yeah.
CHUCK:
That's pretty darn slick. Does that work with browser plugins?
JEREMY:
We actually had a hackathon. A guy built a Chrome plugin that called the Microsoft Graph. And it was a really neat add-in. What he did was he was using… he had a button where essentially it would look through your mail using the Mail API and it would look for any unsubscribe hyperlinks in each of your mails. And when you push the button it would essentially go and open multiple tabs all of those unsubscribe links.
CHUCK:
[Laughs]
JEREMY:
So, rather than going into Outlook and clicking every email, finding the hidden unsubscribe link they make really… sometimes it's gray on gray so you can barely see it. But it meets [inaudible] requirement. This thing just goes through and just opens them all. And in some cases what he did was he automatically checked the button and clicked “I do want to unsubscribe”. And so, it was a really good way of clearing out the junk mail from your inbox.
CHUCK:
Man, I need that. I use Gmail though.
JEREMY:
Yeah. I believe he mimicked it on a plugin that existed already in the Gmail world. But it was just a great example of a guy that had built Chrome plugins before to auth into our Graph and grep the mail inbox information and use the unsubscribe links.
CHUCK:
Awesome. Well, before we wrap up one of the things that we usually do on our show is we have our guests do what we call picks. I don't know if you've listened to Twit.tv or something. So, basically the idea is just anything that you like that makes your life better, that you enjoy. We have people pick TV shows or pick coding tools or pick movies or whatever. So, I don't know how creative AJ and I are going to get if we're doing three or four of these in the next few days.
JEREMY:
[Laughs]
CHUCK:
But for you, if you could pick a couple of things.
JEREMY:
Yeah
CHUCK:
What are you into these days?
JEREMY:
You said TV shows. I just picked up a new show. I finally upgraded my cable box to an X1 XFINITY box so its interface is way better than the old crappy cable boxes that you get. And I discovered a show called Billions which is the guy that's in it was in Homeland. He was the soldier that came back from being captured for six, seven years, and you never quite knew whether he was turned as a terrorist or whether he was a genuine soldier come back from war. But he plays this billionaire and then there's this guy that's basically after him trying to work out whether he's corrupt or not. Very, very clever show. One of those shows that you watch the first few episodes in Netflix style. Like, do you want another one? I'm like, “No, no, please. I need to go to bed. I've got Build next week.”
CHUCK:
[Laughs]
JEREMY:
But we plowed through about 8 episodes. So, Billions is a really, really good show on Showtime.
CHUCK:
Okay.
JEREMY:
So, that was a good one that's kept me busy last week.
CHUCK:
Oh, there you go. Well, if you start looking tired, we'll know why. [Chuckles]
JEREMY:
Yeah, that's right. I stayed up watching the rest of the show.
CHUCK:
[Chuckles]
JEREMY:
No, I think my girlfriend would get annoyed if she knew I'd watched it without her. I'm sure you guys have the same problem, right?
CHUCK:
Oh that's right, yeah. You should have brought her with you.
JEREMY:
Yeah, that's right.
[Chuckles]
JEREMY:
No, the last thing you want to do is bring a girlfriend to a tech conference. [Chuckles]
CHUCK:
Yeah. I took my wife to a tech conference but you have to pick the right one.
JEREMY:
Yeah. She's a registered dietitian. So, she has no clue about this world. And sometimes when people come up and visit us in Redmond I'll take them out for dinner and she'll come with. And at the end of it she's like, “I had no idea what you guys were talking about for the last hour.”
CHUCK:
Yeah. No, what I did is I took my wife to a conference that I was speaking at in Hawaii.
JEREMY:
Oh, that's a good idea.
CHUCK:
And I abandoned her in Waikiki for three days.
JEREMY:
Yeah, I'm pretty sure she wouldn't be complaining too much there.
CHUCK:
Yeah. So, she went and got her nails done and whatever, yeah.
JEREMY:
[Laughs]
CHUCK:
San Francisco I think you could have a good time.
JEREMY:
Yeah, it's great. I used to live in New York for three years. And I've been in Redmond now for two. And coming back here is, I've missed the big city a little bit but I'd be glad to go back to Redmond as well. A little bit more peace and quiet, not so much concrete.
CHUCK:
Gotcha. Well, just to wrap up, so you did mention dev.office.com
JEREMY:
Dev.office.com, yeah.
CHUCK:
Are there any other resources that people should look at?
JEREMY:
That one's the main one. That will bridge you to getting started or get all the training and the hands-on labs experience. Dev.office.com/podcast will go to the podcast that I run weekly. And we go into a lot more detail about each endpoint and get the engineers on the show talking about stuff, too.
CHUCK:
Sounds good. And then are you on Twitter or GitHub or anything where people can follow you?
JEREMY:
I am, yeah, @jthake. So, J-T-H-A-K-E, yeah.
CHUCK:
Alright.
JEREMY:
So, if you want Office stuff or if you're interested in Azure app services, that's the two areas I focus on right now.
CHUCK:
Good deal.
JEREMY:
Cool.
CHUCK:
Well, thanks for coming on the show. We appreciate it.
JEREMY:
No, you're welcome. I'm glad you carved out some time for us to chat.
CHUCK:
Yeah.
JEREMY:
Enjoy the rest of Build.
CHUCK:
Yeah. Real quick before we finally end this, I just want to shout out a big thanks to the guys from .NET Rocks, Richard Campbell and Carl Franklin. They invited us out to do this and it's been terrific just to be able to meet people, to go to some of the events. And we're sitting in this little booth in the very back of Build. So anyway, I just want to thank them publicly. I'll probably do that on all of the shows that we do this week. But yeah, it's really important for us to be able to get all kinds of different backgrounds and see what's going on in the Microsoft world. Because I don't know that we really cover it enough on the show. So, thanks again for coming, Jeremy.
JEREMY:
You're welcome.
CHUCK:
And thanks to those guys for doing their thing.
JEREMY:
Enjoy the rest of Build.
CHUCK:
Yeah, will do.
[Hosting and bandwidth provided by the Blue Box Group. Check them out at BlueBox.net.]
[Bandwidth for this segment is provided by CacheFly, the world’s fastest CDN. Deliver your content fast with CacheFly. Visit CacheFly.com to learn more.]
[Do you wish you could be part of the discussion on JavaScript Jabber? Do you have a burning question for one of our guests? Now you can join the action at our membership forum. You can sign up at
JavaScriptJabber.com/Jabber and there you can join discussions with the regular panelists and our guests.]