02:48 - Andrew Connell Introduction

03:16 - Building for an Office Platform

08:12 - How do you host Angular code?

09:56 - Why Angular in this situation?

14:41 - SharePoint Add-ins

27:32 - Adoption, Uptake

29:29 - Office UI Fabric

33:03 - What’s the plan for Angular 2?

Picks

Shannara (John)
[egghead.io] Getting Started with Redux (Lukas)
View-Master Virtual Reality Starter Pack (Lukas)
Dan Abramov’s work on React (Ward)
JavaScript Jabber Episode 179: redux and React with Dan Abramov (Chuck)
JavaScript Jabber Episode 181: The Evolution of Flux Libraries with Andrew Clark and Dan Abramov (Chuck)
Star Wars (Joe)
Sphero BB-8 (Joe)
Build-A-Bear Chewbacca (Joe)
The Star Wars: The Force Awakens Soundtrack (Joe)
LambdaConf (Joe)
MyFitnessPal (Chuck)
Allrecipes (Chuck)
A gym membership (Chuck)
The Nike+ Running App (Chuck)
Run 10k (Chuck)
Aftershokz Blues 2 (Chuck)
The Twelve Factor App (Andrew)
ngOfficeUIFabric.com (Andrew)
The Innovators (How a Group of Hackers Geniuses and Geeks Created the Digital Revolution) by Walter Isaacson (Andrew)

 

Special Guest: Andrew Connell.

 

I’m turning on Star Wars again.

No!

Hey everybody and welcome to episode 76 of the Adventures in Angular Show. This week on our panel we have Joe Eames.

May the force be with you!

Oh, please!

Ward Bell.

Yeah, anything but the force.

John Papa.

Chewie, we’re home. [Chuckles]

Lukas Reubbelke.

Hello.

I’m Charles Max Wood from Devchat.tv. It is too late to get tickets for JS Remote Conf but we are doing Freelance Remote Conf next month so go check it out.

We have a special guest this week and that is Andrew Connell.

Hello. It’s great to see Han Solo flying again.

Oh brother. This show is over. [Laughter]

What’s the Star Wars metaphor for jump the shark?

Punch it Chewie.

Aw, that’s right in there.

Do you want to introduce yourself, Andrew?

Sure. Thanks for having me. Andrew Connell. I’m a long time – traditionally Microsoft developer that has made the switch over in the last few years to doing a lot more JavaScript stuff. I host a podcast for the Microsoft Cloud Show, doing a lot of work primarily with the Office and [inaudible] groups, specifically building web apps for Office 365, SharePoint applications like that.

Nice. How does that all figure in with Angular?

[Chuckles] I guess the last few years – I share some more background to what a lot of the guys or a lot of you have. I think Joe and John and Ward were – I’m traditionally a Microsoft service side developer. I did ASPN net building web apps and all that kind of stuff. But then the last few years, I’ve shifted away from that, doing more stuff, just web-based applications; using things, started up with Durandal and now spending a lot more time with Angular.

What I’ve been seeing, at least, for the last years is Microsoft is really embracing specifically the Office division. It’s doing a lot of work to embrace this more open source and Angular-based development or web app based development for building applications on their platforms.

Can you contrast that for a second to what it is traditionally been like to build for an Office platform and where they’re going and what’s happened?

Sure. I guess my original background is back from the one product that everyone in the world seems to hate which is SharePoint. It’s been actually kind of nice because the few of us that did it, nobody else want to do it. Actually, it came with good billing rights. [Chuckles]

Nice.

What we did with SharePoint is that for the longest time, we would build service side based things, so building a DLO, a C# and everything, then having some sort of a deployment model to inject it into SharePoint and have SharePoint run it on our behalf.

We went from that model, which I’d say is 2007 all the way up to 2010, to start moving things out of the SharePoint process and trying to have SharePoint instead calling our external applications. So we did that primarily using server side code that give us some sandbox process, but we would still be writing using C# or VB to write DLLs, hand them over to a sandbox process that would execute it so that if our stuff blew up, it wouldn’t affect SharePoint.

But in the last few years, what Microsoft has really been trying to do is to get more in the services business. One of those services is – their fastest growing product in the history of the company which is Office 365. Office 365, for those who aren’t familiar, is Microsoft’s hosted software as a service offering for things like SharePoint, Hosted Exchange, Hosted Skype, Hosted Yammer for social networking, and also their enterprise file sharing product called OneDrive for Business.

When they went to that direction, the challenge that they’re going to have was – we all probably had many years ago, which is when I won the [inaudible], an application that run on one of these shared hosting providers, they would never let me build a com object. They would never let me build something that would have to be installed because if I had a bug and my application went down, it would take down everybody else in the server or potentially take everything down – everybody else in the server, in fact, the other customers.

So what they did is they tried to find a better option for still giving the developers the ability to build customizations and either inject them or have the hosting application call it; they needed to have a way – an easier way to do this. To do that with server side code that you gave to Microsoft and had them host for you was not the option. So they came up with two different ways of doing this. One was called – one general way is something called an add-in. this originally was called apps and they had to rename it. Now, it’s called add-ins.

The gist of it is that instead of Microsoft hosting and running your code, you would host it somewhere, then SharePoint, for example, would call into your application, or it would just simply redirect the user over to your application and then you would [inaudible] back to office 365 over HTTPS using restful services or this little client-side API that was basically just a wrapper to the rest APIs, all authenticated over [inaudible].

To get to the Angular story though, they gave us two ways of doing this. These add-ins, we had one way of doing something called provider hosted apps or add-ins which was essentially building a server-side web application that was any technology, any infrastructure hosted anywhere. It could be a PHP app running in Heroku, and Microsoft which is essentially when someone would say I want to run that app, it would just redirect them over to that URL where that app ran.

