Building Apps with Microsoft Office 365 & Angular
How well does Angular go with Microsoft’s Office 365 SharePoint? This article is based on the Codementor office hours hosted by 10-time Recipient of Microsoft’s MVP award for SharePoint, Andrew Connell.
Introduction
Traditionally, SharePoint developers have been building solutions inside SharePoint. Microsoft is now following the new approach that was the result of a shift in the industry. Instead of running custom apps inside of existing platforms, we now run them on our own. We also authenticate using OAuth and RESTful services, etc. This has been one of the big things around using Angular, as it’s a really popular thing in the Office 365 space, primarily because it gets you off the server.
These days things have really changed at Microsoft, specifically since Microsoft got a new CEO, and the company is now much more open. So, it doesn’t matter what IDE you use or what language you use when you develop.
Office 365 & Angular
Microsoft’s Office 365 was one of the 2015 Ng-Conf’s biggest sponsors, and some people may be curious as to why. We actually expected to be attacked by a lot of the audience, specifically by open-source developers since Microsoft doesn’t have a good rep there. We were impressed by how interested people were in using Angular to build custom apps that would extend Office 365, or in using Angular to build office add-ins for things like Outlook, Word, or Excel that either run on the web or in a Windows/Mac Desktop or on an iPhone and Android.
Angular 2.0
Angular 2 has a lot of cool performance stuff with dependency injection and the speed in updating the UI and integrating TypeScript, but to me we’re still way early for Angular 2.0 to be in prime time.
I’ve personally not done anything with it aside from consuming the academics of what people have wrote about it. One of the things about it that has surprised me is the minimum browser specs that we’re seeing that Angular 2.0 is going to require—they’re pretty steep. As a developer it’s cool, but customers may not agree. If they don’t have the browser spec to get to that point, then it’s going to be a bit of a challenge for them.
Specifically around Office 365, its minimum browser spec is at IE9, and there are a lot of people who are potentially still on IE9, but we know that Angular isn’t going to support that. Angular 1.4 doesn’t even support it, but we know we won’t be able to take advantage of that from our customer’s point of view.
Thus, I think we have a lot of time before Angular 2.0 will kick in, but I’d love to see the change come quicker because Angular 2.0 offers a lot of cool features.
Writing an External Angular Apps with Microsoft Tools
If you developing in an on-premises environment and you’ve set up the app domain and the services working so you can register apps and grant them permissions, you can start writing external apps using Angular for SPAs now.
Going all the way back to SharePoint 2010 if you wanted to, you can use Angular or anything like Ember or Aurelia to build Single-Page-Applications. The only thing you really need for those things to work is a host for the browser. However, to give them any business value, they’re going to have to talk to some kind of service. We had good services and endpoint even in the previous version of SharePoint 2010.
With that being said, you don’t need the whole app service or app stuff set up to be able to take advantage of building SPAs or external apps.
The app services will give you two things. The first is the ability to have some specific kind of deployment model. When you wanted to deploy to SharePoint in the past, you’d have a sandbox solution, which is essentially a little package of files that were given to SharePoint that would save in a virtualized file system in SharePoint. If you made a request to that page, it would pull those files out of the database and give them to the browser, or return them back to the requester on the browser.
The app service will give you a similar package, but the deployment will be much easier. So on Windows/OSX/iOS/Windows Phone/etc, instead of the installs being a package file being inside an .msi or .exe, now you just go inside an .exe file and tell it that you want that thing, and it either installs or doesn’t install, and your only option is to retry. Same thing for upgrades and uninstalls.
The other thing you’ll get from the app service is your app will have its own first-class identity. So, you can have an app that would have permissions to do things, or you can have a user who has permissions to do things. You can have both the app and user needing to have permission to do something the app is trying to do. You can also have an app-only permission only the app needs permission to do something and whether the user has the right to do it doesn’t matter.
These are the things you’re going to be missing without having apps fully setup and configured in an environment, but there’s nothing to stop you from building an application right now. Personally, if I didn’t have the app service I would have an app with only user-based permissions, so once the user is logged in the user are going to be the ones calling different services under the context of that user. If you hosted outside of SharePoint, you’re going to have some authentication stuff you’re not going to have fun with such as the NTLM, figuring out how to do the handshake, and the multiple round-trips for every handshake. So, if you can host the app inside SharePoint using a “sandbox solution”, you’ll be in better shape for the time being until you get the app service set up.
The experience of developing Angular with Microsoft’s tools
If you’re a traditional Angular developer and you’re interested in diving into Microsoft’s tools, there’s extensibility in Office Outlook, Word, and Excel 2013 and beyond. You can take an .xml manifest file that describes an application (permissions, where it runs, etc), and you can give it to the office client in different ways. You can get it from the Office Store, and when people acquire or load them into e.g. Outlook, it installs the app. You’ll get a task playing off in the right-hand side like a little popup box, or in Outlook between the header and body of the email. That thing is just a little frame for a web app, which could be an Angular app.
We held a hackathon one night at the Angular conference and we spent around half an hour showing a bunch of Angular devs how to build an app in the context of an Office add-in/extension. We showed them how to have their add-in not only installed, but also registered in different clients. We also showed them how to get their add-in to communicate with the hosting Office app, and how the Office app communicates back with the add-in they built. What was really surprising to me and the other Microsoft guys at the hackathon was how much all the teams in the hackathon were able to accomplish in about 2 hours. We had things from D3 animations, charting, tracking pixels in emails, add-ins that would check whether emails had been opened, and more. The devs took their Angular knowledge and applied it straight to Office and were incredibly productive.
I think it’s even easier to build external web apps or SPAs that talk to Office 365, because all you have to figure out is how the authentication works (which only take about 10 minutes now), and then it’s just calling services. I don’t think I’m painting too broad of a brush when I say that every Angular developer has called a service before. So, it’s really easy to get up to speed developing AngularJS with Microsoft tools. In fact, you can even say that Angular devs using Office 365 have an advantage over traditional SharePoint developers because they have a mindset for a decade or more trying to figure out how the progression works.
Recommended Angular UI Frameworks
Aside from Bootstrap
I’m a big fan of Material Design—the Google design language. That’s the one I’m using in my Angular apps because it’s really easy to work with. Nothing against Bootstrap, but I’ve kind of seen enough of it where everything looks the same. I like the way Material Design has a nice package integration with Angular. There was something that was sort of teased out during Microsoft’s Build Conference but I’m really interested in: a design package language that we’d be able to use in our own SPA which has the same UI components Microsoft has been using for Office 365 and SharePoint (e.g. the same toggle switches, dropdown, etc). Although I’m not sure what the name of that package is, I’m definitely looking forward to it.
If you want things that are packaged where everything has been done for you, I’d recommend Telerik’s Kendo UI Suite. I know there are other paid suites like Infrajistics that take advantage of Angular.
Resources to Learn Office 365 & SharePoint
http://dev.office.com is the portal for everything Office and SharePoint related with a lot of good training and coding examples.
We also have a Github repository where tons of projects get referenced from dev.office.com the Twitter handler @officedev
Office 365 is the most open part of Microsoft right now in the sense that they have native SDKs for iOS, Android, Cordova, etc. They hope you’d use Azure as well, but if not, it’s ok as well.
Furthermore, if you think about who has the money to do custom development: enterprises. And a lot of enterprises put their data in Office 365.
Office 365 is the fastest growing product in the history of Microsoft. Currently there are 470 PB of data in Office 365, so if you’re interested in developing things for Office 365, now is a good time to start.
Other Posts in this Series:
About Andrew Connell:
A 10-time recipient of Microsoft’s MVP award for SharePoint, Andrew is a classic Microsoft developer who has been using .NET and writing C# on ASP.NET as server-side code. These days he spends most of my time building full client-side applications using Angular, specifically Angular 1.x, or doing server-side stuff with a mix of ASP.Net or Node.js. He specifically specializes in Office 365 and hosting stuff in Azure.
