WEBVTT
00:00:00.570 --> 00:00:01.920
Let's go ahead and get started here.
00:00:01.920 --> 00:00:06.520
How many of you in
the room are developers?
00:00:06.520 --> 00:00:07.690
That's good!
00:00:07.690 --> 00:00:08.720
Now your exercise for
00:00:08.720 --> 00:00:12.620
the day is done, aside from walking
around this crazy big place.
00:00:12.620 --> 00:00:14.300
How many of you are not
developers in the room?
00:00:14.300 --> 00:00:15.830
A couple of you.
00:00:15.830 --> 00:00:18.060
You're just like going,
I just came to get some free stuff.
00:00:18.060 --> 00:00:20.300
I got no free stuff.
00:00:20.300 --> 00:00:23.100
So, oh I guess there's
some t-shirts, yes.
00:00:23.100 --> 00:00:25.020
I'll do that at the end.
00:00:25.020 --> 00:00:27.590
I don't wanna try to do questions
during the session, because I've got
00:00:27.590 --> 00:00:30.370
a lot of stuff I want to show you
guys, I got a bunch of slides,
00:00:30.370 --> 00:00:32.320
like fifty or sixty slides
I'm gonna try and show you.
00:00:32.320 --> 00:00:32.902
How does that sound?
00:00:32.902 --> 00:00:35.745
>> [LAUGH]
>> [LAUGH] Let's try to get through
00:00:35.745 --> 00:00:38.990
these slides, and
I don't have fifty or sixty slides.
00:00:38.990 --> 00:00:41.210
I don't have the ability to
build fifty or sixty slides,
00:00:41.210 --> 00:00:43.940
unless I'm downloading them from and
IT PRO session.
00:00:43.940 --> 00:00:44.648
So
00:00:44.648 --> 00:00:46.892
>> [LAUGH]
>> No, so
00:00:46.892 --> 00:00:47.055
>> [LAUGH]
00:00:47.055 --> 00:00:47.568
>> [APPLAUSE]
00:00:47.568 --> 00:00:49.700
>> Oh, I'm gonna get into
00:00:49.700 --> 00:00:53.080
trouble for that one.
00:00:53.080 --> 00:00:55.602
So, thank god these aren't recorded.
00:00:55.602 --> 00:00:59.520
>> [LAUGH]
>> [LAUGH] All right, so
00:00:59.520 --> 00:01:01.980
I've got a handful of slides I
want to get through first and
00:01:01.980 --> 00:01:03.310
then we're going to
dive into the demos.
00:01:03.310 --> 00:01:06.130
I've got three demos for you,
got all the code available, and
00:01:06.130 --> 00:01:09.200
a link at the end of the session
where you can go grab all the code.
00:01:09.200 --> 00:01:10.550
So don't worry about
writing down the code.
00:01:10.550 --> 00:01:13.160
Don't worry about writing down the
different technologies and stuff.
00:01:13.160 --> 00:01:16.390
Everything is gonna be there for
you to go get later.
00:01:16.390 --> 00:01:17.560
The first part of the session,
00:01:17.560 --> 00:01:20.425
what I'm gonna do is I want to set
the stage around this thing called
00:01:20.425 --> 00:01:21.170
Node.js.
00:01:21.170 --> 00:01:22.440
I'm also gonna cover io.js.
00:01:22.440 --> 00:01:27.070
I would have liked to put that in
the title of the session but yeah,
00:01:27.070 --> 00:01:29.180
then it was really
becoming buzzword bingo.
00:01:29.180 --> 00:01:32.540
So, I'm gonna talk a little
bit about that first, and
00:01:32.540 --> 00:01:35.080
then we're going to talk
very briefly about Angular.
00:01:35.080 --> 00:01:36.880
And then we're gonna
start diving into demos.
00:01:36.880 --> 00:01:40.030
I'm gonna do a couple of
different demos in Office app.
00:01:40.030 --> 00:01:45.115
Sorry, an Outlook add in for
Office, that uses Angular,
00:01:45.115 --> 00:01:48.700
Node.js, and
actually a design pattern or
00:01:48.700 --> 00:01:51.990
design language from Google
called material design.
00:01:51.990 --> 00:01:53.440
The second one is going to show,
00:01:53.440 --> 00:01:58.045
the second demo is going to be
about building a web application in
00:01:58.045 --> 00:02:02.290
Node.js that uses as your AD and
your Office 365 APIs.
00:02:02.290 --> 00:02:05.320
How many of you were in my
theater talk earlier today?
00:02:06.560 --> 00:02:08.250
Oh my gosh only two or
three of you guys.
00:02:08.250 --> 00:02:09.880
Raise your hands real quick again.
00:02:09.880 --> 00:02:12.290
So those of you that
have their hands raised,
00:02:12.290 --> 00:02:14.610
they get a free raspberry pie for
coming to my theater talk.
00:02:14.610 --> 00:02:15.722
So all of you guys, ha.
00:02:15.722 --> 00:02:19.640
>> [LAUGH]
>> [LAUGH] I'm just kidding.
00:02:19.640 --> 00:02:25.670
And then the last demo is a 100%
client side Angular application that
00:02:25.670 --> 00:02:30.900
uses the support that we got earlier
this year for the OAuth 2 implicit
00:02:30.900 --> 00:02:35.300
flow in Azure Active Directory and
it's running 100% client side,
00:02:35.300 --> 00:02:38.250
no server side stuff going on,
really good authentication,
00:02:38.250 --> 00:02:43.650
talks to the SharePoint rest API and
the Office 365 files API inpoint.
00:02:43.650 --> 00:02:45.420
All of my demos, I use typescript.
00:02:45.420 --> 00:02:48.620
I write all of my JavaScript, both
the client side and the server side.
00:02:48.620 --> 00:02:51.260
So make sure a little bit of the
type script stuff in there as well.
00:02:51.260 --> 00:02:54.120
But the idea here for this session
is really to sit there and
00:02:54.120 --> 00:02:59.420
to put across a point that I think
is more kind of implied with
00:02:59.420 --> 00:03:03.030
what the office 365 and the office
dev team is really doing these days.
00:03:05.030 --> 00:03:08.460
This new model, I'm a SharePoint
guy from a very very long time ago.
00:03:08.460 --> 00:03:12.430
From well I guess I've been going
since a long time ago up to now.
00:03:12.430 --> 00:03:16.800
But back in September of 2003,
I was pushed into SharePoint by
00:03:16.800 --> 00:03:20.930
the company I worked for and
doing SharePoint Portal Server 2003.
00:03:20.930 --> 00:03:22.060
Fast forward a bunch of years,
00:03:22.060 --> 00:03:24.940
they come out with this new app
model with SharePoint 2013.
00:03:24.940 --> 00:03:29.690
I love this new model because
I no longer am working inside
00:03:29.690 --> 00:03:31.540
of someone else's product.
00:03:31.540 --> 00:03:35.410
I get to build and work with any
technology I want outside of
00:03:35.410 --> 00:03:37.820
whatever that Microsoft is doing.
00:03:37.820 --> 00:03:39.840
And it's not that I dislike
what they're doing,
00:03:39.840 --> 00:03:41.890
it's that I like the choice.
00:03:41.890 --> 00:03:43.850
I like to be able to use
any tech that I want.
00:03:43.850 --> 00:03:47.028
And so is it dot net,
is it running on Azure? Maybe.
00:03:47.028 --> 00:03:49.400
Is it node.js running on a raspberry
00:03:49.400 --> 00:03:53.280
pie or running inside of
an Azure website or on OSX?
00:03:53.280 --> 00:03:58.050
Or is it using Angular,
a single page
00:03:58.050 --> 00:04:03.480
app design pattern or single
page app presentation framework?
00:04:03.480 --> 00:04:06.030
It doesn't matter what you're using.
00:04:06.030 --> 00:04:09.220
Think about what Office
365 is doing these days.
00:04:09.220 --> 00:04:12.050
This is really
a development platform.
00:04:12.050 --> 00:04:15.130
We've got something called IaaS in
Azure, Infrastructure as a Service,
00:04:15.130 --> 00:04:16.600
hosting your own virtual machines.
00:04:16.600 --> 00:04:17.960
We've got Platform as a Service,
00:04:17.960 --> 00:04:20.530
that's the little building blocks
that we can use to build our own web
00:04:20.530 --> 00:04:23.280
applications and
different applications
00:04:23.280 --> 00:04:25.459
leveraging some of these different
services that Azure provides.
00:04:26.470 --> 00:04:30.520
I like to think of office 365
now as a developer as EPAS,
00:04:30.520 --> 00:04:32.320
enterprise platform as a service.
00:04:32.320 --> 00:04:34.740
Because I've got all these cool
building blocks that I can use to
00:04:34.740 --> 00:04:37.270
integrate into my custom
business applications,
00:04:37.270 --> 00:04:39.390
without me having to
write all that logic.
00:04:39.390 --> 00:04:41.540
I don't write workflow logic.
00:04:41.540 --> 00:04:44.650
I don't write metadata, and tagging,
and terminology, and taxonomy and
00:04:44.650 --> 00:04:45.530
stuff like that.
00:04:45.530 --> 00:04:48.350
User profiles, I don't have
to play with that stuff.
00:04:48.350 --> 00:04:50.870
A lot of that value is gonna
be given to me straight from
00:04:50.870 --> 00:04:51.470
Office 365.
00:04:51.470 --> 00:04:53.720
So think about it in that way.
00:04:53.720 --> 00:04:56.080
Think about this from
a developer point of view,
00:04:56.080 --> 00:04:59.480
about thinking about building apps
that live outside of Office 365 or
00:04:59.480 --> 00:05:02.370
that are living inside
of the Office clients.
00:05:02.370 --> 00:05:03.160
All right?
00:05:03.160 --> 00:05:06.400
All right,
I'm gonna climb off my soapbox now.
00:05:06.400 --> 00:05:09.735
So we're going to do Node.js,
io.js developer tools for
00:05:09.735 --> 00:05:12.660
Node.js creating websites,
web APIs in Node.js.
00:05:12.660 --> 00:05:16.660
And then with the developments of
processes like using node, and
00:05:16.660 --> 00:05:19.060
then using Node for Office and
SharePoint Add-ins.
00:05:19.060 --> 00:05:21.200
And then finally, we'll talk
a little bit about Angular.
00:05:21.200 --> 00:05:21.880
So, what is Node?
00:05:21.880 --> 00:05:25.080
And I'm going to go through some
of this stuff fairly quick here.
00:05:25.080 --> 00:05:26.520
How many of you
are familiar with Node?
00:05:27.810 --> 00:05:30.610
Alright, how many of you are like,
I've heard of it but I don't know
00:05:30.610 --> 00:05:32.425
what the heck this thing is and
I'm curious to learn more.
00:05:32.425 --> 00:05:35.620
Okay, I'm just going to
try to set the stage here,
00:05:35.620 --> 00:05:38.560
there's a lot of stuff that
you can go and take a look at,
00:05:38.560 --> 00:05:39.860
lot of good examples out there,
00:05:39.860 --> 00:05:42.440
and obviously I've got examples
here you can take advantage of.
00:05:42.440 --> 00:05:45.680
So let's just give a quick
little fire hose here.
00:05:45.680 --> 00:05:49.670
What Node.js is, is simply a
run-time environment that allows you
00:05:49.670 --> 00:05:53.290
to write JavaScript and run it
server side, period, end of story.
00:05:53.290 --> 00:05:54.250
That's all Node really is.
00:05:54.250 --> 00:05:58.440
It's been around since 2009,
it's got a really big following.
00:05:58.440 --> 00:06:00.900
What it does,
is one of the cool things about it,
00:06:00.900 --> 00:06:04.620
is that because it's JavaScript,
it runs cross platform.
00:06:04.620 --> 00:06:07.850
All of these apps I'm going to show
you today, they can run on OSX,
00:06:07.850 --> 00:06:09.780
they can run on Windows,
they can run on,
00:06:09.780 --> 00:06:12.040
heck, I showed earlier they
can run on a raspberry pie.
00:06:12.040 --> 00:06:13.660
It doesn't matter.
00:06:13.660 --> 00:06:16.850
Without any code changes,
it just works.
00:06:16.850 --> 00:06:19.020
The only code changes I've ever
really had to tweak between
00:06:19.020 --> 00:06:23.170
the different environments is
usually related to an IP address. Right?
00:06:23.170 --> 00:06:23.970
Because you're jumping between
00:06:23.970 --> 00:06:28.750
different machines, or it's file
paths, because Unix, Linus, Windows,
00:06:28.750 --> 00:06:31.140
they all do it a little differently.
00:06:31.140 --> 00:06:32.600
When would you use Node.js?
00:06:32.600 --> 00:06:34.390
I'm not saying you use it for
everything.
00:06:34.390 --> 00:06:36.480
That's not the best
approach to take.
00:06:36.480 --> 00:06:39.120
It's really good for
web based stuff.
00:06:39.120 --> 00:06:40.820
Think like restful services.
00:06:40.820 --> 00:06:44.540
Think like a lot of IO based stuff,
a lot of network based stuff.
00:06:44.540 --> 00:06:45.310
It's really good for
00:06:45.310 --> 00:06:49.340
that stuff because it's optimized,
it's built for that environment.
00:06:49.340 --> 00:06:52.260
If you've got complex calculations
and complex business rules, and
00:06:52.260 --> 00:06:55.710
you've got to do all this massaging
of data and processing of say a loan
00:06:55.710 --> 00:06:59.520
application, maybe it makes more
sense to use some other technology.
00:06:59.520 --> 00:07:04.289
To build some sort of a service that
your front end Node site or Node
00:07:04.289 --> 00:07:09.450
rest service, Is going to be able
to talk to, to get that data out.
00:07:09.450 --> 00:07:12.330
Running that in say in dot net and
00:07:12.330 --> 00:07:15.190
hosting that in O data
service somewhere.
00:07:15.190 --> 00:07:16.140
Okay?
00:07:16.140 --> 00:07:20.320
One of the aspects about Node
is that it's single threaded.
00:07:20.320 --> 00:07:22.260
It's constantly
running in this loop.
00:07:22.260 --> 00:07:25.710
And so when you want to do something
you find that you run out to go do,
00:07:25.710 --> 00:07:28.420
you send a network request,
and you pass a call back and
00:07:28.420 --> 00:07:30.260
when that thing's done,
it comes back and
00:07:30.260 --> 00:07:31.650
it runs the code that
you told it to run.
00:07:31.650 --> 00:07:33.530
But it doesn't block anything.
00:07:33.530 --> 00:07:34.910
What I found as a web developer,
00:07:34.910 --> 00:07:37.120
when I started working
with node a lot more,
00:07:37.120 --> 00:07:41.850
I found that I was actually building
more performance web applications.
00:07:41.850 --> 00:07:43.560
Even the ones that was
building in ASP.net,
00:07:43.560 --> 00:07:45.450
because it forces you to
think in a different way.
00:07:45.450 --> 00:07:48.650
And it realizes how important
this async and await
00:07:48.650 --> 00:07:52.930
keywords that we have and C sharp
now, how important they really are.
00:07:52.930 --> 00:07:56.640
This environment is what really
taught me that was such a big thing.
00:07:56.640 --> 00:07:57.980
Node is also open source.
00:07:57.980 --> 00:08:01.280
You can download the entire source,
take a look at it, contribute to it.
00:08:01.280 --> 00:08:03.480
It's managed by
a company called Joynet,
00:08:03.480 --> 00:08:06.730
which has now been
kind of handed that off
00:08:06.730 --> 00:08:09.580
to a new organization called
the Node.js foundation.
00:08:09.580 --> 00:08:11.117
You can see a link
to it right there.
00:08:11.117 --> 00:08:12.446
Well, why is there a foundation?
00:08:12.446 --> 00:08:13.908
We can go back to that in a second.
00:08:13.908 --> 00:08:16.570
Who uses Node.js?
00:08:16.570 --> 00:08:18.090
A lot of big companies.
00:08:18.090 --> 00:08:18.910
Azure uses it.
00:08:18.910 --> 00:08:22.360
We can go through and take advantage
of Node as an Azure website.
00:08:22.360 --> 00:08:26.830
The cross-platform Command line
interface to interfacing with Azure.
00:08:26.830 --> 00:08:29.590
If anyone used Powershell to go
through and manage your Azure
00:08:29.590 --> 00:08:34.790
assets, there's a cross platform
equivalent to that for Azure.
00:08:35.800 --> 00:08:36.870
It's all written in node.
00:08:36.870 --> 00:08:41.660
We can take advantage of that on
MacOS or in OSX or on Linux or
00:08:41.660 --> 00:08:42.620
on Windows.
00:08:42.620 --> 00:08:45.910
If you know there's a guy at
Microsoft named Scott Hanselman.
00:08:45.910 --> 00:08:49.100
He does most of his demos when
he's managing his Azure stuff
00:08:49.100 --> 00:08:52.190
using the command line interface,
the Node version
00:08:52.190 --> 00:08:55.370
of the Azure management tools,
not the power shell one.
00:08:55.370 --> 00:08:56.920
It's not a slam on
either one of them,
00:08:56.920 --> 00:08:59.420
it just shows it's a popular thing.
00:08:59.420 --> 00:09:02.410
Yammer uses it, Walmart uses it,
PayPal uses it,
00:09:02.410 --> 00:09:03.950
LinkedIn uses it, Trello uses it.
00:09:03.950 --> 00:09:05.070
These are just links
00:09:05.070 --> 00:09:06.770
to a couple different
companies that are out there.
00:09:06.770 --> 00:09:09.480
So if you're getting a little
kinda unfamiliar or you feel
00:09:09.480 --> 00:09:13.220
a little uneasy about using it,
the big guys use and they love it.
00:09:13.220 --> 00:09:14.290
All right?
They absolutely love it.
00:09:15.880 --> 00:09:17.800
So what makes up Node?
00:09:17.800 --> 00:09:21.120
Node, to me, is kinda broken
down into three big buckets.
00:09:21.120 --> 00:09:22.720
You've got the Node runtime.
00:09:22.720 --> 00:09:23.510
The node runtime.
00:09:23.510 --> 00:09:27.370
Now, what that thing is, is that
his job is to write an API to
00:09:27.370 --> 00:09:31.330
the hosting environment to
the actual JavaScript runtime.
00:09:31.330 --> 00:09:34.520
The JavaScript runtime
is provided by V8.
00:09:34.520 --> 00:09:39.194
V8 is the Google JavaScript runtime
that runs inside the Chrome or
00:09:39.194 --> 00:09:40.620
Chromium browser.
00:09:42.020 --> 00:09:46.860
So node is basically a host for V8,
and then it provide APIs for us
00:09:46.860 --> 00:09:51.290
to write programs against it, and to
get V8 to actually run that stuff.
00:09:51.290 --> 00:09:54.070
NPM is a packaging system.
00:09:54.070 --> 00:09:56.730
So those of us that have been doing
dot net, you know what a nuget is.
00:09:56.730 --> 00:09:59.190
NPM, that's nuget for node.
00:09:59.190 --> 00:10:00.609
Just think about it like that.
00:10:00.609 --> 00:10:01.429
Okay.
00:10:01.429 --> 00:10:04.959
It works similarly but there's
a lot of differences between it.
00:10:04.959 --> 00:10:07.380
But for the most part,
it's the same thing.
00:10:07.380 --> 00:10:10.880
You look for a package, or
you look for a NuGet package.
00:10:10.880 --> 00:10:13.020
You go to the NuGet website
to go download that,
00:10:13.020 --> 00:10:14.820
or you have
Integration Individual Studio or
00:10:14.820 --> 00:10:17.280
use the command line
tools to pull it in.
00:10:17.280 --> 00:10:18.070
Same thing with NPM.
00:10:19.780 --> 00:10:22.570
Now, you might've heard of
this thing called io.js.
00:10:22.570 --> 00:10:23.450
So what is this?
00:10:23.450 --> 00:10:25.445
Well let's look at Node.js for
just a second.
00:10:25.445 --> 00:10:27.730
Node.js has been around since 2009.
00:10:27.730 --> 00:10:29.140
It got really really popular.
00:10:29.140 --> 00:10:31.250
A lot of people started using it.
00:10:31.250 --> 00:10:33.580
And I had to change
this slide last night.
00:10:33.580 --> 00:10:36.170
There was a bunch of announcements
that came out so it's a good thing I
00:10:36.170 --> 00:10:39.160
didn't go out to all the different
parties that were going on
00:10:39.160 --> 00:10:40.095
with this conference.
00:10:40.095 --> 00:10:44.430
Node.js is run by is managed
by the Node.js foundation.
00:10:44.430 --> 00:10:47.760
Now that was created,
this is a bit of an opinion, but
00:10:47.760 --> 00:10:51.318
that was created in response
to what happened with iojs.
00:10:51.318 --> 00:10:55.386
Currently we're at
version 0.12.2 and
00:10:55.386 --> 00:10:59.769
it uses the V8 engine
versions 3.28.73.
00:10:59.769 --> 00:11:01.273
Now why is that important?
00:11:01.273 --> 00:11:03.690
Well let's just take a step back.
00:11:03.690 --> 00:11:07.121
And last year in 2014 a lot
of the core contributors for
00:11:07.121 --> 00:11:10.202
Node.js started to get
frustrated because they saw
00:11:10.202 --> 00:11:14.194
the contributions declining to
Node.js on GitHub and they saw that
00:11:14.194 --> 00:11:18.114
the people that were managing it
were trying to put a little too much
00:11:18.114 --> 00:11:22.410
corporate control around it and it
even trademarked the name Node.js.
00:11:22.410 --> 00:11:25.584
So a lot of those guys that were in
the core contributors for node.js
00:11:25.584 --> 00:11:29.690
kind of pulled one of those 'I'm
going to take my ball and go home.
00:11:29.690 --> 00:11:32.126
They left and they created
this thing called io.js.
00:11:32.126 --> 00:11:36.400
Io.js is a fork of node.js that
was kicked off late last year.
00:11:36.400 --> 00:11:41.140
It was created out of a community
frustrations with the decline in
00:11:41.140 --> 00:11:43.620
pace of contributions and releases.
00:11:43.620 --> 00:11:46.720
I've got a link there to one of the,
a un-opinionated article that kind
00:11:46.720 --> 00:11:50.070
of explains what the frustrations
were, and quotes from both sides.
00:11:50.070 --> 00:11:55.720
The current version,
as of last night is now IOS v2, and
00:11:55.720 --> 00:11:58.380
it uses the V8 engine, 4.2.
00:11:58.380 --> 00:11:59.930
Why is that important?
00:11:59.930 --> 00:12:05.490
Because the V8 engine that Node.js
uses is an older version that
00:12:05.490 --> 00:12:09.260
does not support ECMAScript 6 the
latest version of JavaScript that's
00:12:09.260 --> 00:12:12.030
being ratified and coming down
the pipe where we can do things,
00:12:12.030 --> 00:12:16.010
have promises in our code, and have
things like classes and modules.
00:12:16.010 --> 00:12:19.080
We don't have those things in
standard ECMAScripts 5 which is
00:12:19.080 --> 00:12:22.200
what we generally call
JavaScript today.
00:12:22.200 --> 00:12:23.020
So that's a big deal.
00:12:23.020 --> 00:12:26.350
Plus, there's a lot of performance
improvements and fixes and
00:12:26.350 --> 00:12:28.140
a lot of bug fixes in
the later version.
00:12:28.140 --> 00:12:29.970
And so
that was one of the frustrations.
00:12:29.970 --> 00:12:32.740
They were like, we see a lot of
stuff that's being fixed in V8,
00:12:32.740 --> 00:12:34.810
why aren't we using
the latest version of V8?
00:12:34.810 --> 00:12:38.967
One thing that's important
though about io.js is that
00:12:38.967 --> 00:12:43.310
it is actually compatible with NPM,
so any NPM packages.
00:12:43.310 --> 00:12:47.230
Essentially, if you're doing
a note-based Application today,
00:12:47.230 --> 00:12:49.446
you should be able
to run it as io.js.
00:12:49.446 --> 00:12:52.270
Their trying to keep,
their trying to move forward and
00:12:52.270 --> 00:12:54.490
actually improve things going on and
on.
00:12:54.490 --> 00:12:56.640
Now that last line there,
what will the future hold is yet
00:12:56.640 --> 00:12:57.360
to be determined?
00:12:57.360 --> 00:13:00.450
I had a nice little thing that I was
going to say until there was a nice
00:13:00.450 --> 00:13:03.500
little announcement that came out
last night, where now there's this
00:13:03.500 --> 00:13:07.600
huge reconciliation project going on
on GitHub, where people are taking
00:13:07.600 --> 00:13:12.040
what's been done on io.js and trying
to port that stuff over to Node.js.
00:13:12.040 --> 00:13:13.280
What's the point?
00:13:13.280 --> 00:13:14.720
Just know that there's
two different options.
00:13:14.720 --> 00:13:16.490
You just need to pay
attention to both.
00:13:16.490 --> 00:13:20.150
The demos I'm gonna run, I'm gonna
run them using Node because frankly
00:13:20.150 --> 00:13:21.890
I think that's a little
bit more popular.
00:13:21.890 --> 00:13:24.400
Or that's the one that people
are most familiar with.
00:13:24.400 --> 00:13:26.080
But they all run with io.js.
00:13:26.080 --> 00:13:30.311
If you're interested in playing with
both of those on your environment
00:13:30.311 --> 00:13:33.844
there's a package called NVM
as in Nancy, Victor, Mary.
00:13:33.844 --> 00:13:35.999
And what that does is
a node version manager and
00:13:35.999 --> 00:13:39.206
it allows you to install multiple
versions of node and io.js and then
00:13:39.206 --> 00:13:42.357
you configure your machine for which
Runtime that you want to use and
00:13:42.357 --> 00:13:44.750
you just point to
the different version.
00:13:44.750 --> 00:13:46.460
This allows you to test for
different versions.
00:13:46.460 --> 00:13:47.792
That's NVM.
00:13:47.792 --> 00:13:49.320
Here's just a little
slide showing you what
00:13:49.320 --> 00:13:51.210
I mean by the contributions.
00:13:51.210 --> 00:13:56.920
This is a screen grab from late
April of the node project on GitHub,
00:13:56.920 --> 00:14:01.820
and it shows the contributions
to source control and GitHub.
00:14:01.820 --> 00:14:04.200
Take notice of that
last year that you see.
00:14:04.200 --> 00:14:07.470
You see,
that compared to the previous years
00:14:07.470 --> 00:14:09.248
is a lot less activity.
00:14:09.248 --> 00:14:11.890
Now remember io.js is
a fork of Node.js, so
00:14:11.890 --> 00:14:15.840
this picture is gonna look the exact
same when I flip over to the io.js
00:14:15.840 --> 00:14:19.460
one except notice what's going
on at the very end there.
00:14:19.460 --> 00:14:21.050
That's happened since the fork.
00:14:21.050 --> 00:14:24.460
You see it's got a lot more activity
on it than what Node has had
00:14:24.460 --> 00:14:25.460
even over the same time.
00:14:26.580 --> 00:14:29.090
Alright, it's that spike at the end
that I want you to take notice of.
00:14:29.090 --> 00:14:31.840
You think about it,
which one do you want to go with?
00:14:31.840 --> 00:14:34.530
A lot of people don't want to go
with io.js because they feel it's
00:14:34.530 --> 00:14:38.860
too new ortoo edgy and
it's not really supported, right.
00:14:38.860 --> 00:14:40.610
It's open source software.
00:14:40.610 --> 00:14:44.610
Show me the support behind
open source software, it's us.
00:14:44.610 --> 00:14:45.510
Right?
00:14:45.510 --> 00:14:46.960
So to me that's not
as big of a deal, but
00:14:46.960 --> 00:14:49.870
there are a lot of companies, I work
with companies that refuse to use
00:14:49.870 --> 00:14:52.880
certain things unless there's a
support contract we can put with it.
00:14:52.880 --> 00:14:54.500
What's the appeal of Node.js and
00:14:54.500 --> 00:14:56.940
I'm just gonna through
io.js in there as well.
00:14:56.940 --> 00:14:58.910
For me, it's one language,
00:14:58.910 --> 00:15:00.849
from client all the way
down to the server.
00:15:01.860 --> 00:15:05.002
You write a web application today
it's got a very dynamic client web
00:15:05.002 --> 00:15:06.040
front end.
00:15:06.040 --> 00:15:08.079
You're gonna be using HTML,
CSS, and Java Script.
00:15:09.672 --> 00:15:12.258
You have to kinda ask yourself,
I switch over to ASP.net and
00:15:12.258 --> 00:15:14.085
everything and
then I'm using razor, and
00:15:14.085 --> 00:15:16.230
C# and all this stuff to
build up my application.
00:15:16.230 --> 00:15:19.110
You're switching languages,
you're switching context.
00:15:19.110 --> 00:15:23.170
Does anybody else have
a mindshift that you gotta do,
00:15:23.170 --> 00:15:24.330
whenever you do that?
00:15:24.330 --> 00:15:24.870
I do it.
I have
00:15:24.870 --> 00:15:26.550
a little bit of a hard
time doing that.
00:15:26.550 --> 00:15:28.660
Jumping back and
forth can be a little tricky.
00:15:28.660 --> 00:15:31.374
What I've really liked is
the fact that now I'm using
00:15:31.374 --> 00:15:33.140
JavaScript Full Stack.
00:15:33.140 --> 00:15:33.660
In addition,
00:15:33.660 --> 00:15:37.275
you know how in Microsoft we
have a thing called MS Build.
00:15:37.275 --> 00:15:41.225
MS Build is an XML based
task configuration runner.
00:15:41.225 --> 00:15:43.865
So it candles all the things
like building our projects,
00:15:43.865 --> 00:15:45.305
compiling our projects.
00:15:45.305 --> 00:15:48.335
If we're doing SharePoint stuff it
helps package them into those WSPs
00:15:48.335 --> 00:15:52.135
or into the app packages that we
need to create SharePoint add-ins.
00:15:52.135 --> 00:15:52.985
Right.
00:15:52.985 --> 00:15:56.185
Well, in the open source world
we've got two very popular tools.
00:15:56.185 --> 00:15:58.181
One's called grunt and
ones called gulp.
00:15:58.181 --> 00:16:00.450
You gotta love the names
of these things, right.
00:16:00.450 --> 00:16:03.870
So, grunt is very much
to me like MS Build,
00:16:03.870 --> 00:16:06.740
in the sense that it's
configuration over code.
00:16:06.740 --> 00:16:11.660
You use not XML, but you use JSON,
JavaScript object notation,
00:16:11.660 --> 00:16:14.180
to define the different things
that you want to have happen.
00:16:14.180 --> 00:16:15.980
And most of the work that it does,
00:16:15.980 --> 00:16:17.620
is all going to be done
on the file system.
00:16:17.620 --> 00:16:20.060
So, if I'm taking a bunch of files,
compiling from
00:16:20.060 --> 00:16:23.150
type script to JavaScript,
it writes all the JavaScript files.
00:16:23.150 --> 00:16:25.990
If I want to do a concatenation it
takes all those puts them together
00:16:25.990 --> 00:16:27.170
as one file.
00:16:27.170 --> 00:16:28.490
If I want to minify it or
00:16:28.490 --> 00:16:33.210
as the package that's really
popular is called uglyify which
00:16:33.210 --> 00:16:36.470
is actually a hell of a lot more
appropriate I think than minify it.
00:16:36.470 --> 00:16:40.500
If we want to uglyify my code it
then does that in yet another file.
00:16:40.500 --> 00:16:42.112
The other option is gulp.
00:16:42.112 --> 00:16:44.640
Now that's the one that I prefer.
00:16:44.640 --> 00:16:47.550
And the reason why I prefer that
one is because it's more code over
00:16:47.550 --> 00:16:48.240
configuration.
00:16:48.240 --> 00:16:49.650
And I'll show you a sample of that.
00:16:49.650 --> 00:16:51.210
All my projects use that.
00:16:51.210 --> 00:16:53.430
What gulp does is that I use that.
00:16:53.430 --> 00:16:55.920
I define my tasks by
writing JavaScript.
00:16:55.920 --> 00:16:57.830
Notice a theme here?
00:16:57.830 --> 00:17:00.720
One language from the build
process to the tests to
00:17:00.720 --> 00:17:02.620
the server to the client.
00:17:02.620 --> 00:17:05.630
And the same tooling works
across the whole stack.
00:17:05.630 --> 00:17:07.510
It's pretty freaking cool,
at least in my opinion.
00:17:07.510 --> 00:17:11.705
It's cross platform and
it's built for I-O bound operations.
00:17:11.705 --> 00:17:15.100
We're building a lot of web sites
and restful services these days.
00:17:15.100 --> 00:17:16.340
It's a great option to have.
00:17:16.340 --> 00:17:18.760
And it runs anywhere and everywhere.
00:17:18.760 --> 00:17:20.680
You wonder where the support is for
this kind of stuff.
00:17:20.680 --> 00:17:22.960
Well let's look at some of the
developer tooling options we have
00:17:22.960 --> 00:17:24.370
for Node.js.
00:17:24.370 --> 00:17:28.525
Visual Studio has support,
Visual Studio 2013 has support for
00:17:28.525 --> 00:17:32.860
Node.js using an external package
that Microsoft has created for
00:17:32.860 --> 00:17:35.550
creating Node.js tools for
Visual Studio.
00:17:35.550 --> 00:17:42.130
Up until last, let's see what
was that, Thursday, I was using
00:17:42.130 --> 00:17:45.810
one of the tools listed on here
called WebStorm by a third party.
00:17:45.810 --> 00:17:48.690
Loved it for all my client
side web based development.
00:17:48.690 --> 00:17:49.790
And yeah, last week,
00:17:49.790 --> 00:17:53.110
at Build, they announced this new
tool called Visual Studio Code.
00:17:53.110 --> 00:17:54.460
You guys see that?
00:17:55.700 --> 00:17:57.110
I sat through a session.
00:17:57.110 --> 00:17:58.340
I was blown away by it.
00:17:58.340 --> 00:18:00.800
I had a session at Build
that I was presenting,
00:18:00.800 --> 00:18:03.020
two hours after this other session,
and
00:18:03.020 --> 00:18:05.970
I pulled the absolutely insane
move and shifted all my demos
00:18:05.970 --> 00:18:09.390
over to a totally editor I'd
never seen two hours prior.
00:18:09.390 --> 00:18:12.030
Thank God everything
worked just fine.
00:18:12.030 --> 00:18:14.902
Shows a little bit of the craziness
and why there's a little bit of gray
00:18:14.902 --> 00:18:17.889
hair up here but I'll tell you what,
this thing is absolutely awesome.
00:18:17.889 --> 00:18:20.511
There's a video from it from
the session from Build last week,
00:18:20.511 --> 00:18:22.501
I strongly encourage you
to go take a look at it.
00:18:22.501 --> 00:18:24.775
Skip forward,
watch the whole video its great but
00:18:24.775 --> 00:18:26.950
if you really want a fire hose,
quick example.
00:18:26.950 --> 00:18:31.255
Skip forward to the about 10 to 15
minutes you'll see a demo start,
00:18:31.255 --> 00:18:34.650
watch the whole demo its like 10,
15 minutes long.
00:18:34.650 --> 00:18:38.122
I was sitting with a couple other
guys who do the same kind of stuff
00:18:38.122 --> 00:18:40.969
that I do, our jaws were
on the ground, it was nuts.
00:18:40.969 --> 00:18:43.825
Even when you're doing just plain
old JavaScript work it actually
00:18:43.825 --> 00:18:46.434
takes advantage of TypeScript for
typing your JavaScript.
00:18:46.434 --> 00:18:49.098
Meaning if you're not sold on
TypeScript, you're like I like
00:18:49.098 --> 00:18:52.230
the strong typing thing but I don't
like the other stuff, that's fine.
00:18:52.230 --> 00:18:53.260
You can still do JavaScript and
00:18:53.260 --> 00:18:55.340
take advantage of that
in Visual Studio Code.
00:18:55.340 --> 00:18:58.570
And it's got a killer
price point too.
00:18:58.570 --> 00:18:59.650
Free.
00:18:59.650 --> 00:19:01.710
Runs in Windows, Linux, and on OSX.
00:19:01.710 --> 00:19:02.860
So that's what I'm going to use.
00:19:02.860 --> 00:19:05.880
If anybody hasn't seen it,
that's what I use for all my, for
00:19:05.880 --> 00:19:08.030
well, not just my demos, that's
what I do for my projects now.
00:19:08.030 --> 00:19:10.550
Of course, it's not like I've been
doing it a long time, but, hey.
00:19:11.870 --> 00:19:13.290
And then there's a bunch
of different editors.
00:19:13.290 --> 00:19:14.790
Hey, brackets is
actually interesting.
00:19:14.790 --> 00:19:17.630
Brackets is an editor for
doing web-based stuff.
00:19:17.630 --> 00:19:20.543
It's got JavaScript Editor
inside it.
00:19:20.543 --> 00:19:21.740
And guess what it was written in?
00:19:22.820 --> 00:19:24.920
JavaScript. Right.
00:19:24.920 --> 00:19:26.945
How's that for being Meta? Right.
00:19:26.945 --> 00:19:28.490
[LAUGH] Same
00:19:28.490 --> 00:19:30.030
thing actually Visual Studio Code.
00:19:30.030 --> 00:19:32.210
It actually uses the shell and
00:19:32.210 --> 00:19:33.910
I forget what the name
is on top of my head.
00:19:33.910 --> 00:19:40.140
But it uses the shell that's
used for the Atom Text Editor.
00:19:40.140 --> 00:19:43.980
That's also written in JavaScript,
or actually io.js.
00:19:43.980 --> 00:19:45.040
No, not Monaco, it's something else.
00:19:45.040 --> 00:19:46.610
Monaco is the Microsoft thing.
00:19:47.730 --> 00:19:48.820
What's that?
00:19:48.820 --> 00:19:49.550
Electron, that's it.
00:19:49.550 --> 00:19:52.280
Electron's the new name for
Atom Shell.
00:19:52.280 --> 00:19:54.440
But the point there,
see at the very end.
00:19:54.440 --> 00:19:57.999
You can use any text editor
that you want to use with this.
00:19:57.999 --> 00:20:01.781
Because I'm gonna show you how the
text editor doesn't do anything for
00:20:01.781 --> 00:20:05.500
me in the sense of it helps me with
IntelliSense and auto completion and
00:20:05.500 --> 00:20:08.777
Linting and little squiggly lines
that tell me when I'm doing
00:20:08.777 --> 00:20:11.570
stuff wrong,
usually a lot of those in my code.
00:20:11.570 --> 00:20:15.030
But Gulp is what's gonna give us
the ability to do is to build our
00:20:15.030 --> 00:20:16.930
projects and
see a lot more stuff with it.
00:20:18.120 --> 00:20:20.160
All right,
let's talk about developing node.
00:20:20.160 --> 00:20:22.520
So real quick, just let me give
you a lay of the land here.
00:20:22.520 --> 00:20:25.120
I'm gonna keep this very,
very topical.
00:20:25.120 --> 00:20:26.510
Let's say I'm building a website.
00:20:26.510 --> 00:20:27.710
What do I need?
00:20:27.710 --> 00:20:29.360
Well, there's three things,
00:20:29.360 --> 00:20:32.130
there's two things you're
probably going to use.
00:20:33.240 --> 00:20:35.540
As I'm doing this I'm cutting
the number farther and farther back.
00:20:35.540 --> 00:20:36.370
There's really only one thing.
00:20:36.370 --> 00:20:39.470
I started with four and
then I just went down to one.
00:20:39.470 --> 00:20:40.840
Connect is the one
that you really need.
00:20:40.840 --> 00:20:42.570
Connect is, let me jump over here.
00:20:42.570 --> 00:20:47.500
Connect is Middleware for Node.js.
00:20:47.500 --> 00:20:51.770
So what Middleware is in Node is it
allows me to, say, have a package or
00:20:51.770 --> 00:20:54.170
a plugin that says I'm
gonna have my code run,
00:20:54.170 --> 00:20:57.310
and when it gets to a certain
part I have Middleware
00:20:57.310 --> 00:21:00.910
that the code execution process is
gonna go through the Middleware
00:21:00.910 --> 00:21:03.680
through maybe more and
more and more and more.
00:21:03.680 --> 00:21:07.310
And each one of those things is
gonna call the callback that's
00:21:07.310 --> 00:21:10.565
passed in saying I'm done with that
work and then it'll hand it back.
00:21:10.565 --> 00:21:12.220
Really useful for
like web servers, for
00:21:12.220 --> 00:21:15.340
authentication flow,
all that kind of stuff.
00:21:15.340 --> 00:21:15.980
So in this case here,
00:21:15.980 --> 00:21:18.510
you can see I'm creating a new
Connect app by just saying var app
00:21:18.510 --> 00:21:19.350
equals connect.
00:21:19.350 --> 00:21:20.250
Not sure why it's not white.
00:21:21.440 --> 00:21:23.860
It's gonna facilitate a simple
request and response.
00:21:23.860 --> 00:21:27.180
I mean bare bones,
super simple request and response.
00:21:27.180 --> 00:21:31.820
But it's an extensible HTTP server
framework using plug-ins, okay?
00:21:31.820 --> 00:21:34.730
So down there at the bottom
you can see I say app.use.
00:21:34.730 --> 00:21:37.327
I pass in the path foo as my route.
00:21:37.327 --> 00:21:41.161
And when I get that request that
comes in, Node is gonna call that
00:21:41.161 --> 00:21:45.066
function passing in the request
object, the response object and
00:21:45.066 --> 00:21:48.560
the callback, which I've
indicated as a next function.
00:21:48.560 --> 00:21:50.490
And then you see inside
that function I'm
00:21:50.490 --> 00:21:52.220
calling the next function.
00:21:52.220 --> 00:21:54.230
I'd want to do some business
logic here most likely and
00:21:54.230 --> 00:21:55.090
not just leave it at that.
00:21:55.090 --> 00:21:56.360
Otherwise, it's a waste of code.
00:21:56.360 --> 00:21:58.300
Don't want to waste your code.
00:21:58.300 --> 00:22:00.000
We only have so
many key presses in our fingers.
00:22:01.600 --> 00:22:03.560
Now, you're probably not
just gonna use Connect.
00:22:03.560 --> 00:22:05.170
You're probably,
if you're building a website,
00:22:05.170 --> 00:22:07.400
you're probably gonna
want to get Express.
00:22:07.400 --> 00:22:11.700
For all of us that are Microsoft
developers, Express equals IAS.
00:22:11.700 --> 00:22:15.795
Microsoft would probably say no,
we do a lot more than that.
00:22:15.795 --> 00:22:16.690
>> [LAUGH]
>> Yeah, I know,
00:22:16.690 --> 00:22:19.095
but just from a high level,
conceptually,
00:22:19.095 --> 00:22:20.870
Express is your web server.
00:22:20.870 --> 00:22:24.180
It's built on top of Connect, it's
very minimalist web framework in
00:22:24.180 --> 00:22:26.790
the sense that it doesn't give you
authentication or any of that stuff
00:22:26.790 --> 00:22:29.660
out of the box, you have to go get
Middleware and plug that stuff in.
00:22:29.660 --> 00:22:31.240
I'll show you how that works.
00:22:31.240 --> 00:22:32.560
It's very unopinionated.
00:22:32.560 --> 00:22:34.060
What does that mean?
00:22:34.060 --> 00:22:37.450
It doesn't say you have
to do things like this.
00:22:37.450 --> 00:22:39.670
It says how should I do this stuff?
00:22:39.670 --> 00:22:41.400
It doesn't know how to do things,
00:22:41.400 --> 00:22:45.910
you have to tell it how to do those
things by getting other MPM packages
00:22:45.910 --> 00:22:48.710
and registering them like
as authentication stuff.
00:22:49.720 --> 00:22:51.040
You've gotta write all
the plumbing code for
00:22:51.040 --> 00:22:52.840
this stuff just like you would for
00:22:52.840 --> 00:22:55.630
any other rest API that you're going
to build or any other website.
00:22:55.630 --> 00:22:57.910
But it's also very extensible.
00:22:57.910 --> 00:23:00.680
One of the cool things about the
extensibility side of it is you get
00:23:00.680 --> 00:23:03.720
to choose between a couple
different MVC frameworks
00:23:03.720 --> 00:23:06.360
that you can use
with your Node site.
00:23:06.360 --> 00:23:10.950
The one that I see that most editors
default to is one called Jade.
00:23:10.950 --> 00:23:13.580
And Jade's got this
interesting little HTML syntax.
00:23:13.580 --> 00:23:15.500
If you're familiar with
something called Emmet,
00:23:15.500 --> 00:23:17.452
it feels a little bit like Emmet.
00:23:17.452 --> 00:23:19.020
But Emmet is a way for
00:23:19.020 --> 00:23:21.930
writing shorthand to stub
out like an HTML table.
00:23:21.930 --> 00:23:23.700
The thing is that the table
doesn't get stubbed out.
00:23:23.700 --> 00:23:26.580
You're actually,
the code that you write in Jade,
00:23:26.580 --> 00:23:30.340
it's going to use that almost
like a processing language.
00:23:30.340 --> 00:23:33.610
If that's your cup of tea
then by all means go for it.
00:23:33.610 --> 00:23:36.740
Another one is EJS or
Embedded JavaScript.
00:23:36.740 --> 00:23:41.864
That one's cool, it's got JavaScript
and HTML in the same files.
00:23:41.864 --> 00:23:44.130
The JavaScript is inside
the HTML and vice versa.
00:23:44.130 --> 00:23:47.460
It feels a little weird to
me when you're doing that.
00:23:48.640 --> 00:23:49.580
Another one is Vash.
00:23:49.580 --> 00:23:52.059
When I first saw
Vash I was like sweet.
00:23:52.059 --> 00:23:54.836
I'm going to apologize to the guy
behind Vash right now because I
00:23:54.836 --> 00:23:57.101
don't want this to come
across too negatively, but
00:23:57.101 --> 00:24:00.150
I'll consider this constructive
feedback if he watches this video.
00:24:02.170 --> 00:24:03.340
Vash is, right,
00:24:03.340 --> 00:24:07.365
you pull the Microsoft line,
like that's good feedback.
00:24:07.365 --> 00:24:08.970
>> [LAUGH].
00:24:08.970 --> 00:24:11.590
>> What, you've heard that?
00:24:11.590 --> 00:24:14.590
Vash is very much like Razor.
00:24:14.590 --> 00:24:17.280
So I looked at that coming from
ASP.NET MVC using Razor and
00:24:17.280 --> 00:24:21.010
I'm like, Vash, oh sweet, that looks
just like what I'm used to doing.
00:24:21.010 --> 00:24:21.966
Let's use that.
00:24:21.966 --> 00:24:25.310
And I started using it and
then I had a problem with it.
00:24:25.310 --> 00:24:26.080
So I asked a question.
00:24:26.080 --> 00:24:30.520
And then I found out that I was like
one of the few people using Vash
00:24:30.520 --> 00:24:31.850
along with the guy that wrote it.
00:24:31.850 --> 00:24:35.540
So I loved it, but there was
a very small community around it.
00:24:35.540 --> 00:24:37.130
So I had a hard time
getting some help and
00:24:37.130 --> 00:24:38.742
trying to figure some stuff out.
00:24:39.920 --> 00:24:42.680
And that was like eh, oh wait.
00:24:42.680 --> 00:24:44.930
Now another one that's out
there is one called Handlebars.
00:24:44.930 --> 00:24:46.000
Anybody heard of Handlebars?
00:24:47.130 --> 00:24:49.790
Handlebars, those curly
brackets that go on the end.
00:24:49.790 --> 00:24:51.480
I do a lot of Angular work.
00:24:52.810 --> 00:24:53.580
The syntax for
00:24:53.580 --> 00:24:57.040
data binding in Angular feels
very much like Handlebars.
00:24:57.040 --> 00:24:58.790
So I started gravitating
to that one.
00:24:58.790 --> 00:25:00.740
Handlebars is a client-side thing.
00:25:00.740 --> 00:25:05.479
There's a guy that's written an MPM
package called HBS that is actually
00:25:05.479 --> 00:25:08.270
a server-side version of Handlebars.
00:25:08.270 --> 00:25:14.186
That's what I like to use for
doing my MVC-style views and
00:25:14.186 --> 00:25:17.820
syntax inside of my Node.js apps.
00:25:19.030 --> 00:25:22.080
All right, so what about debugging
your Node.js applications?
00:25:22.080 --> 00:25:23.130
This is tricky.
00:25:23.130 --> 00:25:25.830
This can be tricky when
you first get into it.
00:25:25.830 --> 00:25:29.608
When you go to run a Node process,
when you wanna start a JavaScript in
00:25:29.608 --> 00:25:32.279
Node process,
you usually type in Node space and
00:25:32.279 --> 00:25:35.165
the name of the JavaScript
file that you want to run.
00:25:35.165 --> 00:25:38.590
You know in Visual Studio when we
go hit that Play button or Start?
00:25:38.590 --> 00:25:40.870
We have that drop-down of what
configuration you want to use,
00:25:40.870 --> 00:25:42.310
either debug or release.
00:25:42.310 --> 00:25:44.700
And some of us have projects
that have a lot more than that.
00:25:44.700 --> 00:25:46.390
You guys know what
I'm talking about?
00:25:46.390 --> 00:25:50.420
Think about what I just said,
node space server.js.
00:25:50.420 --> 00:25:53.780
Think about that as running
the release configuration of
00:25:53.780 --> 00:25:54.761
Visual Studio.
00:25:54.761 --> 00:25:56.820
You're not gonna get much
debugging in that sense, though.
00:25:56.820 --> 00:25:59.050
There's no debugging
symbols that are set up.
00:25:59.050 --> 00:26:01.497
It doesn't do break points and
that kind of stuff.
00:26:01.497 --> 00:26:04.583
Instead, when you want to
run in debugging mode,
00:26:04.583 --> 00:26:09.063
you're going to say node, space,
the name of the JavaScript file, and
00:26:09.063 --> 00:26:11.708
then you're going to
pass in --debug and
00:26:11.708 --> 00:26:14.737
that essentially tells
node to go in debug mode.
00:26:14.737 --> 00:26:18.138
Now what's cool about this is that
it emits a lot of information and
00:26:18.138 --> 00:26:20.970
it also emits some stuff
on a special port.
00:26:20.970 --> 00:26:22.080
What's cool about that?
00:26:22.080 --> 00:26:25.710
Well, if you go fire up
a process called node-inspector,
00:26:25.710 --> 00:26:28.270
which you generally will
start node-inspector,
00:26:28.270 --> 00:26:31.282
and then you'll start your
node application or website.
00:26:31.282 --> 00:26:34.520
What node-inspector does is it looks
at all the debug information coming
00:26:34.520 --> 00:26:36.320
out of the node process.
00:26:36.320 --> 00:26:38.230
You open up the Chrome browser,
00:26:38.230 --> 00:26:41.410
go to the URL that node-inspector
told you to go to.
00:26:41.410 --> 00:26:44.490
And you now are using the Chrome
developer tools to debug your Node
00:26:44.490 --> 00:26:47.600
server-side application
complete with break points.
00:26:47.600 --> 00:26:50.660
Pulls in the source code and
everything from the JavaScript files
00:26:50.660 --> 00:26:53.284
because the Node debug process
is exposing that stuff.
00:26:53.284 --> 00:26:57.060
That's a core thing that you
definitely want to take a look at.
00:26:57.060 --> 00:26:57.990
It's easy to get started,
00:26:57.990 --> 00:27:01.540
it's easy to get installed, easy to
get running, it's an MPN package.
00:27:01.540 --> 00:27:04.160
I generally install
node-inspector globally on my
00:27:05.190 --> 00:27:06.070
developer environment.
00:27:07.820 --> 00:27:09.070
When you install Node packages,
00:27:09.070 --> 00:27:10.960
you can choose to install
them either locally just for
00:27:10.960 --> 00:27:13.760
the project or globally for
your entire system.
00:27:13.760 --> 00:27:16.840
So the Azure command line interface,
I installed that globally
00:27:16.840 --> 00:27:20.060
because I wanna use that
from anywhere on my laptop.
00:27:20.060 --> 00:27:21.540
Same thing with node-inspector.
00:27:21.540 --> 00:27:25.400
So you run node-inspector,
then you run Node--debug.
00:27:25.400 --> 00:27:29.420
Another aspect about running Node
websites is that when they start up
00:27:29.420 --> 00:27:32.700
and when they start running,
it pulls in all the JavaScript and
00:27:32.700 --> 00:27:36.320
compiles it when you actually
start the application.
00:27:36.320 --> 00:27:39.260
So when you do that, that means
that if you make a change to your
00:27:39.260 --> 00:27:43.050
application as you're developing it,
it doesn't pick those changes up,
00:27:43.050 --> 00:27:44.070
just like Visual Studio.
00:27:44.070 --> 00:27:46.280
I mean, we have the edit and
continue kinda stuff, but
00:27:46.280 --> 00:27:48.640
that doesn't work all the time,
right?
00:27:48.640 --> 00:27:51.580
In this case here, I wanna be
able to make changes to it and
00:27:51.580 --> 00:27:55.110
very easily have those changes
get applied to my site.
00:27:55.110 --> 00:27:58.410
Well, without Nodemon, what I would
have to do is that when I make
00:27:58.410 --> 00:27:59.660
a change to my JavaScript file,
00:27:59.660 --> 00:28:02.100
my server-side JavaScript files,
I'd make a change,
00:28:02.100 --> 00:28:06.910
hit Save, I'd stop the node process,
and then I'd restart it.
00:28:06.910 --> 00:28:11.130
What Nodemon does, is Nodemon
watches all the JavaScript files
00:28:11.130 --> 00:28:14.110
on the server, that's where you're
actually running your stuff and
00:28:14.110 --> 00:28:17.240
if it detects one's changed,
it does the flip for you.
00:28:17.240 --> 00:28:19.450
So in fact,
what I really do in my development,
00:28:19.450 --> 00:28:24.210
is I run node-inspector and
then I run Nodemon--debug space
00:28:24.210 --> 00:28:27.920
here's the name of the JavaScript
file, and then I just start working.
00:28:27.920 --> 00:28:31.571
And it's like I'm always
living in debug mode, okay.
00:28:31.571 --> 00:28:34.193
There's a lot of good videos
on YouTube showing you how
00:28:34.193 --> 00:28:35.969
node-inspector and Nodemon work.
00:28:35.969 --> 00:28:37.820
Definitely take a look at those.
00:28:37.820 --> 00:28:40.594
If you find it's still
a little bit lacking,
00:28:40.594 --> 00:28:45.113
go check out something called
spy.js and your mind will just.
00:28:45.113 --> 00:28:47.807
It's crazy,
it goes deep call stack monitoring,
00:28:47.807 --> 00:28:49.380
showing performance stuff.
00:28:49.380 --> 00:28:52.060
How dull process is going,
where it came from.
00:28:52.060 --> 00:28:55.290
It's crazy level debugging that you
get more than what we just got out
00:28:55.290 --> 00:28:56.790
of the Chrome dev tools.
00:28:56.790 --> 00:28:57.290
Okay?
00:28:58.700 --> 00:29:00.120
Now, let me transition over.
00:29:00.120 --> 00:29:01.160
That's Node.
00:29:01.160 --> 00:29:03.130
Let's talk about Angular for
a second.
00:29:05.190 --> 00:29:06.890
How many of you are doing
Angular apps today?
00:29:08.080 --> 00:29:10.440
All right, you're my people.
00:29:10.440 --> 00:29:12.810
So, the rest of you,
you're still my people.
00:29:12.810 --> 00:29:13.800
We're just going to
get you coming over.
00:29:13.800 --> 00:29:14.759
We're going to get you
to raise your hands.
00:29:16.180 --> 00:29:17.230
So what's Angular?
00:29:17.230 --> 00:29:18.630
What are single page apps?
00:29:18.630 --> 00:29:21.710
A single page app is simply
just a website that you go to
00:29:21.710 --> 00:29:23.820
that typically it's got
the characteristics of being
00:29:23.820 --> 00:29:25.000
very responsive.
00:29:25.000 --> 00:29:25.990
So it works good on mobile.
00:29:25.990 --> 00:29:27.050
It works good on tablets.
00:29:27.050 --> 00:29:30.280
It works good on laptops,
desktops, any screen size.
00:29:30.280 --> 00:29:33.980
And generally we don't
reload the entire page.
00:29:33.980 --> 00:29:36.430
I love when we get these new
technology terms when we realize we
00:29:36.430 --> 00:29:38.570
didn't have, we need a word for
the old thing we used to do.
00:29:39.980 --> 00:29:42.180
So for those of you who aren't doing
Angular apps or single-page apps,
00:29:42.180 --> 00:29:44.270
you're doing multi-page apps.
00:29:44.270 --> 00:29:45.440
Right, go figure.
00:29:45.440 --> 00:29:46.290
We got Visual Studio code.
00:29:46.290 --> 00:29:47.840
I'm like what do you call
the old Visual Studio, and
00:29:47.840 --> 00:29:51.090
they're like I was talk to
a Microsoft, I shouldn't say that.
00:29:51.090 --> 00:29:53.640
I was talking to a guy at build
last week and I'm like so
00:29:53.640 --> 00:29:54.930
what do you call
the old Visual Studio?
00:29:54.930 --> 00:29:56.310
He goes Visual Studio Big.
00:29:56.310 --> 00:30:00.140
I'm like yeah, actually it
kind of feels really big now.
00:30:00.140 --> 00:30:03.360
Anyway, that's not like a,
don't quote that.
00:30:03.360 --> 00:30:04.660
>> [LAUGH]
>> Don't quote that.
00:30:04.660 --> 00:30:05.420
Don't tweet that.
00:30:05.420 --> 00:30:07.700
How's that?
Don't tweet that.
00:30:07.700 --> 00:30:12.515
That I said a Microsoft guy
said that because he didn't
00:30:12.515 --> 00:30:14.090
really say that.
00:30:14.090 --> 00:30:16.808
He had a friend that said it.
00:30:16.808 --> 00:30:20.290
>> [LAUGH]
>> Ooh, I need a shovel up here.
00:30:20.290 --> 00:30:21.190
I'm digging.
00:30:21.190 --> 00:30:23.989
So, the other thing, too, bless you,
this is nothing to sneeze at,
00:30:23.989 --> 00:30:25.039
this part's important.
00:30:25.039 --> 00:30:29.140
So generally with single page apps
you don't refresh the entire page.
00:30:29.140 --> 00:30:31.800
You're generally going to load
the shell of the application, but
00:30:31.800 --> 00:30:35.220
then you only want to go get the
pieces of the application that you
00:30:35.220 --> 00:30:38.165
need based on what's going on
within the app at that time.
00:30:38.165 --> 00:30:39.600
Huh?
00:30:39.600 --> 00:30:41.510
You just need to go get data and
00:30:41.510 --> 00:30:44.070
HTML fragments to figure
out how to style this or
00:30:44.070 --> 00:30:46.620
another JavaScript file to do
additional business logic because
00:30:46.620 --> 00:30:50.780
that employee went into the time
management part of the application.
00:30:50.780 --> 00:30:52.580
We didn't need that
when they logged in.
00:30:52.580 --> 00:30:55.050
So the idea is you wanna
go get stuff that you need.
00:30:55.050 --> 00:30:55.960
And the more you think about,
00:30:55.960 --> 00:30:58.920
it kinda makes more sense to
build these kind of applications
00:31:00.050 --> 00:31:03.940
instead of building these multi-page
applications and sending down jQuery
00:31:03.940 --> 00:31:06.550
every time or sending down
this CSS file every time, or
00:31:06.550 --> 00:31:08.200
sending down this
HTML file every time.
00:31:08.200 --> 00:31:11.970
I know you can cache stuff,
but it can be a lot of work.
00:31:13.320 --> 00:31:15.500
Some examples of that
are the Outlook web app,
00:31:15.500 --> 00:31:18.960
Gmail, Trello,
you guys have seen apps like this.
00:31:18.960 --> 00:31:20.440
Okay?
00:31:20.440 --> 00:31:22.557
Now, some of
the characteristics we have for
00:31:22.557 --> 00:31:24.850
different single-page
app frameworks.
00:31:24.850 --> 00:31:27.800
You generally need routing and
navigation.
00:31:27.800 --> 00:31:29.060
So what is that gonna mean?
00:31:29.060 --> 00:31:31.490
I need a way in the URL
to control where I am and
00:31:31.490 --> 00:31:33.000
how to get to different pages.
00:31:33.000 --> 00:31:36.540
I also need to have the ability
to do things like get in,
00:31:36.540 --> 00:31:37.370
do deep linking.
00:31:37.370 --> 00:31:41.760
I wanna be able to give you a link
to a specific customer screen.
00:31:41.760 --> 00:31:46.100
I would like my single-page
app presentation framework,
00:31:46.100 --> 00:31:49.250
I would like for that to know how
to route me to that page, and
00:31:49.250 --> 00:31:51.520
tell it to load employee number one,
or whatever.
00:31:51.520 --> 00:31:53.690
I also want templated views.
00:31:53.690 --> 00:31:56.860
I wanna have an easy way to
build up the different screens
00:31:56.860 --> 00:31:58.800
with data binding syntaxes.
00:31:58.800 --> 00:32:02.180
And then I also want to have data
binding inside my application.
00:32:02.180 --> 00:32:03.293
Now a lot of you
are probably wondering,
00:32:03.293 --> 00:32:04.290
how many of you have used Knockout?
00:32:04.290 --> 00:32:05.560
Let me ask that.
00:32:05.560 --> 00:32:07.190
A lot of you are probably
wondering who uses Knockout.
00:32:07.190 --> 00:32:07.760
That's not what I meant.
00:32:07.760 --> 00:32:08.542
How many of you are using Knockout?
00:32:08.542 --> 00:32:10.910
All right, but you use Knockout.
00:32:10.910 --> 00:32:12.690
There's a lot,
I always see this question come up.
00:32:12.690 --> 00:32:13.570
When do you use Knockout?
00:32:13.570 --> 00:32:14.550
When do you use single page?
00:32:14.550 --> 00:32:16.250
When do you use
something like Angular?
00:32:16.250 --> 00:32:19.570
Think about it this way,
Knockout is data binding.
00:32:19.570 --> 00:32:21.780
If you're building a forum,
and you need data binding,
00:32:21.780 --> 00:32:24.650
don't pick Angular just
because it's the cool thing.
00:32:24.650 --> 00:32:26.740
Knockout's perfect for it, right?
00:32:26.740 --> 00:32:28.720
But if you're building
a full blown application,
00:32:28.720 --> 00:32:31.480
and you're trying to build like
a new time management system,
00:32:31.480 --> 00:32:34.420
you're trying to build all this big
thing, and you need navigation all
00:32:34.420 --> 00:32:39.120
this other stuff, and data binding
is just one piece of your app.
00:32:39.120 --> 00:32:40.930
That's where Angular comes in.
00:32:40.930 --> 00:32:42.680
So you don't sit there and
look at it and
00:32:42.680 --> 00:32:44.580
say, should I use Angular or
Knockout?
00:32:44.580 --> 00:32:47.635
When that question comes up,
I'm like, you need to use Knockout
00:32:47.635 --> 00:32:50.040
because apparently,
you don't need all this other stuff.
00:32:50.040 --> 00:32:52.200
You just need data binding, okay?
00:32:52.200 --> 00:32:53.990
So think about it like that.
00:32:53.990 --> 00:32:56.590
Now, let me take one little
tangent real quick, and
00:32:56.590 --> 00:32:57.970
then we're gonna dive
into lots of demo.
00:33:02.400 --> 00:33:03.860
A lot of people aren't
using Angular, or
00:33:03.860 --> 00:33:06.330
some people aren't using Angular,
or even got scared late last year,
00:33:06.330 --> 00:33:08.360
when they saw the Angular
team come out and
00:33:08.360 --> 00:33:10.240
say, hey Angular 2 is coming out.
00:33:10.240 --> 00:33:12.560
We're gonna work on that,
and everything's changing,
00:33:12.560 --> 00:33:14.940
and we have all these tombstones of
all these features that we're using
00:33:14.940 --> 00:33:15.710
that are all gonna be dead.
00:33:15.710 --> 00:33:19.570
And everyone's like,
I've got to rewrite my entire app.
00:33:19.570 --> 00:33:22.260
You are out your mind, right?
00:33:22.260 --> 00:33:23.570
Let me give it to you
straight how it is.
00:33:23.570 --> 00:33:27.780
Okay, so in March Google clarified
what they were doing with Angular.
00:33:29.420 --> 00:33:31.100
They finally clarified
what was going on, or
00:33:31.100 --> 00:33:32.710
they did it in a very good way.
00:33:32.710 --> 00:33:35.310
They had done a couple podcasts and
blog posts up to that,
00:33:35.310 --> 00:33:40.010
but at a conference in March
in Salt Lake called NG Comp,
00:33:40.010 --> 00:33:44.700
which is the Angular conference in
North America, they had a couple
00:33:44.700 --> 00:33:47.530
key notes explain what they were
doing, what their intentions were.
00:33:47.530 --> 00:33:48.840
Where are we?
00:33:48.840 --> 00:33:51.040
Today we're on Angular 1.3.
00:33:51.040 --> 00:33:53.650
So if you ask any of the guys on the
Angular team, they say which version
00:33:53.650 --> 00:33:57.390
should I use if I'm building
a brand new app, they say 1.3.
00:33:57.390 --> 00:34:00.870
1.4 is currently in released
candidate, I think it's on RC1.
00:34:01.882 --> 00:34:05.440
Angular 1.4 is the next version
that we'll be looking at.
00:34:05.440 --> 00:34:06.820
And it's got a lot of
performance stuff, but
00:34:06.820 --> 00:34:09.670
the big thing it's got is a lot
of improvements to the animation
00:34:09.670 --> 00:34:12.520
stuff that it's done,
and a whole new router.
00:34:12.520 --> 00:34:15.010
Whole new navigation router
that's a lot better.
00:34:15.010 --> 00:34:19.501
Actually, the navigation router is
the one that they built for 2.0,
00:34:19.501 --> 00:34:21.719
they just back ported it to 1.4.
00:34:21.719 --> 00:34:26.325
What they've said is that future
versions of the 1.x branch,
00:34:26.325 --> 00:34:31.529
1.5, 1.6, those have a primary
goal of helping you when you build
00:34:31.529 --> 00:34:36.420
your apps, to be able to migrate
them to 2.0 in a much easier way.
00:34:36.420 --> 00:34:41.030
So the primary goal of the 1.5 and
forward versions,
00:34:41.030 --> 00:34:42.878
will be to help you migrate to 2.0.
00:34:42.878 --> 00:34:45.820
2.0, they don't know
when that's coming out.
00:34:45.820 --> 00:34:47.330
All right?
00:34:48.960 --> 00:34:52.200
They haven't said when it's coming
out, they've given a couple hints.
00:34:52.200 --> 00:34:54.310
To me, it smells like around four or
00:34:54.310 --> 00:34:57.240
sixish months maybe,
something like that.
00:34:57.240 --> 00:34:58.680
We should know more in May or June.
00:34:58.680 --> 00:35:01.424
They said that they're gonna go to a
very big application inside Google,
00:35:01.424 --> 00:35:03.180
they're going to port it, the 2.0.
00:35:03.180 --> 00:35:05.000
And that will tell them
essentially where they are,
00:35:05.000 --> 00:35:07.880
how much work they need,
blah, blah, blah, blah, blah.
00:35:07.880 --> 00:35:10.100
Okay, so we'll see where you are.
00:35:10.100 --> 00:35:13.090
To me, I would focus on 1.3 or 1.4.
00:35:13.090 --> 00:35:15.450
Trying to do stuff with 2.0
right now is an absolute,
00:35:15.450 --> 00:35:17.240
it's very challenging,
00:35:17.240 --> 00:35:20.190
because you're still pulling
together a lot of different things.
00:35:20.190 --> 00:35:22.750
It is incredibly fast.
00:35:22.750 --> 00:35:26.490
The performance is absolutely
amazing, but keep this in mind,
00:35:26.490 --> 00:35:30.030
it is only going to be supported
in Evergreen browsers.
00:35:30.030 --> 00:35:34.120
That means Chrome, Firefox, that
means the new Microsoft browser, it
00:35:34.120 --> 00:35:38.060
used to be called Project Spartan,
now it's called Edge, I think.
00:35:38.060 --> 00:35:39.431
Right?
00:35:39.431 --> 00:35:42.323
Man, another blue e.
00:35:42.323 --> 00:35:47.935
>> [LAUGH]
>> And then IE 11, right?
00:35:47.935 --> 00:35:51.210
>> [LAUGH]
>> So, got a couple customers that
00:35:51.210 --> 00:35:56.210
might not be up to speed and
might still be using a more
00:35:56.210 --> 00:35:59.100
legacy version of IE that won't
be able to use Angular 2.
00:35:59.100 --> 00:36:00.640
So keep that in mind.
00:36:00.640 --> 00:36:03.910
Now, if you're interested, I got
a blog post up that I put up in
00:36:03.910 --> 00:36:06.530
the last two weeks that explains
how you should think about it,
00:36:06.530 --> 00:36:07.910
why there's an advantage to it.
00:36:07.910 --> 00:36:11.210
It really is gonna be a really
good improvement going forward.
00:36:11.210 --> 00:36:12.375
But here's the way I look at it,
00:36:12.375 --> 00:36:14.210
because a lot of people
complain about it.
00:36:14.210 --> 00:36:15.780
Let's draw an analogy here.
00:36:15.780 --> 00:36:18.740
Years ago we did not have
something called ASP.NET MVC.
00:36:18.740 --> 00:36:20.690
We had ASP.NET WebForms.
00:36:20.690 --> 00:36:22.230
We didn't know that there was
anything wrong with them.
00:36:22.230 --> 00:36:23.810
We loved them, they were great.
00:36:23.810 --> 00:36:26.390
Some of the enlightened ones could
tell that there were other platforms
00:36:26.390 --> 00:36:28.240
that were out there that
had this stuff called MVC.
00:36:28.240 --> 00:36:30.997
And the more we saw it,
the more we're like, oh,
00:36:30.997 --> 00:36:33.580
that stuff does look better.
00:36:33.580 --> 00:36:34.720
So Microsoft came out and
00:36:34.720 --> 00:36:38.210
said, now we got a new
thing called ASP.NET MVC.
00:36:38.210 --> 00:36:40.842
They couldn't go through and just
port web forms to MVC, because we
00:36:40.842 --> 00:36:43.582
had a whole different, a whole bunch
of paradigms that had to change.
00:36:43.582 --> 00:36:45.269
So we went through and
00:36:45.269 --> 00:36:49.310
we just went from they just
had a whole new version.
00:36:50.500 --> 00:36:51.300
Were there people that complained?
00:36:51.300 --> 00:36:54.530
God, I've got to rewrite my entire
application from WebForms to MVC. Sure.
00:36:54.530 --> 00:36:57.000
Are there WebForms applications
00:36:57.000 --> 00:36:58.940
still today?
00:36:58.940 --> 00:36:59.710
Yes.
00:36:59.710 --> 00:37:01.130
Are they running just fine?
00:37:01.130 --> 00:37:02.310
Yes.
00:37:02.310 --> 00:37:03.480
Here's the cool thing.
00:37:03.480 --> 00:37:05.120
Where Google is,
I look at the same way.
00:37:05.120 --> 00:37:07.115
WebForms, that's version 1.x.
00:37:07.115 --> 00:37:12.340
MVC, that's version Angular 2.0,
or 2.whatever, forward.
00:37:12.340 --> 00:37:15.210
Here's the way I look at it.
00:37:15.210 --> 00:37:16.050
Here's what Google is doing.
00:37:16.050 --> 00:37:17.220
This is a cool thing too.
00:37:17.220 --> 00:37:19.041
I wish all software
companies would do this.
00:37:19.041 --> 00:37:23.084
Angularjs.org is where
Angular 1.x lives.
00:37:23.084 --> 00:37:25.104
Angular, let's see,
00:37:25.104 --> 00:37:29.770
http://angular.io is
where angular2 lives.
00:37:29.770 --> 00:37:34.306
They're gonna watch the traffic, and
they're gonna watch the polls from
00:37:34.306 --> 00:37:38.640
the different CDNs, and they're
gonna watch the activity in GitHub.
00:37:38.640 --> 00:37:42.620
And when the majority of the people,
the vast majority of the people,
00:37:42.620 --> 00:37:44.846
have started to switch
from one to two,
00:37:44.846 --> 00:37:48.084
then that's when they'll
stop doing work on 1.x, but
00:37:48.084 --> 00:37:51.060
they will continue to do
work on both versions on it.
00:37:51.060 --> 00:37:52.330
So if you're sitting
there wondering,
00:37:52.330 --> 00:37:53.740
oh my god I'm gonna get abandoned,
00:37:53.740 --> 00:37:55.580
I'm gonna get messed over and
everything.
00:37:55.580 --> 00:37:56.840
I don't see that at all.
00:37:56.840 --> 00:38:01.090
They're gonna let us decide
when we retire the old version.
00:38:01.090 --> 00:38:03.270
When is the last time you heard
that from a software company?
00:38:03.270 --> 00:38:05.370
That's pretty cool,
I like that approach.
00:38:06.425 --> 00:38:10.392
Okay, too many slides,
how about some demos?
00:38:10.392 --> 00:38:13.130
All right, so I've got three demos
here, let me switch over to my
00:38:13.130 --> 00:38:14.690
machine, makes it a little
bit easier to show them.
00:38:16.072 --> 00:38:19.630
I have three different demos
here that I'm gonna show you.
00:38:19.630 --> 00:38:21.821
So let me show you
the first one running and
00:38:21.821 --> 00:38:24.756
then we'll kinda dig
into it a little bit.
00:38:24.756 --> 00:38:27.870
So, I'm going to hold off on
doing all the gulp stuff and
00:38:27.870 --> 00:38:28.530
the build process and
00:38:28.530 --> 00:38:30.800
everything until the very end if we
have a little bit of time for that.
00:38:30.800 --> 00:38:33.540
Let's see some of these
different samples first.
00:38:33.540 --> 00:38:38.221
So this first one is
an Outlook add-in for Office.
00:38:38.221 --> 00:38:42.925
And so what this one's going to do
is that I have a concept of where I
00:38:42.925 --> 00:38:47.715
want to take, I want to look at all
the words in the body of an email,
00:38:47.715 --> 00:38:52.872
and wherever I see something that's
a potential person's last name.
00:38:52.872 --> 00:38:56.822
So, where the word has separated
by spaces on either side and
00:38:56.822 --> 00:39:00.539
it's got a capital first letter,
generally speaking,
00:39:00.539 --> 00:39:02.951
I know it's not getting everybody.
00:39:02.951 --> 00:39:07.180
Generally speaking, that's a good
way of finding names in an email.
00:39:07.180 --> 00:39:09.460
I'm gonna find a lot more stuff.
00:39:09.460 --> 00:39:12.060
What I want to do is in that email,
find all those words,
00:39:12.060 --> 00:39:16.230
submit them over to my CRM system,
00:39:16.230 --> 00:39:18.300
see if those are candidates
of my current customers.
00:39:18.300 --> 00:39:21.420
And if they are, I want you to be
able to line up a little add-in
00:39:21.420 --> 00:39:25.120
inside of my Outlook email
that I'm looking at, and
00:39:25.120 --> 00:39:27.210
it shows me the different
people that I can click on.
00:39:27.210 --> 00:39:29.855
Just like in Outlook, we have one
of those things for LinkedIn.
00:39:29.855 --> 00:39:32.135
I'd like to have one of those
that talks to my CRM system.
00:39:33.355 --> 00:39:35.465
This is going to show
an Office add-in.
00:39:35.465 --> 00:39:37.145
It's going to show Angular and
00:39:37.145 --> 00:39:40.320
a node.js site that's going
to serve as a restful proxy.
00:39:40.320 --> 00:39:41.960
Now I'll explain why
I have to do that.
00:39:41.960 --> 00:39:44.790
So before I get going on this,
00:39:44.790 --> 00:39:50.590
I actually have to compile all
my type script to JavaScript.
00:39:50.590 --> 00:39:54.950
So there's one, we'll do the same
thing for my client stuff.
00:39:57.830 --> 00:39:59.550
And then I'm also going to say.
00:39:59.550 --> 00:40:01.529
I don't want to do that,
that's good how it is.
00:40:01.529 --> 00:40:02.899
Now, let's go through and
fire this guy up.
00:40:02.899 --> 00:40:06.460
So I'll say node
src/server/server.js.
00:40:06.460 --> 00:40:08.339
That's where the JavaScript file is.
00:40:08.339 --> 00:40:12.550
And so now I have a web server
that's listening on port 8843.
00:40:12.550 --> 00:40:17.974
Now that's good, because if I
come over here to my Outlook app,
00:40:17.974 --> 00:40:20.330
and I go log into my tenet.
00:40:20.330 --> 00:40:25.110
Let's go into incognito mode,
useful for hiding cookies and
00:40:25.110 --> 00:40:27.240
all that stuff, and another
thing that we won't talk about.
00:40:28.250 --> 00:40:30.470
So let's come over here to banking.
00:40:30.470 --> 00:40:31.340
Banking.
00:40:31.340 --> 00:40:33.021
That's what I'm at, right?
00:40:33.021 --> 00:40:34.116
>> [LAUGH]
00:40:34.116 --> 00:40:39.205
>>
andrewconnell@aci036503.onmicrosoft-
00:40:39.205 --> 00:40:39.940
.com.
00:40:39.940 --> 00:40:45.150
And then I'll say welcome$1.
00:40:45.150 --> 00:40:46.340
There we go.
Oh, they didn't like that.
00:40:46.340 --> 00:40:47.540
What didn't you like?
00:40:47.540 --> 00:40:50.210
That's not zero, it's an O.
00:40:50.210 --> 00:40:52.830
What was it again?
00:40:54.650 --> 00:40:56.290
I got a nice little
scare this morning.
00:40:56.290 --> 00:40:58.240
I'm getting ready to do my demo,
and what happens?
00:40:58.240 --> 00:40:59.030
I get this email.
00:40:59.030 --> 00:41:01.360
You have one day until
your tenant expires.
00:41:01.360 --> 00:41:04.950
I'm like, [LAUGH]
when did that come in?
00:41:04.950 --> 00:41:07.200
I was like, do I have a full day?
00:41:07.200 --> 00:41:08.790
And all the session was
going like this and
00:41:08.790 --> 00:41:12.240
I was talking to the 365 guys,
they said we want you to
00:41:12.240 --> 00:41:14.724
repeat the session tomorrow,
I'm like oh, [LAUGH].
00:41:14.724 --> 00:41:17.160
Can't do that, not ready.
00:41:17.160 --> 00:41:19.170
So here's what this one's gonna do.
00:41:19.170 --> 00:41:21.400
This one is gonna look at,
let's just say, this email.
00:41:21.400 --> 00:41:22.590
And I know this text is super small,
00:41:22.590 --> 00:41:25.160
that's not important, just gonna
make it, that's not gonna help.
00:41:25.160 --> 00:41:27.440
It's an HTML email, so actually
the font is supposed to be there,
00:41:27.440 --> 00:41:29.950
but the font id kind of set.
00:41:29.950 --> 00:41:33.000
But look just above the body of
the email, and below the name.
00:41:33.000 --> 00:41:36.210
See where I have this thing
here that says customer lookup.
00:41:36.210 --> 00:41:38.850
Now when I click this, what's
going to happen behind the scenes.
00:41:38.850 --> 00:41:41.180
Let's see if I can show
this at the same time.
00:41:41.180 --> 00:41:41.900
Come over here.
00:41:41.900 --> 00:41:43.090
Come over here.
00:41:43.090 --> 00:41:44.050
Watch over here.
00:41:44.050 --> 00:41:45.900
What you're gonna see is
over here on the node site,
00:41:45.900 --> 00:41:49.580
I'm gonna write out the request
I'm gonna make to my CRM system.
00:41:49.580 --> 00:41:52.420
Now I'm cheating a little bit here
because what I'm actually doing is
00:41:52.420 --> 00:41:58.440
I'm calling a sample restful O data
service at the odata.org website.
00:41:58.440 --> 00:42:01.560
Now the reason I have to have
a node.js site running for this,
00:42:01.560 --> 00:42:06.050
is because That sample web
service is HTTP, all right?.
00:42:06.050 --> 00:42:10.850
Office apps or
Office add-ins all run as websites,
00:42:10.850 --> 00:42:15.130
and those websites have to
be at an HTTPS endpoint.
00:42:15.130 --> 00:42:19.970
If I want to make a call out to
that other web service over HTTP,
00:42:19.970 --> 00:42:22.490
every browser's going to block that
request, because I'm in a secure
00:42:22.490 --> 00:42:25.290
environment switching over
to an unsecure environment.
00:42:25.290 --> 00:42:27.440
So I need a server side
proxy to go do that for me.
00:42:27.440 --> 00:42:29.110
That's what my node.js
site's going to be doing for
00:42:29.110 --> 00:42:31.100
me that we'll look
at in half a second.
00:42:31.100 --> 00:42:32.830
So I come over here and
click on customer lookup, and
00:42:32.830 --> 00:42:35.100
what it just did,
you see over there on the console,
00:42:35.100 --> 00:42:38.490
it just sent a bunch of information
over here on the left hand side.
00:42:38.490 --> 00:42:45.220
Made a request out to
the north wind website.
00:42:45.220 --> 00:42:47.320
And pulled out all the different
matches that it found and
00:42:47.320 --> 00:42:50.570
in this point it only found Pascale.
00:42:50.570 --> 00:42:53.750
This this that's running right here,
that's my node.js
00:42:53.750 --> 00:42:58.280
website that's running on my
laptop ,and it's an angular
00:42:58.280 --> 00:43:01.950
application that's using the Google
design language Material Design.
00:43:01.950 --> 00:43:04.143
So it's got these cool little
things popping up like this and
00:43:04.143 --> 00:43:04.660
I click on it.
00:43:04.660 --> 00:43:06.182
Nice little transition back and
forth.
00:43:06.182 --> 00:43:09.060
And so I got the detail, It's kind
of hard to see what's going on over
00:43:09.060 --> 00:43:10.580
here, but you can tell that
there's work going on.
00:43:12.520 --> 00:43:14.630
Back and forth,
I go over to this email over here,
00:43:14.630 --> 00:43:17.570
go to customer lookup and I've got
two people that show up this time.
00:43:17.570 --> 00:43:22.090
I've got Maria, John Doe and Ana,
and John Doe's not in here, so
00:43:22.090 --> 00:43:24.200
I only see two people showing up. Okay?
00:43:24.200 --> 00:43:26.010
So, that's all done in Node, so
00:43:26.010 --> 00:43:27.660
how does that actually work?
00:43:27.660 --> 00:43:29.040
Let's kill this guy then
we'll come over here and
00:43:29.040 --> 00:43:30.210
we'll kill this process.
00:43:31.830 --> 00:43:33.160
So how does this work?
00:43:33.160 --> 00:43:39.350
Well over here in my project here,
underneath this Node, O365.
00:43:39.350 --> 00:43:43.650
I come over here and
inside of a server,
00:43:43.650 --> 00:43:45.720
I'm gonna show you the typescript
and not the JavaScript.
00:43:45.720 --> 00:43:47.130
You guys in the back,
can you see it okay?
00:43:47.130 --> 00:43:48.510
Is that too small?
00:43:49.620 --> 00:43:50.120
Is it good?
00:43:51.270 --> 00:43:52.280
Yes, it's good?
00:43:52.280 --> 00:43:53.400
I love it, you get thumbs up.
00:43:53.400 --> 00:43:54.560
It's like, bump the font up.
00:43:54.560 --> 00:43:55.625
No, it's good. Which.
00:43:55.625 --> 00:43:57.540
>> [LAUGH]
00:43:57.540 --> 00:43:58.130
>> Which one is it?
00:43:58.130 --> 00:43:58.860
I'm like, it's okay.
00:43:58.860 --> 00:44:00.940
I'm like, there's a big light,
I can't see that.
00:44:00.940 --> 00:44:01.820
Okay, so they say it's good.
00:44:03.310 --> 00:44:05.730
So here's what,
I'm standing up a simple website.
00:44:05.730 --> 00:44:07.320
Now this is super, super simple.
00:44:07.320 --> 00:44:08.200
Okay?
00:44:08.200 --> 00:44:08.930
So here's what I'm doing.
00:44:08.930 --> 00:44:12.980
Up at the very top here,
I'm doing a bunch of imports, and
00:44:12.980 --> 00:44:15.800
adding references, doing
a bunch of required statements.
00:44:15.800 --> 00:44:18.370
For those you .net guys,
what is this?
00:44:18.370 --> 00:44:20.170
This is kind of like
name space references.
00:44:20.170 --> 00:44:22.550
I'm importing different
things into this file okay?
00:44:22.550 --> 00:44:25.170
Or like the using statements
we have at the very top.
00:44:25.170 --> 00:44:27.760
Let's create an instance
of our express web server.
00:44:27.760 --> 00:44:30.200
And then I'm gonna go say
to the Handlebars piece.
00:44:30.200 --> 00:44:32.940
I'm gonna say where are all
of your partial views.
00:44:32.940 --> 00:44:35.740
They're in a sub folder within
the current location of
00:44:35.740 --> 00:44:39.130
where the application is running
in the slash views folder, and
00:44:39.130 --> 00:44:40.090
you see that right over here.
00:44:40.090 --> 00:44:42.260
I'll show you that in a second.
00:44:42.260 --> 00:44:45.180
I'm going to then tell express
that the view engine he's going
00:44:45.180 --> 00:44:46.790
to use is Handlebars, or HBS,
00:44:46.790 --> 00:44:49.470
and I'm also going to tell
him where all his views are. Right?
00:44:49.470 --> 00:44:52.280
It's kind of have to say it twice.
00:44:52.280 --> 00:44:54.635
Next up, I'm going to set up
a bunch of static routes.
00:44:54.635 --> 00:44:56.200
So,when you go to slash public,
00:44:56.200 --> 00:45:01.170
that's really going to map to
something, a folder called public.
00:45:01.170 --> 00:45:03.850
All right.
When you go to public/vendor,
00:45:03.850 --> 00:45:06.740
that's gonna map to a folder over
here called Bower Components.
00:45:06.740 --> 00:45:09.600
Bower is another packaging system,
because we need yet
00:45:09.600 --> 00:45:13.580
another one, that's good for
client side libraries.
00:45:13.580 --> 00:45:15.990
So we use NuGet for
everything in dot net.
00:45:15.990 --> 00:45:19.240
What you're seeing is in Visual
Studio 2015, they're adding support
00:45:19.240 --> 00:45:24.070
for things like Bower and Gulp and
Grunt and MPN and all that stuff.
00:45:24.070 --> 00:45:27.120
Right inside of Visual Studio 2015,
because they see that's where
00:45:27.120 --> 00:45:29.280
a big community of open
source developers is working.
00:45:31.110 --> 00:45:32.210
Scroll down a little bit farther,
00:45:32.210 --> 00:45:34.720
this is where it's gonna load my
controllers and go initialize them,
00:45:34.720 --> 00:45:36.310
we'll come back to that in a minute.
00:45:36.310 --> 00:45:40.240
And then, I need to be able
to stand up an HTTPS site, so
00:45:40.240 --> 00:45:43.210
what I'm doing here is I'm
creating some configuration stuff.
00:45:43.210 --> 00:45:45.790
Loading in a public and
a private cert.
00:45:45.790 --> 00:45:50.040
And then I'm starting up the server
on line 39 by https.createserver,
00:45:50.040 --> 00:45:55.430
here are the options,
here's the app, the express site.
00:45:55.430 --> 00:45:58.490
And then I'm gonna say .listen, and
00:45:58.490 --> 00:46:00.660
that's gonna listen
on a specific port.
00:46:00.660 --> 00:46:03.150
Now that part right there,
as you see,
00:46:03.150 --> 00:46:04.730
about me doing the stuff
with the certificates.
00:46:07.190 --> 00:46:11.610
If you've never worked
on OSX on a Mac,
00:46:11.610 --> 00:46:15.350
you have no idea how nice
it is in Visual Studio.
00:46:15.350 --> 00:46:18.630
That when you first install
Visual Studio the very first time on
00:46:18.630 --> 00:46:23.080
your machine, and you want to go run
a website and you told you wanted
00:46:23.080 --> 00:46:28.390
HTTPS, and it asks you, do you want
me to go create a self sign cert and
00:46:28.390 --> 00:46:30.550
have your machine trust it,
so it can work?
00:46:30.550 --> 00:46:32.300
Have you guys seen that before?
00:46:32.300 --> 00:46:32.870
Holy crap,
00:46:32.870 --> 00:46:36.725
you have no idea how big that yes
button really is on your screen.
00:46:36.725 --> 00:46:40.300
[LAUGH]
The get out repo that you guys can
00:46:40.300 --> 00:46:40.900
take a look at here,
00:46:40.900 --> 00:46:45.210
you can see how much work it was to
get this thing actually running.
00:46:45.210 --> 00:46:48.060
I think, yeah, it's right down here,
the self sign cert.
00:46:48.060 --> 00:46:49.240
Let me scroll to the bottom here.
00:46:49.240 --> 00:46:51.150
And you can’t make this stuff up.
00:46:51.150 --> 00:46:52.330
There’s actually a part
where you go in,
00:46:52.330 --> 00:46:55.680
it says when you get to the dialog
that comes up, click Always Trust.
00:46:55.680 --> 00:47:00.050
And then after you do that,
after the localhost thing shows up,
00:47:00.050 --> 00:47:04.220
you then save it, come right back
in to the exact same thing you said
00:47:04.220 --> 00:47:06.750
always trust, and
then say Always Trust it again.
00:47:06.750 --> 00:47:08.920
Because the first time didn’t
really trust all of it.
00:47:08.920 --> 00:47:10.143
It just trust some of it.
00:47:10.143 --> 00:47:10.643
>> [LAUGH]
00:47:10.643 --> 00:47:12.531
>>
>> And I'm like, man I love
00:47:12.531 --> 00:47:14.151
my Macbook Pro but I'm like, what?
Really?
00:47:14.151 --> 00:47:15.500
Who's the guy that made
00:47:15.500 --> 00:47:16.530
that decision? Right?
00:47:16.530 --> 00:47:17.990
So, I don't know.
00:47:17.990 --> 00:47:21.550
Anyway, so I can't tell you how
much of a big deal that is.
00:47:21.550 --> 00:47:22.890
So now we got a web
server that's running.
00:47:22.890 --> 00:47:24.550
Let's come back over here and
let's look at our controllers,
00:47:24.550 --> 00:47:26.140
how everything got loaded up.
00:47:26.140 --> 00:47:30.110
Over here on my controllers part,
I have an index.ts, so
00:47:30.110 --> 00:47:33.190
the way it works with node is that
if you just look up here at the top
00:47:33.190 --> 00:47:34.830
>> I've got my controller factory,
00:47:34.830 --> 00:47:38.660
and notice I'm pointing
to ./controllers/index
00:47:38.660 --> 00:47:42.450
that's looking for
a JavaScript file called index.js.
00:47:42.450 --> 00:47:44.620
So, here's the type
script equivalent of it.
00:47:44.620 --> 00:47:46.740
I'm pulling in a home controller,
an API controller and
00:47:46.740 --> 00:47:48.650
then I'm creating a class.
00:47:48.650 --> 00:47:52.300
Now, I love using type script,
because as somebody who's
00:47:52.300 --> 00:47:55.740
traditionally a server side
developer with strong typing.
00:47:55.740 --> 00:47:58.660
I had a little of a hard time
moving over to the JavaScript
00:47:58.660 --> 00:47:59.300
world initially.
00:47:59.300 --> 00:48:00.740
Let me ask you guys this.
00:48:00.740 --> 00:48:03.530
I love asking this question
when I do sessions like this.
00:48:03.530 --> 00:48:06.760
How many of you consider yourselves
strong JavaScript developers?
00:48:06.760 --> 00:48:08.710
And I've got another question
coming in a second, so be honest.
00:48:08.710 --> 00:48:11.320
How many of you consider yourselves
strong JavaScript developers?
00:48:12.870 --> 00:48:13.840
Okay.
00:48:13.840 --> 00:48:16.770
How many of you put yourself in the
same bucket that I put myself, which
00:48:16.770 --> 00:48:20.000
is I've just been hacking my way
through this JavaScript thing for
00:48:20.000 --> 00:48:20.670
the last decade.
00:48:20.670 --> 00:48:23.810
I see a cool drop down on a side,
view source, pull that thing down,
00:48:23.810 --> 00:48:24.500
put it in.
00:48:24.500 --> 00:48:25.260
It's not working.
00:48:25.260 --> 00:48:26.925
Let's add some alerts, right?
00:48:26.925 --> 00:48:31.005
>> [LAUGH]
>> You laugh because you've been
00:48:31.005 --> 00:48:31.584
there.
00:48:31.584 --> 00:48:36.510
[LAUGH] All right,
so anyway, I really
00:48:36.510 --> 00:48:39.810
like type script because it allows
me to write the c sharp style code,
00:48:39.810 --> 00:48:41.840
the strongly typing code
that I'm used to writing.
00:48:41.840 --> 00:48:44.240
Classes and tele sense, and
all that type of stuff.
00:48:44.240 --> 00:48:45.600
I like writing it that way.
00:48:45.600 --> 00:48:47.530
So if you're not familiar
with type script,
00:48:47.530 --> 00:48:49.340
you can at least follow along
with what the code is doing.
00:48:49.340 --> 00:48:51.950
It compiles down the JavaScripts,
like what does it look like?
00:48:51.950 --> 00:48:54.310
It looks like that.
00:48:54.310 --> 00:48:55.240
Oh, okay.
00:48:55.240 --> 00:48:58.540
Right here, I have an init
function on my controller,
00:48:58.540 --> 00:49:01.085
and you saw where I called, after
I created the controllers in that
00:49:01.085 --> 00:49:05.730
server.ts file,
I then said controllerfactory.init.
00:49:05.730 --> 00:49:08.100
What that did, is that created two
instances of the home controller,
00:49:08.100 --> 00:49:09.530
and the API controller.
00:49:09.530 --> 00:49:11.200
The home controller,
really doesn't do anything.
00:49:11.200 --> 00:49:13.700
But you can see what
the routes look like.
00:49:13.700 --> 00:49:15.980
Let's jump over to the one that
actually has some logic in it,
00:49:15.980 --> 00:49:17.750
the API controller.
00:49:17.750 --> 00:49:21.170
What this guy does right here,
it shows the little red squiggly.
00:49:21.170 --> 00:49:23.070
It's a good thing
the thing actually ran.
00:49:23.070 --> 00:49:25.990
So over here at my API controller
00:49:25.990 --> 00:49:28.330
I have a constructor
that's getting passed in.
00:49:28.330 --> 00:49:32.010
The Express web application
I'm gonna call loadRoutes.
00:49:32.010 --> 00:49:32.860
What loadRoutes
00:49:32.860 --> 00:49:35.460
is gonna do is it's gonna define
a couple different routes.
00:49:35.460 --> 00:49:38.460
If I go to
/api,/customer/lookup by name.
00:49:38.460 --> 00:49:41.670
And I pass in some list of names.
00:49:41.670 --> 00:49:44.650
It's gonna call this
function right here, and
00:49:44.650 --> 00:49:48.340
if I scroll down to that,
here's the function right here.
00:49:48.340 --> 00:49:51.310
My text is big enough isn't it?
00:49:52.430 --> 00:49:55.080
You guys, it is okay right,
in the way back?
00:49:55.080 --> 00:49:56.420
Bigger.
00:49:56.420 --> 00:49:57.486
Somebody yell out please.
00:49:57.486 --> 00:49:58.586
>> Bigger.
00:49:58.586 --> 00:49:59.437
>> Oh.
Better?
00:49:59.437 --> 00:50:00.973
>> Getting there.
00:50:00.973 --> 00:50:01.561
>> Oh.
00:50:04.041 --> 00:50:04.780
Everybody okay?
00:50:04.780 --> 00:50:09.220
>> [LAUGH]
>> There, is that good?
00:50:09.220 --> 00:50:12.100
Okay thank you.
00:50:12.100 --> 00:50:16.110
So, what this guy is going to do
here, is he is going to go in,
00:50:16.110 --> 00:50:20.550
he's going to split up all the
stuff, pass everything in as a CSV.
00:50:20.550 --> 00:50:24.773
I'm gonna run through all of that,
I'm building up an O data query for
00:50:24.773 --> 00:50:26.190
the filter.
00:50:26.190 --> 00:50:27.650
Here I'm gonna build the query.
00:50:27.650 --> 00:50:29.720
There's the endpoint we're gonna do,
go to this Northwind service,
00:50:29.720 --> 00:50:30.860
select these different fields.
00:50:30.860 --> 00:50:35.100
There's the filter I'm gonna add,
creating my HTTP request options.
00:50:35.100 --> 00:50:36.470
Then I'm gonna make the request.
00:50:36.470 --> 00:50:37.580
This is kind of freaky here.
00:50:37.580 --> 00:50:40.730
There's a library called request or
a package called request.
00:50:40.730 --> 00:50:42.850
So you make a request
using the request library.
00:50:42.850 --> 00:50:45.230
Right, they could have
named it something better.
00:50:45.230 --> 00:50:46.750
But anyway, you call request.
00:50:46.750 --> 00:50:50.419
You pass in where are you going,
what options you want to pass in,
00:50:50.419 --> 00:50:52.240
and then here's the call back.
00:50:52.240 --> 00:50:54.890
If there's an error pass in the
error, if there's a response pass in
00:50:54.890 --> 00:50:56.870
the response if there's a body pass,
in the body.
00:50:56.870 --> 00:51:01.303
And in there I just take
the body and I look at the EXP
00:51:01.303 --> 00:51:06.479
response that's the express
response object I just say,
00:51:06.479 --> 00:51:11.470
send back the body I got from
the Northsind web service.
00:51:11.470 --> 00:51:16.580
Send that response right on back
to the Angular application, okay?
00:51:16.580 --> 00:51:21.565
Now you've seen how to go through
in the build and how to use Node.js
00:51:21.565 --> 00:51:25.600
to build an angular app or
to build an angular REST API.
00:51:25.600 --> 00:51:30.640
But you also have, we also have
this thing for doing, where is it?
00:51:30.640 --> 00:51:32.130
Is that it?
00:51:32.130 --> 00:51:32.690
No, not app.
00:51:32.690 --> 00:51:34.350
Oh, we also had views.
00:51:34.350 --> 00:51:37.220
Because in my views, remember when
my app loads I need to be able to
00:51:37.220 --> 00:51:38.960
load an Angular application.
00:51:38.960 --> 00:51:41.910
So when I went to,
where's my controller for home.
00:51:41.910 --> 00:51:42.970
If you remember,
00:51:42.970 --> 00:51:47.290
if I just go to /, then that's
gonna do a response.render,
00:51:47.290 --> 00:51:52.320
passing in the view home/index,
and I can pass in an object
00:51:52.320 --> 00:51:54.740
that is essentially my view model
that'll get bound to the view.
00:51:56.820 --> 00:51:58.850
That's gonna look inside the view's
folder because, remember,
00:51:58.850 --> 00:52:00.870
I told that's where my
partial views were.
00:52:00.870 --> 00:52:04.760
The layout.hbs is kinda like
your shared layout that
00:52:04.760 --> 00:52:08.380
you have at ASP.NBC or
your master page.
00:52:08.380 --> 00:52:10.430
And the body of my page
is gonna go right there.
00:52:10.430 --> 00:52:12.200
That's where the view's
actually gonna get injected.
00:52:13.440 --> 00:52:17.810
If I go look at this
view right here,
00:52:17.810 --> 00:52:22.110
all I'm doing is is just adding
in a div that's got the angular
00:52:22.110 --> 00:52:25.802
view directive where my actual
code's gonna get injected into.
00:52:25.802 --> 00:52:27.400
I say wanna do a nice
little shuffle animation,
00:52:27.400 --> 00:52:29.770
that's how I'm getting the cool
little transitions going.
00:52:29.770 --> 00:52:32.956
And then I'm loading up all
the code related to my application,
00:52:32.956 --> 00:52:33.550
all right.
00:52:33.550 --> 00:52:35.359
Now, I'm not going to try
to teach Angular here,
00:52:35.359 --> 00:52:36.447
it's going to be a fire hose.
00:52:36.447 --> 00:52:38.483
It's like I'm trying
to teach Node.js,
00:52:38.483 --> 00:52:40.291
I want to just whet your appetite,
and
00:52:40.291 --> 00:52:43.130
see if you might be interested
in learning more about this.
00:52:43.130 --> 00:52:45.698
I've got some links at the end.
00:52:45.698 --> 00:52:47.080
So my app is going to load.
00:52:47.080 --> 00:52:51.024
Now one thing for those of you who
have done Angular applications,
00:52:51.024 --> 00:52:55.250
you're noticing one thing that's
missing right here on the screen and
00:52:55.250 --> 00:52:56.464
it's on line 27.
00:52:56.464 --> 00:53:00.293
With this, you usually have
a directive on here to tell Angular
00:53:00.293 --> 00:53:03.114
where would the load
actually initialize, or
00:53:03.114 --> 00:53:04.790
where would it be bound to.
00:53:04.790 --> 00:53:08.607
And it would say something
like data-ng-app= and
00:53:08.607 --> 00:53:11.430
then it would be name of your app.
00:53:11.430 --> 00:53:12.670
I don't have that. Why?
00:53:12.670 --> 00:53:13.634
When you're working
00:53:13.634 --> 00:53:16.922
with Office add-ins, there's a
JavaScript file that you reference.
00:53:16.922 --> 00:53:20.870
That JavaScript file comes from
Microsoft or comes from 365,
00:53:20.870 --> 00:53:24.250
called Office JS, and it does
all the communication between
00:53:24.250 --> 00:53:26.960
the hosting app and the child app.
00:53:26.960 --> 00:53:29.690
So that we can actually read
the body of the email, or
00:53:29.690 --> 00:53:33.340
we can put some stuff in the
content, in the body of the email.
00:53:33.340 --> 00:53:37.050
Or if it's Word, we can write to the
document or read what's selected.
00:53:37.050 --> 00:53:41.620
Or if it's Excel, we can read and
write to the different cells.
00:53:41.620 --> 00:53:43.960
That's all done by OfficeJS.
00:53:43.960 --> 00:53:45.550
Well, there's a little
trick with Office JS.
00:53:45.550 --> 00:53:49.060
It's part one of the rules
that Microsoft tells you.
00:53:49.060 --> 00:53:51.990
Over here in the module,
one of the things that you do,
00:53:51.990 --> 00:53:53.840
let me scroll down here.
00:53:53.840 --> 00:53:56.370
There's a function down
here called initialize and
00:53:56.370 --> 00:53:59.450
it's coming from the Office object
that is defined by Office JS.
00:54:00.650 --> 00:54:03.910
The rules state that
you have to have
00:54:04.940 --> 00:54:08.010
a function called initialize and
it has to be called
00:54:08.010 --> 00:54:13.410
within five seconds of
creating the office add in.
00:54:13.410 --> 00:54:16.730
If it's not there,
then what happens is,
00:54:16.730 --> 00:54:20.710
is that the hosting office app shows
a nice little friendly yellow error
00:54:20.710 --> 00:54:23.010
message that says the app
is not available right now.
00:54:23.010 --> 00:54:26.010
So your customer doesn't feel
like nothing's happening.
00:54:26.010 --> 00:54:28.310
They know that the app broke but
they at least don't have to wait,
00:54:28.310 --> 00:54:29.400
they're not waiting around for
00:54:29.400 --> 00:54:31.858
something to happen
if that's not there.
00:54:31.858 --> 00:54:34.448
Now that initialize
function is not there but
00:54:34.448 --> 00:54:37.243
it's called by OfficeJS
within five seconds and
00:54:37.243 --> 00:54:40.595
if it's not there after five
seconds it throws the error.
00:54:40.595 --> 00:54:42.454
So your job is to put it in there.
00:54:42.454 --> 00:54:45.100
And here's the trick.
00:54:45.100 --> 00:54:50.278
Angular, when it does this
binding of the app to the page,
00:54:50.278 --> 00:54:55.570
it clobbers OfficeJS and
OfficeJS also clobbers Angular.
00:54:55.570 --> 00:54:59.690
So I don't have
a data-ng-app directive.
00:54:59.690 --> 00:55:02.380
Instead, I tell
Office to initialize.
00:55:02.380 --> 00:55:05.492
Then I do the same bootstrapping
of my Angular app, but
00:55:05.492 --> 00:55:08.740
I do it programatically by
saying angular.bootstrap,
00:55:08.740 --> 00:55:11.582
go find an element on
the page called container and
00:55:11.582 --> 00:55:13.560
bound the app called outlookApp.
00:55:13.560 --> 00:55:20.210
You saw in my view,
clicking too much, where is it?
00:55:20.210 --> 00:55:24.550
Here, there's container right there,
okay?
00:55:25.570 --> 00:55:27.670
So you see how that app is
actually getting rendered there.
00:55:27.670 --> 00:55:31.194
Now, instead of showing you all
the Angular stuff and this guy and
00:55:31.194 --> 00:55:34.909
how this guy works, let me jump to
another demo because the last demo I
00:55:34.909 --> 00:55:36.740
have is much more Angular -ish.
00:55:36.740 --> 00:55:40.150
So let me jump to the next one to
show you a little something else
00:55:40.150 --> 00:55:41.600
that you can do with this.
00:55:41.600 --> 00:55:43.260
Let's see.
00:55:43.260 --> 00:55:43.927
So, it's not running,
that's not running.
00:55:43.927 --> 00:55:46.570
So which one am I in,
am I in the right spot?
00:55:46.570 --> 00:55:48.320
This one's gonna be web.
00:55:48.320 --> 00:55:50.615
Okay, so for those of you
who were in my theater talk,
00:55:50.615 --> 00:55:52.962
where I showed how to get
Node running on Raspberry Pi,
00:55:52.962 --> 00:55:54.760
this is the website
that we actually ran.
00:55:54.760 --> 00:56:01.441
So again, let me come back over
here to my terminal window and
00:56:01.441 --> 00:56:06.812
let me do gulp
compile-server-type script and
00:56:06.812 --> 00:56:11.138
gulp compile-client-type script.
00:56:18.100 --> 00:56:20.040
Is it not in there?
00:56:20.040 --> 00:56:20.980
Oh no, there is none.
00:56:20.980 --> 00:56:22.699
That's right, because this
is only a server side app.
00:56:23.800 --> 00:56:24.590
Okay.
00:56:24.590 --> 00:56:25.730
So in this one,
00:56:25.730 --> 00:56:31.180
this is basically the same thing
that we just looked at a second ago.
00:56:31.180 --> 00:56:35.797
The difference though is that what's
special about this application is
00:56:35.797 --> 00:56:39.427
that this one is gonna require
us to use Azure AD to log in to
00:56:39.427 --> 00:56:42.470
our application to talk
to Office 365 APIs.
00:56:42.470 --> 00:56:49.700
So let's go run this guy, so
I'll do node src/server/server.js.
00:56:49.700 --> 00:56:55.636
He's going to fire up on port
8000 and let's not use that one,
00:56:55.636 --> 00:57:00.520
let's use that one and
go to http local host 3000.
00:57:00.520 --> 00:57:04.437
And here's the same application that
you saw on my theater talk to where
00:57:04.437 --> 00:57:08.156
I can go through it and click around
to this guy if I click on the home,
00:57:08.156 --> 00:57:09.940
let's just put this over here.
00:57:09.940 --> 00:57:11.766
I don't need all of
this real estate,
00:57:11.766 --> 00:57:13.430
let's move that all the way over.
00:57:13.430 --> 00:57:14.270
I can go to home,
00:57:14.270 --> 00:57:17.400
you can see the requests
are getting logged over here.
00:57:17.400 --> 00:57:19.960
If I clicked login, that's going
to take me to Azure AD to login.
00:57:19.960 --> 00:57:23.950
So I come over here and click
through this, welcome dollar one.
00:57:23.950 --> 00:57:26.250
We're having trouble signing you in.
00:57:26.250 --> 00:57:28.190
Oh, yeah, it is my password, right?
00:57:28.190 --> 00:57:37.440
Huh, that was really dumb. Why?
00:57:37.440 --> 00:57:38.898
Hold on, hold on, hold on.
00:57:38.898 --> 00:57:42.720
Reply address ADAuth
doesn't match this.
00:57:42.720 --> 00:57:43.280
Yes it does.
00:57:43.280 --> 00:57:44.990
Oh, let's come back over here.
00:57:44.990 --> 00:57:45.930
Let's go to Manage.
00:57:47.990 --> 00:57:51.580
So this is the thing, you get
these error messages like sorry,
00:57:51.580 --> 00:57:52.690
we're having trouble signing you in.
00:57:52.690 --> 00:57:55.300
Which is like, oh, that's just
like that much better than
00:57:55.300 --> 00:57:57.155
a correlation ID,
right, in SharePoint?
00:57:57.155 --> 00:57:59.460
>> [LAUGH]
>> Like, oh you Azure guys,
00:57:59.460 --> 00:58:01.280
at least you didn't show me the ID.
00:58:01.280 --> 00:58:02.520
But if I scroll down here and
look at the bottom,
00:58:02.520 --> 00:58:04.060
it actually tells me exactly
what the problem is.
00:58:04.060 --> 00:58:07.010
It says the reply address of this
does not match the reply address
00:58:07.010 --> 00:58:08.710
configured in the application.
00:58:08.710 --> 00:58:10.220
Oh, wait a minute.
00:58:10.220 --> 00:58:13.570
So if I go over here to my
Azure management portal.
00:58:19.730 --> 00:58:20.230
And we watch the spinner.
00:58:24.330 --> 00:58:26.885
This makes it go faster.
00:58:26.885 --> 00:58:30.990
>> [LAUGH]
>> Go, go, come on.
00:58:30.990 --> 00:58:36.630
And you want your press time today,
don't you?
00:58:36.630 --> 00:58:39.050
15 minutes of fame.
00:58:39.050 --> 00:58:40.100
Where is it?
This is gonna be,
00:58:40.100 --> 00:58:41.590
no, this guy, and I bet you.
00:58:41.590 --> 00:58:42.190
Oh, look at that.
00:58:42.190 --> 00:58:44.200
I'm going to an IP address because
that's the IP address of my
00:58:44.200 --> 00:58:44.960
Raspberry Pi.
00:58:44.960 --> 00:58:50.265
So let's switch it out and
this'll be local host : 8000,
00:58:50.265 --> 00:58:56.685
and then the reply address will be
local host : 8000 and I'll hit Save.
00:58:56.685 --> 00:59:00.785
>> [INAUDIBLE]
>> What, wait what?
00:59:00.785 --> 00:59:04.910
>> [INAUDIBLE]
>> There's 3000, there's 3000,
00:59:04.910 --> 00:59:05.785
there's 3000.
00:59:05.785 --> 00:59:07.457
>> [INAUDIBLE]
>> I said 8,000?
00:59:07.457 --> 00:59:08.495
Do as I do, don't do as I say.
00:59:08.495 --> 00:59:10.819
>> [LAUGH]
>> Yeah you are paying attention,
00:59:10.819 --> 00:59:12.130
I appreciate that.
00:59:12.130 --> 00:59:12.950
Looking out for me, I need it.
00:59:12.950 --> 00:59:16.410
All right so let's back up again,
let's go log in.
00:59:18.790 --> 00:59:20.020
Oh and now I'm logged in.
00:59:20.020 --> 00:59:22.210
The reason I did that was because
I was logged in over here.
00:59:22.210 --> 00:59:22.950
So let's sign out.
00:59:26.540 --> 00:59:28.565
Come back in and
now it's logged back in.
00:59:28.565 --> 00:59:31.520
Ta-Da.
00:59:31.520 --> 00:59:34.050
It's okay, you got my password.
00:59:34.050 --> 00:59:34.895
It expires tomorrow so good luck.
00:59:34.895 --> 00:59:36.430
>> [LAUGH]
>> Anyway, so.
00:59:36.430 --> 00:59:39.490
[LAUGH] There's no data in there,
it's just demo stuff.
00:59:39.490 --> 00:59:41.560
This is my last session so I'm good.
00:59:41.560 --> 00:59:43.200
Have fun with the demos.
00:59:43.200 --> 00:59:46.090
So this guy here log in,
I go to the discovery service,
00:59:46.090 --> 00:59:48.540
I can view all the stuff come for
the discovery service.
00:59:48.540 --> 00:59:52.930
These are live Office 365
API discovery service calls.
00:59:52.930 --> 00:59:54.180
I go back to discovery service.
00:59:54.180 --> 00:59:57.754
This one showed everything,
didn't need any authentication but
00:59:57.754 --> 01:00:01.470
over here this request, to see all
the servers that I have access to.
01:00:01.470 --> 01:00:05.048
This one needed authentication to
show me all the different services
01:00:05.048 --> 01:00:07.090
that my app had been
granted access to.
01:00:07.090 --> 01:00:11.409
Notice that it did not have
a credential in the session cache.
01:00:11.409 --> 01:00:14.240
Meaning, it didn't have
an access token for
01:00:14.240 --> 01:00:17.816
the discovery service before
it made the request but so,
01:00:17.816 --> 01:00:22.400
it sent me over to the login page
which redirected me to Azure AD.
01:00:22.400 --> 01:00:23.440
Azure AD.
01:00:23.440 --> 01:00:25.050
I was still authenticated and
it says, oh.
01:00:25.050 --> 01:00:26.620
I'll give you an access token for
that resource.
01:00:26.620 --> 01:00:28.040
You have permissions to it.
01:00:28.040 --> 01:00:31.090
Redirected back to my /auth
page on my application,
01:00:31.090 --> 01:00:34.980
which handled getting the keys or
the access token and saving it.
01:00:34.980 --> 01:00:37.780
Then, it redirected me back
to my My Services pages,
01:00:37.780 --> 01:00:40.560
which found the credential
right here, in session cache.
01:00:40.560 --> 01:00:43.300
The reason why it comes after is
because the log messages happen
01:00:43.300 --> 01:00:44.960
when the page gets rendered.
01:00:44.960 --> 01:00:48.660
Before the page was rendered,
I was looking for the credential.
01:00:48.660 --> 01:00:50.120
So, how do all that stuff work?
01:00:50.120 --> 01:00:51.900
How does the authentication
stuff work?
01:00:51.900 --> 01:00:55.390
Let's come back over here,
to our application.
01:00:55.390 --> 01:00:57.220
You've seen, like in a Node.js site.
01:00:57.220 --> 01:00:58.010
You've seen some stuff.
01:00:58.010 --> 01:00:59.530
There's some things in here
that are kinda interesting.
01:00:59.530 --> 01:01:01.080
Where I'm using sessions and
01:01:01.080 --> 01:01:04.070
I'm storing all the session
values on the file system.
01:01:04.070 --> 01:01:07.590
Over here,
there's a folder called sessions.
01:01:07.590 --> 01:01:08.290
Now, you can see.
01:01:08.290 --> 01:01:13.280
There's the access token for
the Azure AD graph.
01:01:13.280 --> 01:01:16.770
Here's the one for the discovery
service that we'd just gotten.
01:01:16.770 --> 01:01:17.670
Here's my access token.
01:01:17.670 --> 01:01:21.780
There's a password you can write
down, real quick, if you want to.
01:01:21.780 --> 01:01:25.270
If I come back over here,
how's that happening?
01:01:25.270 --> 01:01:29.070
I have a controller here
called authController.
01:01:29.070 --> 01:01:34.250
Inside of the auth folder, I've
also got a thing called azureAD.
01:01:34.250 --> 01:01:37.345
azureAD has a class inside of it and
01:01:37.345 --> 01:01:42.525
this class knows how to go
through and build up things like.
01:01:42.525 --> 01:01:45.265
What endpoint do I use to go
get an authorization code?
01:01:45.265 --> 01:01:47.975
What endpoint are you use to go take
the code that I got back from that
01:01:47.975 --> 01:01:52.085
authorization code request
to get an access token?
01:01:52.085 --> 01:01:53.860
I need to go,
do all of that kinda stuff.
01:01:53.860 --> 01:01:55.765
That's basically, a utility class.
01:01:55.765 --> 01:01:59.230
The big thing, the important part
is down here in the authController.
01:01:59.230 --> 01:02:02.498
Inside this authController,
01:02:02.498 --> 01:02:08.420
this is the one that's mapping
to the /auth on my site.
01:02:08.420 --> 01:02:09.689
Here, I've got a login.
01:02:09.689 --> 01:02:12.730
I've got an auth and
I've got a logout.
01:02:12.730 --> 01:02:13.710
What happens on login?
01:02:13.710 --> 01:02:15.180
It has handleLoginGet.
01:02:15.180 --> 01:02:17.440
What does that guy do?
01:02:17.440 --> 01:02:19.270
He creates an instance of that guy.
01:02:19.270 --> 01:02:20.735
He goes and builds up the endpoint.
01:02:21.970 --> 01:02:22.680
He's going to.
01:02:23.950 --> 01:02:25.940
Let's see.
He saves the state because you put
01:02:25.940 --> 01:02:29.200
a state value on the query
string and what that does.
01:02:29.200 --> 01:02:31.140
When you actually go to
authenticate with Azure,
01:02:31.140 --> 01:02:33.540
the state goes with the request.
01:02:33.540 --> 01:02:36.090
When it comes back around,
back to your application,
01:02:36.090 --> 01:02:39.060
the same state is included in
the post that you get from Azure.
01:02:39.060 --> 01:02:41.034
You can compare what
you sent Azure and
01:02:41.034 --> 01:02:44.645
what you got back to protect against
cross-site forgery requests.
01:02:44.645 --> 01:02:46.190
Whatever that is.
01:02:46.190 --> 01:02:47.900
It protects against that one little.
01:02:47.900 --> 01:02:49.640
That somebody didn't try and
hack your site.
01:02:49.640 --> 01:02:53.140
That the request is coming back
from a process you started.
01:02:54.250 --> 01:02:55.040
This thing right here.
01:02:55.040 --> 01:02:55.810
I'm just checking to see,
01:02:55.810 --> 01:02:58.760
on the query string,
if there's a value called redir.
01:02:58.760 --> 01:03:00.610
If there is then, I know that.
01:03:00.610 --> 01:03:03.600
Once they authenticate send
them directly to another page.
01:03:03.600 --> 01:03:06.625
You saw that when I got the My
Services page to see a list of all
01:03:06.625 --> 01:03:09.990
the services and the discovery
services that I have access to.
01:03:13.140 --> 01:03:17.770
He goes through, saves that in
a cookie, saves the resource ID and
01:03:17.770 --> 01:03:19.620
then, redirects me over to Azure.
01:03:19.620 --> 01:03:21.500
Now, handle the AuthGet.
01:03:21.500 --> 01:03:24.490
This is the request that
comes back from Azure.
01:03:24.490 --> 01:03:25.550
Here, I'm checking to see.
01:03:25.550 --> 01:03:28.880
Is the state that we saved in our
cookie that we sent Azure the same
01:03:28.880 --> 01:03:31.080
as the one that Azure sent us back?
01:03:31.080 --> 01:03:33.090
If it isn't then, we say.
01:03:33.090 --> 01:03:35.960
There's a possible CSFR.
01:03:35.960 --> 01:03:37.420
If anybody wants to help us.
01:03:37.420 --> 01:03:38.330
An open source project.
01:03:38.330 --> 01:03:38.990
Go ahead and jump in.
01:03:40.220 --> 01:03:41.410
Right?
01:03:41.410 --> 01:03:45.222
Over here, let's build up
the authority and get the context.
01:03:45.222 --> 01:03:52.170
If you've done anything with the AD
AL library from the Azure AD team.
01:03:52.170 --> 01:03:56.370
Where you can go through and do all
the authentication with Azure AD.
01:03:56.370 --> 01:03:59.100
There's a Node version of
it that I'm using here.
01:03:59.100 --> 01:04:02.424
Up here, you'll see,
I'm actually importing in adal-node.
01:04:02.424 --> 01:04:05.770
What the Azure AD team has created
and provides is a Node package.
01:04:05.770 --> 01:04:10.690
That's for doing Azure Active
Directory authentication in Node.
01:04:10.690 --> 01:04:13.570
There's another option that some
of you that have done Node before
01:04:13.570 --> 01:04:15.030
called Passport.
01:04:15.030 --> 01:04:19.270
It's a very extensible
authentication
01:04:19.270 --> 01:04:21.610
library in stack that you
can take advantage of.
01:04:21.610 --> 01:04:23.430
They also have support for
that as well.
01:04:23.430 --> 01:04:26.580
I find that to be a little
more cumbersome or
01:04:26.580 --> 01:04:29.190
a lot more work to
actually get running.
01:04:29.190 --> 01:04:33.090
The adal-node package, to me,
is a lot easier to use.
01:04:33.090 --> 01:04:33.872
So, I use that one.
01:04:33.872 --> 01:04:36.720
Plus, it goes more with ADAL.
01:04:36.720 --> 01:04:39.320
I'm getting things like
authentication context you've seen
01:04:39.320 --> 01:04:40.570
from some of the other
demos this week.
01:04:40.570 --> 01:04:43.650
Or, if you've been doing stuff
with the Office 365 APIs,
01:04:43.650 --> 01:04:48.850
you've seen a code that shows
using authentication context.
01:04:48.850 --> 01:04:51.414
Let me jump back down to line 79,
where I was.
01:04:52.784 --> 01:04:55.270
We've created
an authentication context.
01:04:55.270 --> 01:04:58.540
Then, I'm going to come down
here and get the resourceId.
01:04:58.540 --> 01:05:02.150
That config.get is looking at a
configuration file in my project to
01:05:02.150 --> 01:05:03.210
find out.
01:05:03.210 --> 01:05:05.590
What's the resourceId for
the discovery servers?
01:05:05.590 --> 01:05:07.990
What's the resourceId for
the graph API?
01:05:07.990 --> 01:05:08.739
Stuff like that.
01:05:10.690 --> 01:05:12.430
A little bit farther down.
01:05:12.430 --> 01:05:13.050
What I'm doing.
01:05:13.050 --> 01:05:17.170
I'm saying, authContext,
the thing that Azure gave me.
01:05:17.170 --> 01:05:20.890
Call this function,
acquireTokenWithAuthorizationCode.
01:05:20.890 --> 01:05:24.710
I pass in the authorization code
that I got back from Azure and
01:05:24.710 --> 01:05:25.910
then, I pass in things like.
01:05:25.910 --> 01:05:28.230
Where are you supposed to
go when you authenticate?
01:05:28.230 --> 01:05:31.500
I pass in the resourceID for
the discovery service.
01:05:31.500 --> 01:05:34.750
I pass in the ID of my
Azure AD application.
01:05:34.750 --> 01:05:38.050
I pass in the secret for
my Azure AD application.
01:05:38.050 --> 01:05:39.950
What that does, on my behalf.
01:05:39.950 --> 01:05:44.900
Makes the request to the Azure AD
token endpoint to go get
01:05:44.900 --> 01:05:49.080
an access token for
the resource that I needed.
01:05:49.080 --> 01:05:53.700
When I come back,
I'm just gonna take that value and.
01:05:53.700 --> 01:05:54.780
Where do I do it?
01:05:54.780 --> 01:05:57.865
I. Oh.
01:05:57.865 --> 01:05:59.130
I'm then, going through and
01:05:59.130 --> 01:06:02.770
I'm gonna save it in a session
variable or my session state.
01:06:02.770 --> 01:06:04.590
That's how I'm doing
the authentication.
01:06:04.590 --> 01:06:07.076
You've seen how to go through and
do the rest API stuff.
01:06:07.076 --> 01:06:08.080
Or, I haven't shown it to you, but
01:06:08.080 --> 01:06:11.840
there's other demos that other
people are doing this week.
01:06:11.840 --> 01:06:14.110
Like, there's one that
Rob Howard did this morning,
01:06:14.110 --> 01:06:16.690
on Deep Dive with the rest API and
using the discovery service.
01:06:16.690 --> 01:06:18.210
I'd encourage you go take
a look at that video,
01:06:18.210 --> 01:06:21.110
if you didn't see that session
on how to use the rest API to
01:06:21.110 --> 01:06:22.820
query the discovery service.
01:06:22.820 --> 01:06:24.940
But, instead of showing that code.
01:06:24.940 --> 01:06:29.640
Now that I've shown you how
to do Azure AD with Node and
01:06:29.640 --> 01:06:30.600
Office 365 APIs.
01:06:30.600 --> 01:06:34.260
In the last sample, we saw how to do
01:06:36.840 --> 01:06:39.600
a little bit of Angular stuff
with an Outlook add-in.
01:06:39.600 --> 01:06:40.430
In the eight or
01:06:40.430 --> 01:06:43.569
so minutes I have left,
I wanna show you one more sample.
01:06:45.020 --> 01:06:48.480
I wanna show you one more sample for
another application.
01:06:48.480 --> 01:06:54.690
Let me open up this guy.
01:06:54.690 --> 01:06:57.820
Let's go back over to this and
let's stop the web server.
01:06:57.820 --> 01:06:58.650
Oh, we did stop.
01:06:59.870 --> 01:07:02.118
Let me go ahead and get him running.
01:07:02.118 --> 01:07:05.239
gulp compile-ts.
01:07:07.135 --> 01:07:08.660
Then, I'm using.
01:07:08.660 --> 01:07:11.020
This is a 100% static website.
01:07:11.020 --> 01:07:13.660
CSS, HTML, JavaScript,
all of it runs on the client.
01:07:13.660 --> 01:07:16.360
I have a thing, a Node packet
installed globally on my machine
01:07:16.360 --> 01:07:19.790
called superstatic,
which just runs a static website.
01:07:19.790 --> 01:07:23.056
I'm gonna type in
superstatic --port.
01:07:23.056 --> 01:07:24.124
Which port do I use here?
01:07:24.124 --> 01:07:27.090
I'm gonna use port 8000.
01:07:29.249 --> 01:07:29.888
There you go.
Now,
01:07:29.888 --> 01:07:31.470
the superstatic site has started.
01:07:31.470 --> 01:07:33.129
I'm gonna take this guy.
01:07:33.129 --> 01:07:34.778
Let's come over here.
01:07:34.778 --> 01:07:35.898
Copy this URL.
01:07:35.898 --> 01:07:38.939
Go back to my browser and
oh, darn it.
01:07:40.320 --> 01:07:41.460
Will you do that?
01:07:41.460 --> 01:07:42.590
No, still not running.
01:07:42.590 --> 01:07:43.970
It's gonna try and
automatically log me in.
01:07:43.970 --> 01:07:45.760
Let's back up a little bit.
01:07:47.390 --> 01:07:48.710
When I click Login.
01:07:48.710 --> 01:07:50.260
I'm still logged into
Azure right now.
01:07:50.260 --> 01:07:51.985
When I click Login,
it's gonna be pretty quick.
01:07:51.985 --> 01:07:54.010
A round trip coming
around because it thinks,
01:07:54.010 --> 01:07:57.980
I'm still logged in, which is fine.
01:07:57.980 --> 01:07:58.590
I click Login.
01:07:58.590 --> 01:08:00.310
It goes back and forth to Azure.
01:08:00.310 --> 01:08:06.750
Now, I'm pulling data from
a SharePoint list using the rest
01:08:06.750 --> 01:08:10.650
API and I can come over here and
look at myself and my expenses.
01:08:10.650 --> 01:08:12.050
I've got a few expenses over here.
01:08:12.050 --> 01:08:15.700
Let's go through and
click on this plus to open this up.
01:08:15.700 --> 01:08:19.290
This little spinner right here is
talking to the Office 365 files API,
01:08:19.290 --> 01:08:22.260
which, the first time you call it,
can take a few seconds for
01:08:22.260 --> 01:08:23.360
it to get going.
01:08:23.360 --> 01:08:26.840
We wait for a second, twiddle
our thumbs, tell it that, hey.
01:08:26.840 --> 01:08:29.140
Remember, we've only got about six
minutes left in the demo here so,
01:08:29.140 --> 01:08:29.650
let's get going.
01:08:29.650 --> 01:08:31.010
You're not doing it.
01:08:31.010 --> 01:08:31.740
Trust me, it works.
01:08:31.740 --> 01:08:32.870
I refresh it.
01:08:32.870 --> 01:08:33.890
Come back over here.
01:08:33.890 --> 01:08:35.160
I'm impatient.
01:08:35.160 --> 01:08:36.150
Click on this.
01:08:36.150 --> 01:08:38.080
You go faster this time because
I wanna click this dropdown and
01:08:38.080 --> 01:08:39.680
see attachments coming
from my One Drive for
01:08:39.680 --> 01:08:42.890
Business site inside of Office 365.
01:08:42.890 --> 01:08:45.930
This thing runs 100% client side.
01:08:45.930 --> 01:08:47.090
What is it doing?
01:08:47.090 --> 01:08:49.840
It's taking advantage of a couple
other technologies that Office
01:08:49.840 --> 01:08:52.860
365 gives us and
the Azure AD guys give us.
01:08:52.860 --> 01:08:54.632
Let's kill this guy and
let's go to look at the code.
01:08:56.466 --> 01:08:57.935
Whoa, that's small code.
01:08:57.935 --> 01:08:58.484
How's that?
01:08:58.484 --> 01:08:59.730
Is that good for
you guys in the back?
01:09:01.170 --> 01:09:02.150
Yep, yep, yep.
01:09:02.150 --> 01:09:03.620
Okay.
01:09:03.620 --> 01:09:05.580
This guy, over here.
01:09:05.580 --> 01:09:07.860
Let me show you the cool
part of this stuff.
01:09:07.860 --> 01:09:10.494
Again, this is an Angular
application written in TypeScript.
01:09:10.494 --> 01:09:13.860
In the link I'll
give you at the end.
01:09:13.860 --> 01:09:14.960
This is one that I built for
01:09:14.960 --> 01:09:17.480
Microsoft and, there's a hands-on
lab that walks you through getting
01:09:17.480 --> 01:09:19.020
this thing up and running.
01:09:19.020 --> 01:09:20.800
But, let me show you the really
cool part about this.
01:09:20.800 --> 01:09:22.240
A gentleman asked me,
before this session.
01:09:22.240 --> 01:09:24.500
I need to go through and
do 100% client-side secure,
01:09:24.500 --> 01:09:29.650
authentic, secure application and
have everything be nice and secure.
01:09:29.650 --> 01:09:30.450
I'm like, yes.
He goes,
01:09:30.450 --> 01:09:31.640
could you give me a pointer to that?
01:09:31.640 --> 01:09:32.590
I'm like, yes.
01:09:32.590 --> 01:09:33.740
Wait till the last demo.
01:09:33.740 --> 01:09:34.970
I lucked out on this one.
01:09:34.970 --> 01:09:35.990
Hopefully, this will work well.
01:09:35.990 --> 01:09:37.070
Well, it did work well.
01:09:37.070 --> 01:09:37.570
You saw it.
01:09:39.250 --> 01:09:41.215
Here, I'm building an Angular app.
01:09:41.215 --> 01:09:42.607
it's called expenseApp and
01:09:42.607 --> 01:09:44.815
I'm passing in a bunch
of different routes.
01:09:44.815 --> 01:09:47.625
I'm going and
configuring the applications.
01:09:47.625 --> 01:09:50.370
I'm defining this method
called configure.
01:09:51.780 --> 01:09:53.071
Here, I'm gonna go in and
01:09:53.071 --> 01:09:55.622
define all the routes where
my application can go.
01:09:55.622 --> 01:09:58.090
I'm gonna come back to
that one in just a minute.
01:09:58.090 --> 01:09:59.064
Let's look at this one first.
01:09:59.064 --> 01:10:02.014
expenseApp.Adal.configure.
01:10:02.014 --> 01:10:05.307
This is showing off one of
the coolest technologies that
01:10:05.307 --> 01:10:06.785
Microsoft has created.
01:10:06.785 --> 01:10:08.085
In a while.
01:10:08.085 --> 01:10:09.665
What is that doing?
01:10:09.665 --> 01:10:14.444
There is now support for
the implicit OAuth flow for
01:10:14.444 --> 01:10:17.790
authentication in Azure AD.
01:10:17.790 --> 01:10:19.190
What is that?
01:10:19.190 --> 01:10:22.080
The biggest thing that we've had to
do when we were doing authentication
01:10:22.080 --> 01:10:25.300
is that we had to protect
the secret part of our application.
01:10:25.300 --> 01:10:28.245
If it's the authorization code, we
gotta protect the client's secret.
01:10:28.245 --> 01:10:31.140
If.
01:10:32.149 --> 01:10:35.414
>> [LAUGH]
>> If we're using the authorization
01:10:35.414 --> 01:10:39.610
code flow for Azure AD,
we have to protect the secret.
01:10:39.610 --> 01:10:42.000
If we're using the client
credentials flow,
01:10:42.000 --> 01:10:43.990
we have to protect the certificate.
01:10:43.990 --> 01:10:46.009
That's how we do
AppONLY with Azure AD.
01:10:47.350 --> 01:10:51.240
The third one was, how do we do
this using the implicit flow
01:10:51.240 --> 01:10:54.440
when we don't want to use the secret
we just want to use the ID?
01:10:54.440 --> 01:10:55.760
This is how it works.
01:10:55.760 --> 01:10:57.530
I set up adalProvider.imit.
01:10:57.530 --> 01:11:01.730
I pass in the tenant ID which
is the ID of my Azure AD tenant.
01:11:01.730 --> 01:11:03.550
I pass in the client
ID of my application.
01:11:03.550 --> 01:11:04.410
I pass out.
I pass out.
01:11:05.456 --> 01:11:07.408
>> [LAUGH]
>> [LAUGH] And
01:11:07.408 --> 01:11:10.680
as fast as I'm talking right
now I'm gonna pass out.
01:11:10.680 --> 01:11:14.870
I pass in the URL of where I wanna
go once the application is done,
01:11:14.870 --> 01:11:18.150
when you log out, and
then I pass in a list of endpoints.
01:11:18.150 --> 01:11:22.060
And when I pass those things in,
the Angular $httpProvider
01:11:22.060 --> 01:11:25.790
is now gonna be wired up by
adal.js to look for things.
01:11:25.790 --> 01:11:31.760
And say, hey, whenever you go to one
of these endpoints right here or
01:11:31.760 --> 01:11:34.129
you go to an endpoint right here,
01:11:34.129 --> 01:11:37.510
adal.js says you need
to be authenticated.
01:11:37.510 --> 01:11:38.840
And if you're not
already authenticated,
01:11:38.840 --> 01:11:40.890
I'm gonna send you over to
Azure to go authenticate.
01:11:40.890 --> 01:11:42.556
You're gonna go authenticate.
01:11:42.556 --> 01:11:45.210
You're gonna get an access token,
and you're gonna get it back.
01:11:45.210 --> 01:11:48.540
When you get that access token back,
I'm then gonna issue
01:11:48.540 --> 01:11:51.220
a request that you had for
one of those two endpoints.
01:11:51.220 --> 01:11:53.202
And because you've
listed it right here,
01:11:53.202 --> 01:11:57.450
I'm gonna automatically put an
authorization header with a value of
01:11:57.450 --> 01:12:02.300
bearer space access token to
secure the request going over to
01:12:02.300 --> 01:12:06.500
the Azure resource
that we're talking to.
01:12:06.500 --> 01:12:08.630
The first one being
the SharePoint rest API,
01:12:08.630 --> 01:12:11.120
the second one being the files API.
01:12:11.120 --> 01:12:13.510
That's really freaking cool.
01:12:13.510 --> 01:12:16.590
When this thing released, there's
a blog post up on the Azure AD team
01:12:16.590 --> 01:12:17.890
where they said, hey, it went GA.
01:12:17.890 --> 01:12:22.530
I worked with a guy named Dan
Wolleen in testing this stuff and
01:12:22.530 --> 01:12:23.760
getting it working.
01:12:23.760 --> 01:12:25.340
This literally takes about two and
01:12:25.340 --> 01:12:28.000
a half minutes to get
added to your Angular app.
01:12:28.000 --> 01:12:28.910
Okay?
01:12:28.910 --> 01:12:33.860
You can even come over here into
your routes, and just say, this
01:12:33.860 --> 01:12:39.030
route needs to be secure by just
saying requireADLogin equals true.
01:12:39.030 --> 01:12:41.510
If you don't set that
it equals false.
01:12:41.510 --> 01:12:44.050
We set this whole thing up, and we
literally were looking at each other
01:12:44.050 --> 01:12:46.670
like, did that really just work?
01:12:47.710 --> 01:12:49.410
That was way too easy
to get that working.
01:12:49.410 --> 01:12:50.870
And it just worked.
01:12:50.870 --> 01:12:52.310
Absolutely awesome.
01:12:52.310 --> 01:12:54.530
This is what Rob Howard was talking
about this morning when he said he
01:12:54.530 --> 01:12:56.510
just wanted to grab Vittorio and
give him a kiss.
01:12:56.510 --> 01:12:58.748
He couldn’t because I was up first,
right?
01:12:58.748 --> 01:13:02.210
>> [LAUGH]
>> It was so freaking cool, right?
01:13:02.210 --> 01:13:04.200
So, I’m kinda running
out of time here.
01:13:04.200 --> 01:13:06.470
I really wanted to show
more of this application.
01:13:06.470 --> 01:13:09.860
But there’s a video
up on channel nine.
01:13:09.860 --> 01:13:10.760
Sorry.
01:13:10.760 --> 01:13:15.260
There's a video up on the training
content from the dev.office.com.
01:13:15.260 --> 01:13:16.540
Look for the expense manager,
01:13:16.540 --> 01:13:19.030
and if you're interested in
looking at the hands-on lab,
01:13:19.030 --> 01:13:21.420
I'll show you a link to that
in a half a second here.
01:13:21.420 --> 01:13:23.909
So, I want to show you a couple of
different things using different
01:13:23.909 --> 01:13:25.650
technologies that you
can take advantage of.
01:13:25.650 --> 01:13:27.210
We saw a little bit of Angular.
01:13:27.210 --> 01:13:28.370
A very little bit.
01:13:28.370 --> 01:13:29.826
We saw a lot of node.js.
01:13:29.826 --> 01:13:31.410
We saw some adal.js.
01:13:31.410 --> 01:13:34.010
So let me switch back to the slides.
01:13:34.010 --> 01:13:36.720
I know that there are people in
here that looked at this, and
01:13:36.720 --> 01:13:38.530
they're like,
what in the heck did I just?
01:13:38.530 --> 01:13:40.580
You know you ever sit
through a dead session, and
01:13:40.580 --> 01:13:42.270
you hear people start
clapping at the end, and
01:13:42.270 --> 01:13:44.605
you're kinda sitting there like,
what the hell just happened?
01:13:44.605 --> 01:13:47.025
>> [LAUGH]
>> Or you kinda look like that dude
01:13:47.025 --> 01:13:48.393
up there, right?
01:13:48.393 --> 01:13:50.807
>> [LAUGH]
>> Like, what the heck?
01:13:50.807 --> 01:13:51.400
Right?
01:13:52.650 --> 01:13:53.870
That's okay.
01:13:53.870 --> 01:13:54.410
The idea is,
01:13:54.410 --> 01:13:58.580
that you just got some ideas about
how you can do this different stuff.
01:13:58.580 --> 01:13:59.990
I didn't show you everything.
01:13:59.990 --> 01:14:00.830
I wasn't trying to.
01:14:00.830 --> 01:14:01.644
The idea was just.
01:14:01.644 --> 01:14:03.000
Oh, God they love the picture.
01:14:04.390 --> 01:14:05.740
Gotta make it a video.
01:14:05.740 --> 01:14:09.740
So, I didn't show you the whole
thing soup to nuts on all these
01:14:09.740 --> 01:14:12.110
different projects,
but check it out.
01:14:12.110 --> 01:14:13.210
Down at the bottom there,
01:14:13.210 --> 01:14:15.130
all the demos that I just
ran are all down there.
01:14:15.130 --> 01:14:16.640
You can go grab them from GitHub.
01:14:16.640 --> 01:14:18.660
The first link called
pres-o365-node,
01:14:18.660 --> 01:14:21.080
that contains the first two demos.
01:14:21.080 --> 01:14:22.230
You'll see two folders in there.
01:14:22.230 --> 01:14:24.310
You're gonna grab those two folders.
01:14:24.310 --> 01:14:27.870
That's the one that contains
the one for the node
01:14:27.870 --> 01:14:31.280
O 365 web which is the raspberry
pie demo I ran earlier today and
01:14:31.280 --> 01:14:35.440
the one that we ran, the second
demo we ran in this session.
01:14:35.440 --> 01:14:40.507
And then it also has the other
piece for doing the website,
01:14:40.507 --> 01:14:44.320
the Azure AD log in using adal-node.
01:14:44.320 --> 01:14:46.460
And talk to the discovery service.
01:14:46.460 --> 01:14:50.530
The second one there, that points to
a repository that contains the last
01:14:50.530 --> 01:14:55.010
sample I did and pointed to the
hands-on lab where you can get some
01:14:55.010 --> 01:14:58.600
work done and trying out building
that last sample that I showed.
01:14:58.600 --> 01:15:00.930
And then finally, all those
other links there are there for
01:15:00.930 --> 01:15:05.610
you guys to take a look at
these different technologies.
01:15:05.610 --> 01:15:07.540
The last thing I just want
to throw out there too,
01:15:07.540 --> 01:15:10.130
please make sure you go fill
out an evaluation here.
01:15:10.130 --> 01:15:11.490
Let them know if you
like this session.
01:15:11.490 --> 01:15:13.810
Let them know if I shouldn't
be invited back or
01:15:13.810 --> 01:15:15.410
if you want to see
something different.
01:15:15.410 --> 01:15:16.730
I really appreciate you
guys sticking around.
01:15:16.730 --> 01:15:19.470
Sorry if I was so tight in here, but
I hope you learned something and
01:15:19.470 --> 01:15:20.560
got something out of this session.
01:15:20.560 --> 01:15:21.530
So thanks a lot and enjoy the show.
01:15:21.530 --> 01:15:22.030
>> [APPLAUSE]