The other option though was something called a SharePoint hosted app. It’s actually got a really bad name because the concept of a SharePoint hosted app only meant that SharePoint hosted the assets and it would serve them up, but those assets were not run server-side; they were all served up and running the client so it was all CSS, HTML, JavaScript, images – stuff like that. So that’s where Angular started to become a really appealing option, because now, developers didn’t need to have a separate place to go deploy their application. They could still hand it to SharePoint, deploy it to SharePoint but SharePoint wasn’t executing the application. It was just serving up the files like a FileShare and your application can run within the context of the SharePoint site that you’re in.

Angular made a great – was a great option for that because then you could build full-blown client applications.

So Andrew –?

Yeah?

Andrew, if I could inject. I’m listening to you and it sounds cool. I understand that’s the [inaudible] but I want to make sure it’s clear to all the audience, too. When you take a SharePoint installation, you want to write some Angular code there. How do you host that code? If Angular goes clientside, it’s got to be served up from some static server, and it’s got to be a little [inaudible] to some APIs; these are client or server based. Can you explain how that integration works?

You really have two options. Either one, you host it yourself, so you just tell SharePoint – you give SharePoint an XML file when you install your app which, installing an app is really just giving SharePoint an XML file. All of that really does is that just hands a – that just tells SharePoint ‘go over to this other web app’. That’s other [inaudible] to go load the application and then you host it wherever.

The other option is, like I was saying before, what you're asking is that if I want to give it to SharePoint, let them host it. You build this package; Visual Studio has a way of building this package. It’s just a ZIP file with a special name. It includes that XML file which is just a manifest, telling SharePoint about the app; things like the title of the version, what’s the start page for and what permissions it needs.

All the assets related to that application like the JavaScript files, HTML, the images would all be inside that application. You would then give it to SharePoint and have SharePoint install it. It would put it inside a special SharePoint site that every app install would get. So it would isolate your install from everybody else’s app and isolate your install from the rest of the sites that you’re installing within so that a customer – I could deploy an application and a customer would feel safe so that even if they install Andrew’s application, if it did some of the various stuff, it could only do it within the context of that app and it couldn’t access my enterprise data.

Cool. Thank you. So when that app’s running, can you give us some examples of some things that Angular’s ideal for in this situation? Why not just basic JavaScript for example?

It’s a good question. You could build any kind of an application doing this. A lot of people – we originally started doing stuff with Knockout or even building – it’s funny, we didn’t have names for stuff until we had a name for something and then we had to give a name to the old stuff. We could build multi-page applications where we had a bunch of different HTML files that we would just redirect them, just jump from page to page. It was still being hosted inside a SharePoint, but it was just HTML being served up.

Angular made a lot of sense because it gave people a much – it gave them a feel like they were building – they were working with a client-installed application which a lot of these enterprise users were much more familiar with. They weren’t as [crosstalk].

Right. So you’re not just talking about building a text box where the button is an application; you’re talking about building an actual mini applications inside of there.

Yeah, building a mini application like a learning manager, or building some sort of an order management system, or building some sort of a CRM interface type thing. Usually, it’s their – they can get pretty big and pretty complex but a lot of times, companies want to have these applications when they’re already invested in something like SharePoint, or they’re invested in something like Office 365. They want their applications to live inside of this environment partially because all the users are already going to be there. They already have their logins so you don’t have to worry about the authentication story.

Everybody’s already logged in, everybody’s taken care of. It’s also going to fit right in line with their corporate internet or their corporate departmental workspace or something like that so that it doesn’t feel – you don’t have this jarring jump from one application to another one to be able to get some stuff accomplished.

Then you’re also able to write applications that integrate with existing lists and things that are in SharePoint or documents that you have in Office 365. There’s a whole set of APIs that somebody who writes this application can tie into to get hold of corporate data, right? Isn’t that integration story part of what’s being said here?

Yes, absolutely. You could build an application that is completely self-standing and it’s just kind of a one-off from your corporate deployment, your corporate SharePoint, your corporate internet.

However, let’s say you’ve got a site that’s got a bunch of existing data in it, a bunch of list, maybe some information from a conference of collecting leads. If you want to be able to create an application to be able to process those leads, your application can be given permissions to talk to other SharePoint sites, then it would use the context of both the user and the application to be able to [inaudible] to those list to show that data from what then your Angular application. So you could build an application that doesn’t store any data; instead, it just uses the data that’s already inside of SharePoint. Be it list data, be it contacts, be it files, word documents – all kinds of things.

For example, I built an application with – an application that Dan Wahlin had built about a travel expense manager type application. He did this as an Angular app. We took that Angular application and we actually [inaudible] to actually – to store all of this data instead of storing it independently in its own repositories, which stored all the data inside a SharePoint.

So we had an expense list, we had a tracking list for all the different employees. We use OneDrive

for businesses store, attachment for all of the expenses that people would scan in from their different receipts and stuff. But the Angular app was the thing that actually helped manage all the data, but the users still felt like they were still inside a SharePoint so things were still nice and comfortable to the experience that they were already in.

So I guess what I get is the single page app advantages like everybody who’s an Angular developer is listening on this podcast is familiar with. So that’s what it’s like from a developer’s perspective who’s outside of the whole SharePoint ecosystem per se, but what the business gets is rapid application development of these responsive single page apps and the safety of their own environment and the interaction with the corporate assets that they already care about and are maintaining. That’s kind of the union of interest, right? It used to be really hard to write your own app that could do anything that also touch SharePoint and Office assets.

It was hard as always in the eye of the beholder. I would say there was a steep learning curve because you had to have some domain knowledge of how SharePoint worked, how data was stored and all that kind of stuff. It’s the same way if you jumped over to Salesforce and you wanted to build an application that talk to Salesforce, you have to understand the relationships between leads and accounts in context and all that stuff.

Yes, it does make it a little bit easier for developers. I think it makes it easier for developers to be able to build stuff and to get it deployed with the added benefit that you don’t have to worry about where you're going to host anything. All of these stuff that I’ve talked about so far, all of these is what we call SharePoint add-ins, but there’s a whole – another add-in model that we’ve seen – I’ve seen actually, a lot of interest around Angular developers who are [inaudible] familiar with the Microsoft space or even traditional Office-based stuff. That’s building add-ins for Office like Office clients like Word, Excel, Outlook and stuff like that.

You mean like extending their capabilities with my own web application?

Yeah. Essentially what you can do [crosstalk].

Why would I want to do that? What’s the driving factor behind me wanting to extend Outlook for example?

It’s a good question. There’s a lot of different scenarios you can look at. Let me call it a couple of the ones that are out there that people can go grab and take a look at today that don’t cost anything.

For example, let’s think about the context of Outlook. You have two different – each one with an A and a B option, two different extensibility points – one for Mail, and that’s both the read form and the compose form, and then one for appointments or meetings and that’s, again, the read and the compose. Let’s say, for example, that you get an email from someone that you ordered a book from or ordered something from Amazon and it’s got a tracking code in it. What do we all do? We either click on the link and we either go to UPS or FedEx or Amazon and go see what the status of our shipment is, or we copy that tracking code and we go jump over to the site and go see where that stuff is – go see what the status of our shipment is.

There’s an app or add-in in the Office store that you can install on Outlook. What that does is that when – it uses regular expression, looks at an email that you're currently looking at. If it detects a certain pattern, for example, the tracking number of FedEx; if it sees that, a little dropdown shows up right between the header and the body of the email. You can click on the package tracker and it shows you the tracking information right in line, right inside the email between the header and the body of the email, and was doing that by fetching data from FedEx using some restful API or whatever and displaying that on the email.

Now the benefit of that is that now, I don’t have to leave where I’m currently doing a lot of my work. A lot of enterprise developers spend their day inside of Outlook, so I don’t have to leave Outlook to get some of my business done or to find sort of an information that’s there.

Another common scenario that we built for somebody is that they had their CRM system – they were using Salesforce – and they were at a conference and they would email each other back and forth about somebody they met at a conference. Whenever it would detect something that was a candidate for someone’s name inside the body of that email, a regular expression would kick in and say that this looks like a potential person. It would take a list of all those people and send it to some service that’s hosted somewhere. That service that they wrote would then make a call over to Salesforce as rest API to see if that person was known inside their CRM system. If it was – when they were in the email – it would show them a little pop-up right between, again, the header and the body of the email, to where they could see information about that person.

For example, there’s a LinkedIn one, so that when I’m reading an email, I could see LinkedIn information showing right up in the body of the email from that user. We’ve even seen – some of you guys are probably even – if you're on Gmail, you're probably familiar with an add-in in the Gmail called Boomerang. Boomerang now is built as an Office add-in inside of Outlook so that now – one of the other benefits of this whole thing is that now, whenever I’m in Outlook and I’ve installed this add-in, I could take advantage of, say, send an email and then remind me in three days that I haven’t got a response from it.

But it’s not just that I’ve installed this add-in inside of Outlook on my desktop, say we got a Windows 10 machine. At home, I’ve got a Mac and I’m using an iPhone, and I have an iPad and I use the web experience for Outlook. Once you install that add-in inside of Outlook, it’s not really installed so to say for the actual installed hosting client like Outlook itself; it’s more or less registered with your account so that I’ve only installed the app once, but it goes with me whatever client I’m using, whichever instance of the Outlook client I’m using.

Oh, that’s cool.

The way it all works is that when the little thing opens up, it’s like – let’s go back to the FedEx one, the package tracker. When I would click on my tracking number and that little pane would show up between the header and the body of the email, that’s just a web application. So all I’ve done when I

built this was I gave Outlook an XML file and said, “Here’s the permissions it needs. Here’s the scenarios of when it can run, so in the read form for email. Here’s the ID, here’s the version number,” all the standard metadata you need for an application. Then I give it a link and say, “If you're on a desktop or if you’re on a tablet, or if you're on a phone, here’s the page you're supposed to go to when you load the application.” That thing that you're loading, that is where you can take advantage and use Angular.

So you're not going from page to page to page, you're essentially going from screen to screen to screen on how you can actually build these apps.

You created a little Angular island inside of Outlook.

You create an Angular island inside of Outlook. And it’s not just for Outlook; we can do it for Word by creating task panes on the right-hand side of Word. We can do it for Excel on the right side – the same thing for task panes in Excel. You can create content controls or content add-ins that actually live inside the body of a Word doc or inside the body of a PowerPoint add-in.

For example, some people have built things that use D3 for different visualizations and stuff inside of PowerPoint.

Now to be clear, are you talking about just running the inside of a web based versions of Office 365 Outlook in itself, or are you also about running these in the actual desktop installations?

I’m talking about everywhere there’s Outlook, so both in the web and the desktop ones.

Today, these work essentially in all the web clients for the different Office clients. These work everywhere. These work in the Excel, Word, Outlook and PowerPoint. They work in all the web instances.

If you're on Windows and you're on Office 2013 or the latest version, Office 2016 – they work in all of those. If you're on a Mac and you're using – I think it’s Mac for Office is what I use and I’m on Mac. Mac for Office 2016, the one that – the more recent one, not the 2011 version.

We don’t have full parity yet. They're getting there in the next few months, but we have for read forms in Outlook. I have add-ins inside of Outlook on my Mac. I also have some of the add-ins, like I have add-ins for Excel on my iPad. So they started on the whole Windows platform and web platform piece first, but they’re porting these to work the exact same way across everywhere that there is Office. That includes Windows, OSX, iOS and Android as well.

There’s a bunch of samples where you can actually see how this stuff is done. I’ll drop a few links in the show notes here, but one of the things we did is that I worked with Microsoft to host a hackathon at the ng-conference back last March in Salt Lake. What we did is the contest was for two and a half hours. Nobody had ever done this and it was – let’s show you two samples of one building a task pane for Excel and one building one for Outlook, then turn them [inaudible] and say, “You guys just build stuff and Microsoft gave away a bunch of Xbox1’s and speakers and stuff like that.” I would drop a couple of links in the show notes here so we can include them for everyone.

There’s some hands-on labs that we’ve written, actually walk through and show you how to go about building these applications. It’s really cool if you’ve ever built a web application. The way I describe to people is it’s stupid easy. There are two or three little tricks that you have to do in order to get this to work with Angular. It’s part domain experience here. One of them – I’d say tricks – let’s just call them characteristics. One is that your web application that’s going to be surfaced inside of Office, it must be served over HTTPS. It will not be loaded if it is an HTTP. So that’s just a thing that all the Office clients, they require to be HTTPS.

Another one that’s a little interesting here is that your application must fully load within five seconds. Now, there’s ways to get around that obviously. They have some first page experience that’s like super simple. The reason for this is because Microsoft owns the experience with a client. When the user goes to open up one of these apps, if it’s going really slow and things break, they don’t want the customer to think that they're Outlook is broken. They want them to know that Outlook is fine; it’s this application that’s broken. I don’t think that’s so much a Microsoft is being selfish thing, it’s just a – let’s make sure that the user knows what’s actually the problem.

The way you get around this is when you build your application, you have to hook into this Office object and you have to implement a specific function that is not implemented. It’s called the initialized function. That function has to be called and finished within five seconds of the Office client calling in.

And when you’re running this code, you're writing all Angular but it sounds like you're saying you don’t have to use Angular, right? [Crosstalk] So if the Microsoft team recommending Angular? Are they married to Angular? What’s that relationship like for these?

It’s very loose. They don’t care what you build. This is one of the things that’s been really interesting over the last year is that Microsoft doesn’t care what technology – let me rephrase that.

What are they recommending?

They're really not. They're just saying you just use a web technology to go through and implement this stuff. They would prefer – obviously, if you use their server side technology, they would prefer if you hosted it on Azure but it doesn’t matter.

I do – mine for example, I build all my stuff at server-side, it’s all using Node. And client-side, I’m using Angular for it. They are heavily embracing Angular though. That’s the one they're pushing frankly because I think that they just see the popularity with it and they want to jump – they want to jump inside that crowd and they want to jump inside the wave there. It’s a good idea because [crosstalk].

Is it working? I mean, where they're going, there are a lot of people doing this?

There are a lot of people doing it. For example, they have – let’s see if I could get this right. I understood that of all the add-ins that were built – that are being built for Outlook, 80% of them are being done by people who are not on the Microsoft platform. They're using Angular, they're doing other service side stuff, so much so that I was asked when I was building – when I was evangelizing this stuff at a conference, someone on the Outlook team said, “When you do this, would you please make sure you don’t mention Visual Studios so that they know they don’t need

Visual Studio.”

We’ve gone through the [inaudible] Yeoman generator for building these, if you're using Visual Studio code or if you're using really anything – WebStorm, Sublime. You can use whatever you want.

There’s a bunch of samples here. You can take a look and see where a lot of the stuff – where you can actually jump in and see how to build these. If you go to the – they’ve got a bunch of training materials that are available to you. One is that if you go to dev.office.com/getting-started/addins, they have like a five or six step process walking through. You can actually see how to get up and going with this, but then they also have a bunch of training modules that are available up on GitHub.

If you go dev.office.com/training, in the left-hand navigation, there’s a section where it has a bunch of different categories. If you go to the one that talks about the Office 365 add-n model, there are different modules for building Outlook add-ins or Excel add-ins or Word add-ins – all that kind of stuff.

We jump back one thing and make sure I say one more thing, too. I was [inaudible] in mentioning this. I said there were a few characteristics of things you have to deal with when you're trying to get this to work; one of the things that you have to do is that – I know a lot of us are familiar with building – we build Angular apps. The way we load them is by saying ng-app and some – one of the elements on our page to load the root module of our application.

Unfortunately, that doesn’t work when you're building one of these. And it’s an issue between – I think it’s more on the Office side but there’s a file called OfficeJS that you have to reference. It’s the one that gives you this Office object that you use to talk back and forth to the hosting client to get things like information about the head or the email or the body. When you use ng-app to load Angular, either OfficeJS or Angular JS, one of the two clobbers each other and things don’t go well.

Essentially, what you end up doing is you – instead, you bootstrap your application, your Angular app. You do that inside that five second window that I was talking about earlier, and you do it using the Angular.bootstrap method to go load your app instead of just using ng-app. That’s the only weird thing about this whole process.

That doesn’t sound bad.

It’s not. It was a – it is when you're trying to present this the next day at a conference and you realize at 11 o’clock, things aren’t working the way that they had them working because of a weird timing issue all of a sudden, then you’re up for four hours trying to figure that out, but once you figure it out, it’s just two lines of JavaScript and you're all good.

None of us have ever had that experience. [Chuckles]

Sounds like an intimate knowledge of an experience like that.

Yeah.

So what’s the uptake on this, Andrew? What are you seeing out there? Like can our audience get a job doing this kind of thing?

Yeah. So what’s been really interesting, I personally think – and what I’m seeing – is that this is the biggest growth area for the Office group in terms of getting developers on board. Specifically, I’m seeing the majority of what are not traditional Microsoft developers. I see them getting interested in this stuff. I’ll give you a classic example of something that happened at the Angular U Conference. I see this all the time.

I did a workshop – post-com workshop at the Angular U Conference out in San Francisco over this past summer. It was all about using Microsoft technology as an Angular developer. One of the things that I was going through and showing about how to build secure applications using Azure Active Directory and using Azure, the different sources that Azure provides and Office 365.

I was going to show Office add-ins and I was going to take the last two hours of the day of my workshop and show this. But right after lunch, I was getting ready to show one demo. At some point, I was trying to find the demo; I lost my place on my machine. When I finally found where the demo was, there were three other folders right next to it. One was ng-outlook, one was ng-word and ng-excel. I had about 15-20 people in the room and one guy’s like, “Wait. Hold on. What’s ngoutlook?” So I go and I show them this thing.

We end up scrapping the workshop because everybody that – even the two guys that came back from lunch that was starting to fall asleep because – people do in a workshop after coming back from lunch. Everybody wanted to see how to do this stuff. We spent the rest of the day, the rest of the four or five hours that day just building outlook add-ins, just building Word add-ins. It’s amazingly easy how fast you can do it. It’s amazingly easy how fast you can do it.

You don’t need visual studio, you don’t need anything installed in your machine to get this up and running; like I said – I’ll give you guys a few links that you can throw in the show notes that really walk you through how easy this is to go through and build one of these, even using the Yeoman generator that they provide to build this. It’s just super simple.

They’ve done some other stuff recently, too, and now they’ve got this thing called Office UI fabric. I don’t know if you guys have heard of this or if you’re interested in hearing about this.

No, let’s hear about it. It sounds – I’m interested in fabrics. [Laughter]

It’s not nearly as cool as the fabrics I see you in, Ward. I’m sure that your listeners – at least I’ve – [inaudible] ago, I know you talked a lot about Angular Material. What Microsoft has done is it come up with something called Office UI Fabric. Now, I’m going to draw a loose analogy to it, but let me have one big different [inaudible] between the two.

Angular Material is an implementation of Google’s material design, which is a design language. Microsoft has their own design language; it’s called the Modern Design language. It used to be called Metro. It’s this whole boxy look that we have with Windows.

The Office team took the design language and they implemented it for Office so that’s why Outlook, 365 and Excel – all these stuff looks fairly similar. What Microsoft did or the Office team did is they then went through and built this thing, this CSS package called the Office UI Fabric which is a collection of just a bunch of CSS component – base components that you can use in your application. It’s the same web components with the same feel and reaction and behavior that we have inside of Outlook and Excel. So a button works the same way; a list works the same way, a dropdown, there’s a selector, a text box; all the fonts, all the colors. It’s the similar kind of thing that we get with Material so that now if you build an app using Angular Material, it looks a lot like Native apps that you have on an Android device.

Same thing here; if you build an application using the Office UI fabric which makes a lot of sense, if you're going to be hosting it inside of Outlook or Excel or an Office 365, now your application looks like the hosting application, and now your users – you’ve got the best of both world because now you’ve got an application that is a developer – now what’s the one thing that we always struggle with? How do I find out one icon I need on this button? You're always going on trying to find something and stealing some icon from somewhere.

What’s nice about this is as a developer, I now don’t care about going through the training stuff that I have to go through because my users are using the same components that they're used to using from a hosting application. So I can do this by just taking advantage of the Office UI Fabric which is a suite of just a bunch of CSS classes to build our application.

Then there’s a project that I’m working on with a bunch of people right now to make Angular directives out of this Office UI Fabric. We call it the ng-OfficeUIFabric. It’s the open source project that we’re doing and we’re modeling it after a lot of the material design stuff.

Right, so my app looks like it belongs instead of sticking out like a sore thumb.

Exactly. Yeah, you want to look the same way. As a developer – personally, I hate training users so this is a great advantage to being able to ‘hey, let me build an app for you. I’ll put it out there’. Some shows up inside a word and everybody’s like, “Oh, I understand how this works because I’m used to the same controls that we have inside word or the synchro tools we have inside of Excel.” It makes life a lot easier.

That’s the collection of fonts and typography and icons and animations and all the different components that I was talking about before; make your buttons look like the rest of the stuff that’s inside of Outlook or SharePoint or whatever you're hosting it with.

So I can’t put them in a big, orange button that says, “Press me for a chance to win a million dollars?”

Oh, you totally can do that! [Chuckles] You could totally do that.

Did you just make a big button joke? [Laughter]

I like big buttons and I cannot lie.

It just needs to be a little more orange.

That’s right. [Chuckles]

So Andrew, as you know, Angular 1 is so last year, it’s so passé. [Laughter] Everybody wants to know what’s the plan? [Crosstalk]

Yeah, let’s get out of the nineties.

Yeah. [Chuckles] It’s so yesterday. It’s so last week. What are you doing about Angular 2?

The good thing is that there is nothing that I’ve talked about with this that is going to bar you from using Angular 2. It’s just – there’s nothing that’s [inaudible] requires Angular 1. Me – I guess if you're asking me personally, how am I as an [crosstalk] Angular 1 developer?

Well you’ve [inaudible] developer space, you know?

I guess I’m – we’re a lot of other developers are that are out there which is I’ve been watching what’s going on, I got scared as hell when I saw the tomb stones. [Chuckles] Warmed up to it a lot when we saw some of the keynotes from Angular U and Angular Connect. Just been paying attention to what’s been going on frankly; listening a lot to stuff you guys have been talking about in the show here. I’m long time listener.

Now that it’s in beta, now I’m starting to play with it a little bit more. Now is some – a lot of the work that you guys have all done, some great docs up on the Angular site, I’m starting to play with it a little bit more. I like what I see; I feel like I’m writing less code. I feel like – I felt like I was running native applications when I was doing Angular 1. I feel like I’m doing much more native-style development.

So Andrew, I’m going to interrupt you and put you on the spot.

Uh-oh.

Tell me one thing – when you looked at Angular 2 so far and you’ve been playing with it, tell me one thing that kind of stood out and you were just like, “What is that?”

The decorators or the annotations.

Oh, like the @ component?

Yeah. All of that stuff that – all the metadata to describe what my code wasn’t [inaudible] it over. That’s the part that I thought was – it seemed very – it was very foreign to the JavaScript side of me.

Once I draw the analogy – as a Microsoft guy, once I draw the analogy to having the same kind of idea as attribute that I have on classes or name spaces or on methods, things made a little more sense. I was like, “Okay, I can actually have – I’m just describing this so that it can be used somewhere else and it’s a little more convention-style development than it was having to explicitly code stuff up all the time. It made things a little bit easier.

A lot of the other stuff, too, that scared everybody else like how you do the binding syntax, that stuff – that was all a bit jarring, but to me it was a lot of the annotations and how to [inaudible] @ components.

I’m jumping all over on you but I think this is really interesting. First impressions are cool. So yeah, the decorators you said but you also just mentioned the binding syntax. Ward and I have privately offline talked that when we first saw the binding syntax, we were taken aback, too – the square brackets, the curly brackets, the round brackets. What do we call [inaudible], Ward? A banana in a box? [Chuckles]

If that’s what you say.

Now you're blaming me? Okay. [Laughter]

Oh, you might get me going there.

But we’ll get Ward to sing about it. But when you look at that – I remember Ward and I were saying, we were taken aback and it was probably just like a day or two. Literally, it was like, “Oh, that’s weird syntax,” but we got over literally in a day or two. How was it for you? Are you still on that? How do you feel?

I can’t give you a definitive answer because to me, there are – I’m trying to think about how best to say this. I could say it in a couple of different ways actually. The way I describe it to people is that – and I know that some of your listeners, it’s going to be hard for them. They may not be as familiar with this but this feels very much like the jump from ASP.net web forms to ASP.net on MVC. It’s a radical change but it’s a change that we need to make and it’s a change for the good.

The challenge that I have, as somebody who’s pretty well-versed with Angular 1 and I was pretty well-versed with TypeScript. I write all of my stuff in TypeScript; I did it with Angular 1. The part that was like 2x4 across the face for me is that there were so many new things that I had to wrap my arms around that I didn’t know what one thing was coming, what new thing I was looking at where it was coming from. I didn’t know this new syntax of, instead of using requires, they are using import* as ng from a single core Angular. I didn’t know if that was a TypeScript thing; I didn’t know if it was a JavaScript thing, if that was an ES 5, ES 6 thing. Those are the things that I’ve been – kind of the most frustrating or the most challenging is because you see so much stuff and I feel like I was picked up and dropped in Mars and I’m looking around like, “Okay, what am I looking at here? Is this a new Angular construct or is it a construct from something else that Angular is taking advantage of on the web.

In most cases, did you find out that – because I’ve had that same experience. Ward and I have actually talked about that a lot and we actually had a podcast all about that – discussion. Do you find that most of these things are not Angular and then Ward just know ES 6, TypeScript, SystemJS, Webpack and things like that? Or do you find that there’s a lot of that Angular that’s disrupting you, too?

No. I actually found – the further I got into it, the less it was Angular and the more it was everything else. One of the things I really like about Angular, too, is that I think that the overall surface area or the surface of attack is much smaller than what it was in Angular 1. The learning curve for learning [inaudible] Angular is easier.

I saw Lukas just said something that – in the chat about it’s easier to learn. I agree. It’s everything around it. I know – I heard you guys talk about on a show in the last month or two, you were talking about SystemJS I think with Scott Allen and with Webpack. Then you spent all this time like, “How do I get my arms around Webpack and how do I get my arms around this and figure it out?”

We were going through that whole thing, trying to figure out how to structure this Angular Office UI Fabric, this ng UI Fabric library. We decided that it’s all going to be TypeScript. We decided that it’s all going to be using Webpack, but man, wrapping your head around that and the build process and the tool chain and everything, it was just – if you don’t have time and the desire to be more – peel back the onion and try and get deeper and see how this stuff works and figure out what works best for you, to me, you really feel like you're up a creek with a paddle and you need just these – here’s a cookbook. Go do it like this and – you need something that says, “Do it like this.

Yes, there’s 50 options where you’re going to go these different directions, but just go do this and then you can go figure out these different things later. You have other options for doing testing. You have other options for doing loading and all that kind – for module loading and stuff like that. But an opinionated version to start out with? I think that’s the thing that we missed for so long with Angular 2 that really is needed.

Yeah, and that’s one of the reasons in a lot of stuff I’ve been doing, while there’s so many variations or ways you can get going in these things, I think it’s less important to check which one’s the best one right now than it is to just pick a way that works just so you can get past that. Pick Webpack, pick Browserify, pick ES 6, pick TypeScript, pick Babel – who cares? Pick one of them. Get them moving so that you can start building Angular 2 apps and understand Angular 2.

I firmly believe the tooling and the build process and the module loading and all that stuff is going to work itself out over the next couple of months anyway.

I agree. [Inaudible] As developers – when developers get around, we kind of [inaudible] and beat our heads against the table, trying to figure out what’s the best option. But when it comes down to it, at least on my experience, four of the five customers that I deal with, they don’t give a damn when I’m using the build-up; they just care that what they're getting the darn shipping something that they can maintain going forward. As long as it’s documented, they're like, “I don’t care what you do. Just build it.” That to me, I was paralyzed by all the different choices at first when I first tried to get into it.

I know it’s been a long time coming but I think sometime late last summer or early last fall, I decided to try and, “Alright, let me just spend a few days. Let me try and buy it off.” And I just – I walked away like there’s just no way. I’m not doing this shit. I’m going to wait. There’s too much churn and it was a little too challenging. I find it to be a lot easier now.

Again, not to sit there and do this too much but I think the work that you guys did on the Angular.io site is tremendously helpful. The book, the Getting Started app and everything, I think it’s making a lot ease to get into it.

Here, here.

Alright then. Before we get to picks, if people want to know more about this stuff, what’s the best place to go?

The best place to go is – for the Office UI – for the Office add-ins, if you go to dev.office.com, that’s the portal for all the Office-related developer stuff. So there’s a Getting Started link up there; there is also a training link up there where there’s a ridiculous amount of hands-on labs and slides and slides and everything that you can go dive into. Those are a couple of links you can look at. I would also go take a look at the Office UI Fabric. So if you go to dev.office.com/fabric, you can see all the different components and examples and stuff of how those work.

If you're interested in checking out the Angular library that we’re working on, we only got three or four components in there right now, but go to ngofficeuifabric.com. That’ll, just right now, is kind of a placeholder site that’ll take you to our library. I’m going to have a blog post coming out in the next few days talking a lot more about this and explaining a lot more about it. You can go check out stuff in there. That should be live by the time that this – you publish this episode.

Are you appearing at some conference or something? Doing some workshops anywhere in case somebody wants to join you?

I guess in the near future, no thankfully. I’m actually taking a break from conferences. I had way too many last year. But I think that I will probably be – I’m guessing, I’m probably going to be at the Build Conference – Microsoft’s Build Conference. That’s really the only one that I’ve got on my radar. But you can find out where I’m going to be when I’m doing this stuff. Check out my blog, just andrewconnell.com or watch [crosstalk] on Twitter.

I think you should do an ng-conf Angular 2 Hackathon with all those apps.

I’m trying to convince Microsoft to do that. [Chuckles].

I would love to see them do that.

Alright. Well let’s go ahead and get to some picks. John, do you want to start us off with picks?

Sure. I’m going to take a break from technical [inaudible] today and just do a show that I just started watching. It’s called The Shannara Chronicles and it’s from one of my favorite authors, Terry Brooks from Seattle area. He model himself after a Tolkien style. Been around since the midseventies. Gosh, I think I’ve read all his books, about twenty plus of them and they’ve actually adapted one of his best books to a TV show.

Really?

And it got it airing on MTV and I watched the opening one last night and it was really, really well. I mean, MTV airing a show. Kind of odd. [Chuckles] It was really well-done. I was actually really impressed and I had very low expectations based upon MTV doing that show in one of my favorite books. Definitely check it out. It’s called The Shannara Chronicles.

I really enjoyed those books, too. I’ll have to check that out. Lukas, you have some picks for us?

Sure. I do. I have two picks this week. The first one is the Getting Started with Redux series on egghead.io. I watched it a week ago over the weekend and it’s pretty phenomenal. Redux actually plays really well with Angular 2 so it’s just a really nice way to ramp up on Redux. Dan Abramov did a phenomenal job.

My second pick is the View-Master Virtual Reality Starter Pack. It’s similar to Google Cardboard but you basically just put your phone in there. They have a VR app in there and my kid loves it. So we got the Space Station 1. It’s nice. I just gave it to my four year-old and he doesn’t talk for 16 minutes so I’ll probably buy a hundred of them.

You have a four year-old who doesn’t talk for 16 minutes? Deal. I want it.

Yup. So I’m going to buy stock first.

I don’t even care what that is. [Laughter]

Exactly. Do you know how much that’s worth?

A brazillion dollars. [Laughter]

What? [Chuckles]

I got to look up a brazillion dollars. That’s awesome. [Chuckles]

And there go all of our brazillion listeners.

Hey, that was a homage to all my friends down in South America. So that was a tribute baby.

Alright.

I thought that was a wax or something. [Laughter]

Or a blowout.

Alright Ward, what are your picks?

I think my pick is do anything but watch Star Wars. That’s number one. Got to get that in. really, just about anything you could do. Root canal – don’t put it off, just go do it. I actually think that seeing The Big Short would be a great alternative. That’s a really terrific movie.

I also would have to echo what Lukas has been saying about Dan Abramov’s work on Redux. It’s very clear. Whether you want to do it or not, you want to know what people are talking about.

That’s really good stuff. Oh yeah, you're right. The book The Big Short is also wonderful.

Yeah. I’ll put some links in, too. We had Dan Abramov on JavaScript Jabber twice, talking about React and Redux and stuff.

Joe, what are your picks?

I think I’ll go with Ward’s theme and pick Star Wars. I absolutely believe that Star Wars is the best series of films ever to have been made.

No! [Chuckles]

We could not end on a note of [inaudible] with Star Wars so thank you.

Oh God! [Chuckles]

So for Ward and the other two people on the road that don’t like Star Wars, it’s good for you. [Chuckles]

You know, we should have an episode where we all are acting like a Star Wars character.

Oh yes. [Chuckles]

Yes. And we can make Ward Chewie.

Ah, I like it. Ward’s a very Chewie-ish kind of guy.

Especially when he groans like he just did.

Uh-huh. I don’t know. I see Ward as more of a Bossk myself. [Laughter]

This is getting so obscure so fast.

Ugh, Ward.

While we’re at it, I’d also like to pick the Sphero BB-8 droid. Sphero makes awesome robotics stuff from this BB-8. It’s so much fun and the noise that it makes is so fun. I’ve had it tons of good times playing with it with my kids. Really enjoyed it.

Is that as good as a Roomba?

It doesn’t vacuum.

I’d back you up, man. We’ve got one of those. Santa brought one here and it’s been phenomenal.

One of my favorite Christmas gifts was a Chewbacca – a stuffed Chewbacca from Build-A-Bear. [Crosstalk]

So nice.

I think I’m going to pick Build-A-Bear because they do a great Chewbacca. I’m trying to think of any – trying to fit in all the Star Wars picks I possibly can. [Chuckles] The Episode 7 soundtrack is awesome, [inaudible] program, too. I think I picked that last week.

One other thing that I do want to pick is Lambda Conference. It’s actually LambdaConf – lambdaconf.us. It’s – could be in Boulder, Colorado in a couple of months and it’s a conference all about functional programming which I think is very cool. That’d be my final pick. Wait, one more. Star Wars. [Laughter]

I swear; I think Joe was filibustering in favor of Star Wars. [Laughter]

I think the brain rot is so apparent here. The smell rising out of it is just awful.

And now I’ll read the Star Wars novels.

Mine and Ward’s friendship has taken a serious hit this last couple of weeks. [Laughter]

You can’t talk about anything, meaning Star Wars. [Chuckles]

Alright, I’ve got a couple of picks. First of all – and I’ve done this on all the shows. I know I drive some people crazy but it’s important to me.

Last year was kind of a crazy year, and during the process of setting my goals, I went through a whole bunch of stuff with my dad with his health. I’m not going to go through it all but he did have open heart surgery among other things. He has several health issues and all of them are things that I either have or I’m at risk for, so it’s kind of scary. I realize that I am basically 25 years behind him on the same track and I don’t really want to go through the kinds of things that he’s going through right now and put my wife and my kids through that.

So I decided that this year, I’m going to focus on my health. I basically have two large goals, two major goals that I’m going after this year and that’s one of them. I need to lose about 40 pounds. I actually probably need to lose about 60 pounds, my goal is 40.

The other goal that I have is to increase the subscriber count to my email list. So you're probably going to be hearing me give away stuff to get you on the list. I don’t know if I should call that out loud but I’ll make it worth it to you. Let me put it that way.

Anyway, I’m tracking my health and I’m tracking all my stuff. So I’m going to talk about the tools that I’m using to basically get my health under control. One of the things that I am dealing with – I have Type 2 diabetes. I’ve mentioned that on some of the shows but the shows aren’t about that so I

don’t talks about it a ton. Losing weight will really help with that. It’ll also help avoid some of the other things that, like I said, my dad’s dealing with.

So here’s my list of tools. The first one is MyFitnessPal. For losing weight, if you go read the prevailing literature from the people who are considered experts on this, you’ll find that diet is really the big thing that affects whether or not you lose weight. A lot of people go to the gym, and in a lot of ways that’s easier because you show up for a half hour or so and you’ve gotten in enough exercise depending on how you view things. However, diet is really the key and it’s not just cutting calories, but it’s also keeping track of what kinds of food you're eating and how good a quality they are. So MyFitnessPal helps you with all of that.

I’ve also been using Allrecipes.com. So myfitnesspla.com, allrecipes.com. If you want to be my friend on MyFitnessPal, you can actually do that. My username is woody2shoes. Then we can share status updates and stuff and it’ll tell you when I lose weight and it’ll tell me when you lose weight and all that stuff.

I also have been running at the gym so I recommend you get a gym pass at a local gym. When I run, I usually listen to podcasts, so I have my phone. But my phone also tracks my movement through my watch so I’m going to pick a couple of apps. One is the Nike+ Running app. It’s awesome. It tracks your running. I ran on the track at the gym and it tracks all that stuff really nicely.

The other one is Run 10k. It’s awesome. It walks along, runs along. The watch is also nice because if I turn the screen of, then it vibrates my wrist when they need to run or walk instead of the other stuff. And I’m driving away all of our hosts.

Really quick, the other thing that I use is Aftershokz Blues 2 headphones. They're Bluetooth over the ear. Well not over the ear but they're Bluetooth bone conduction headphones and they work really well, I really like them. Anyway, those are my picks. I am probably going to be blogging a little bit about what I’m doing here for weight loss. So if you're curious, you can go check out charlesmaxwood.com. That was a really long winded pick but I don’t do this very often.

Andrew, what are your picks?

I’ve got three picks. One, I stumbled across a link on a [inaudible] article about becoming a better NodeJS developer in 2016, but within that I found something else that was – that I found really interesting is something called a Twelve Factor App or The Twelve Factor Application. It’s twelvefactor.net and just goes through a bunch of things about a manifesto on describing how to write web applications or more specifically SaaS apps.

Another one I’m going to call out, just the link that I shared earlier, the ngOfficeUIFabric is the open source library that we’re working on to build an Angular 1 directives around the Office UI Fabric, and we will go build Agular 2 components as well once we’re finished with the version 1’s.

A book that I just finished that I could not put down was called the innovators. It’s by the same guy that wrote the biography for Steve Jobs. I think that the title of the book is actually pretty bad. It’s pretty bad because it implies that you're going to get stories about Bill Gates and stories about Steve Jobs, but really, it’s a history of computing. I found it to be really, really interesting going all the way back to building the first resistors and how to tell people to start [inaudible] with electricity and the first microcontrollers and stuff. Found it really interesting, and just one that – like you, Chuck, when I’m running, I listen to books or podcasts. Helps me just not think about my running and fall in under a routine and I’m deep in the throes of marathon training right now so I need stuff that’ll keep me on track for a good hour and a half up to two hours. I found it to be a great book.

We should compare notes because part of my fitness deal is I’m going to run in a 10K, first half of the year and a half marathon the second half of the year.

I highly commend what you’re doing, man. I went through the same thing with my dad having open heart surgery – emergency open heart surgery two days after my son was born ten years ago. I had no idea that anything was going on and it was a slap in the face to me. It’s changed my life ten years ago. I saw him work his rear end off for my entire life and it almost not get to enjoy and then this happened four or five months after retirement, and I was like, that’s not going to be me. I commend you for what you're doing, man.

Yeah. It was that and then driving him to dialysis because he has kidney failure as well. He has like four freaky things that are just – I get it. We had a baby three weeks before he came in. That’s our fifth child but still. It’s just – yeah. It’s so serious. The other thing is you get benefits in all the other areas in your life like work. I can’t preach it enough it’s just – it’s so important. If you code for 20 years and then you die of a heart attack then what’s the point?

It’s for the immediate self-benefit, too. I find that days that I run in the morning, my mind is more calm and I can work. I can get more done without feeling nearly as rushed for the rest of the day.

Yeah. There’s certain self-gratification with coding for sure but anyway. I think I’ve harped on this enough. We should probably wrap up. [Laughter] I did give a talk on this actually in December about being more productive. There’s a lot in there about health and sleep and stuff.

Anyway, thank you for coming, Andrew. I’m assuming you're on Twitter. Are there other places people should follow you?

Best places are just Twitter and my blog, so just @andrewconnell or andrewconnell.com, just the way my name’s spelled. I’m super easy to find.

Alright. We’ll wrap up the show and catch you all next week.