WEBVTT
00:00:00.005 --> 00:00:07.289
[MUSIC]
00:00:07.289 --> 00:00:09.460
Hey everybody, thanks for
joining me on codechat.
00:00:09.460 --> 00:00:11.512
I'm Code Foster, and
I'm here with, Bill.
00:00:11.512 --> 00:00:12.166
I forgot your last name.
00:00:12.166 --> 00:00:12.812
>> Bill Wagner.
00:00:12.812 --> 00:00:13.463
>> Bill Wagner.
00:00:13.463 --> 00:00:14.966
>> Good to see you again.
>> Now what's your social Bill?
00:00:14.966 --> 00:00:16.433
What's your Twitter handle?
>> @billwagner.
00:00:16.433 --> 00:00:17.976
>> @billwagner, so
you can engage with him.
00:00:17.976 --> 00:00:19.489
>> Yeah.
>> And you guys know mine,
00:00:19.489 --> 00:00:20.394
@codefoster.
00:00:20.394 --> 00:00:23.828
We're gonna talk about
Typescript, and Angular 2.
00:00:23.828 --> 00:00:25.117
>> Yes.
>> I think it's one of Bill's
00:00:25.117 --> 00:00:27.041
favorite topics recently,
and it's one of mine.
00:00:27.041 --> 00:00:29.111
>> It is, I really love
the Typescript language,
00:00:29.111 --> 00:00:31.802
I like the way it makes you so
much more productive when you're
00:00:31.802 --> 00:00:33.738
working in a JavaScript
type environment.
00:00:33.738 --> 00:00:36.901
The type system really helps
you when you're writing code.
00:00:36.901 --> 00:00:38.170
But it's not in your way,
00:00:38.170 --> 00:00:40.833
with a lot of ceremony that
you have to add to your code.
00:00:40.833 --> 00:00:44.057
You have to build types, have
to build all these interfaces,
00:00:44.057 --> 00:00:46.661
have to describe everything
in great detail, but
00:00:46.661 --> 00:00:49.637
it's there when you want to use
it and you can add as many as
00:00:49.637 --> 00:00:52.747
things as you want to try to get
type safety around your API.
00:00:52.747 --> 00:00:56.282
>> Bill, convince my viewers
to move from JavaScript to
00:00:56.282 --> 00:00:57.231
TypeScript.
00:00:57.231 --> 00:00:58.591
Why are they holding back?
00:00:58.591 --> 00:01:00.222
I know they're comfortable
with JavaScript.
00:01:00.222 --> 00:01:01.892
It feels like something new.
00:01:01.892 --> 00:01:04.625
>> Okay, so the first thing
is just the type inference.
00:01:04.625 --> 00:01:07.552
So Typescript is a very, very
strong type inference engine.
00:01:07.552 --> 00:01:10.554
So one of the demos that Anders
did yesterday that I wanna steal
00:01:10.554 --> 00:01:11.998
and use in my talks
>> [LAUGH]
00:01:11.998 --> 00:01:13.906
>> Is it'll take this variable
00:01:13.906 --> 00:01:17.957
and say it could be a string,
a string array, or undefined,
00:01:17.957 --> 00:01:19.952
or null, one of these types.
00:01:19.952 --> 00:01:23.527
And then it'll go through some
if statements to say if var is
00:01:23.527 --> 00:01:26.118
string, then have
a cause underneath it.
00:01:26.118 --> 00:01:29.800
And the Typescript type engines
knows that underneath there,
00:01:29.800 --> 00:01:34.310
it is a string, and
you get intelligence around it.
00:01:34.310 --> 00:01:37.560
You will get compilers if you
try to do something like,
00:01:37.560 --> 00:01:39.550
something that wouldn't
be supported on a string,
00:01:39.550 --> 00:01:43.600
try to access say a name
property or something.
00:01:43.600 --> 00:01:45.220
In other branches
it will look and
00:01:45.220 --> 00:01:49.770
it will see if this was null or
if not string.
00:01:49.770 --> 00:01:54.340
If not variable so it's false,
then it's type could be null or
00:01:54.340 --> 00:01:57.550
undefined, or a string because
the empty string is false.
00:01:57.550 --> 00:01:58.879
That can help right away.
00:01:59.950 --> 00:02:02.827
The other thing I tell
customers I work with, when
00:02:02.827 --> 00:02:06.393
we're thinking about Typescript
is, because Typescript is
00:02:06.393 --> 00:02:10.160
a strict super set of subset, of
JavaScript, you can just change
00:02:10.160 --> 00:02:13.587
the extension of your JavaScript
files to Typescript, and
00:02:13.587 --> 00:02:16.906
now that type inference engine
is helping it right away.
00:02:16.906 --> 00:02:19.912
You already get some benefits
without doing anything extra,
00:02:19.912 --> 00:02:22.625
and then as you start to see
things where maybe it can help
00:02:22.625 --> 00:02:25.453
you, then you can start to
annotate some of the types, and
00:02:25.453 --> 00:02:27.961
start to put some information
in there that helps.
00:02:27.961 --> 00:02:30.671
>> So this isn't like coffee
script where I've gotta learn
00:02:30.671 --> 00:02:31.352
a new syntax.
00:02:31.352 --> 00:02:32.412
>> No, no.
00:02:32.412 --> 00:02:34.572
>> It's really just,
like you said,
00:02:34.572 --> 00:02:37.237
moving could start with
simply renaming and
00:02:37.237 --> 00:02:41.220
then adding the build,
the compile into your work flow.
00:02:41.220 --> 00:02:43.620
But just renaming it
from JS to TS and
00:02:43.620 --> 00:02:45.480
you've already gone quite
a ways right there.
00:02:45.480 --> 00:02:46.580
>> Right,
you've already got some stuff.
00:02:46.580 --> 00:02:49.780
>> And then you add one type and
then you've gone another step.
00:02:49.780 --> 00:02:51.350
So it's easy to get started.
00:02:51.350 --> 00:02:54.030
>> The other thing I really like
about it, if you think of most
00:02:54.030 --> 00:02:56.940
of the browsers we target right
now they're probably ES5.
00:02:58.160 --> 00:03:02.080
So TypeScript with
the transpiler, you can say,
00:03:02.080 --> 00:03:05.010
I want to target ES5, or
even ES4 if you want to
00:03:05.010 --> 00:03:06.810
go back far enough, but
you lose some features.
00:03:06.810 --> 00:03:07.810
Or you can target ES6,
00:03:07.810 --> 00:03:11.780
and TypeScript already
supports the syntax for ES6.
00:03:11.780 --> 00:03:15.060
So you can say, wait, I know
I'm getting to this point where
00:03:15.060 --> 00:03:17.790
lambda style functions
are coming to JavaScript,
00:03:17.790 --> 00:03:23.600
and Class,
keyword is coming to JavaScript.
00:03:23.600 --> 00:03:24.390
But it can't use those yet,
00:03:24.390 --> 00:03:25.920
cuz it's not on
the browsers support.
00:03:25.920 --> 00:03:27.220
Well if you use
Typescript you can.
00:03:27.220 --> 00:03:28.821
>> Yeah.
>> Just like Decorators,
00:03:28.821 --> 00:03:31.900
which is a big part of
Angular 2 and how that works.
00:03:31.900 --> 00:03:35.370
I can use those now, and
it will compile down to ES5.
00:03:35.370 --> 00:03:36.090
>> Okay.
00:03:36.090 --> 00:03:38.428
>> And then it will use
the polyfills and so on, and
00:03:38.428 --> 00:03:40.775
run time with required
adjust to bring them in.
00:03:40.775 --> 00:03:43.705
But now I can use that new
syntax, and anticipate where
00:03:43.705 --> 00:03:47.780
the market's going to be when
every browser supports ESX.
00:03:47.780 --> 00:03:50.650
So that's another big benefit
for the JavaScript community.
00:03:50.650 --> 00:03:52.880
>> Let's talk about Angular
2 then, Typescript and
00:03:52.880 --> 00:03:55.130
Angular 2 are like peas and
00:03:55.130 --> 00:03:58.290
carrots, Angular 2 is
written in Typescript, and
00:03:58.290 --> 00:04:01.310
encourages you to use Typescript
to write an Angular 2 app.
00:04:02.750 --> 00:04:06.240
Feels like some of the benefits
are in the Typescript syntax,
00:04:06.240 --> 00:04:06.810
that's great.
00:04:06.810 --> 00:04:08.390
But what is Angular 2 giving us?
00:04:08.390 --> 00:04:09.020
Why do we love that?
00:04:09.020 --> 00:04:10.880
>> Some of the big things that I
like about the way Angular 2 is
00:04:10.880 --> 00:04:14.070
set up and designed is,
it really starts to encourage
00:04:14.070 --> 00:04:16.990
better separation of different
things that you're building.
00:04:16.990 --> 00:04:18.440
So if I take an Angular 1 app,
00:04:18.440 --> 00:04:21.130
what I would often see people
do when they wrote their first
00:04:21.130 --> 00:04:23.975
Angular 1 app, is what I
call dollarscope great.
00:04:23.975 --> 00:04:24.510
>> Um-hm.
00:04:24.510 --> 00:04:26.760
>> They built their first
controller in Angular,
00:04:26.760 --> 00:04:28.880
they see to get things between
the view and the controller,
00:04:28.880 --> 00:04:29.840
it's Valor Scope.
00:04:29.840 --> 00:04:31.910
And then pretty soon,
there's 50 or
00:04:31.910 --> 00:04:34.115
60 different properties
they've added to Valor Scope.
00:04:34.115 --> 00:04:35.520
>> Um-hm, yeah.
>> It's very, very bad inside.
00:04:35.520 --> 00:04:36.980
>> Yeah.
00:04:36.980 --> 00:04:38.050
>> But it's almost encouraged,
00:04:38.050 --> 00:04:39.770
that's almost
the default way to go.
00:04:39.770 --> 00:04:42.970
If you look at what Angular 2
has, you define components,
00:04:42.970 --> 00:04:45.440
give them these
declarative properties,
00:04:45.440 --> 00:04:49.650
you define providers, or
other components that you need.
00:04:49.650 --> 00:04:51.030
And you really separate
those things out.
00:04:51.030 --> 00:04:54.030
And any of the components that
would be part of the view is
00:04:54.030 --> 00:04:57.270
very much set up right
from the get go to
00:04:57.270 --> 00:04:59.700
follow more of a view
model style of syntax.
00:04:59.700 --> 00:05:03.150
Which we could, in Angular 1,
but the syntax and
00:05:03.150 --> 00:05:05.340
the framework didn't
necessarily encourage it, so
00:05:05.340 --> 00:05:08.800
it starts to move us toward that
model where you should be using
00:05:08.800 --> 00:05:12.550
a view model to go between the
view and the dominant view, and
00:05:12.550 --> 00:05:15.070
your Typescript or
JavaScript code.
00:05:15.070 --> 00:05:18.450
And that's encouraged a lot
more in the Angular 2 design.
00:05:18.450 --> 00:05:20.795
>> So
you mentioned these components.
00:05:20.795 --> 00:05:22.950
>> Mm-hm.
>> Can you talk about this shift
00:05:22.950 --> 00:05:25.430
to a component paradigm and
what that means to
00:05:25.430 --> 00:05:27.300
developers that have, that
aren't experienced with it yet.
00:05:27.300 --> 00:05:30.010
>> Okay, so one of the things
that you'll see is a system that
00:05:30.010 --> 00:05:31.670
just loads your components for
you, and
00:05:31.670 --> 00:05:34.020
you configure that as
part of your main app.
00:05:34.020 --> 00:05:38.080
So then what happens is,
it knows how to go find
00:05:38.080 --> 00:05:40.545
components based on
semantic conventions.
00:05:40.545 --> 00:05:43.480
So the more components
you add to a page, or
00:05:43.480 --> 00:05:47.050
components that might
rely on other components,
00:05:47.050 --> 00:05:49.862
effectively the framework
goes and loads those for you.
00:05:49.862 --> 00:05:51.740
So you won't get into
this situation where,
00:05:51.740 --> 00:05:53.880
I forgot to include this
other JavaScript file, or
00:05:53.880 --> 00:05:55.760
I forgot to include that
component that suddenly
00:05:55.760 --> 00:05:58.920
picked up a dependency and
so on and so forth.
00:05:58.920 --> 00:06:03.880
Which was a cause of a lot of
just simple bugs in Angular 1
00:06:03.880 --> 00:06:07.420
and other JavaScript apps where
I didn't include the JavaScript.
00:06:07.420 --> 00:06:11.090
Cuz I forgot, it took on a new
dependency or whatnot, so
00:06:11.090 --> 00:06:14.350
now that's all loaded
in a better way.
00:06:14.350 --> 00:06:15.070
>> Good.
00:06:15.070 --> 00:06:17.850
>> Yeah.
>> So I know it feels to me,
00:06:17.850 --> 00:06:21.460
I like to say that
the reason why I'm loving
00:06:21.460 --> 00:06:24.590
Angular 2 is because I feel like
I'm writing code the right way.
00:06:24.590 --> 00:06:25.400
I'm putting things.
00:06:25.400 --> 00:06:26.570
>> Yes.
>> In the right places.
00:06:26.570 --> 00:06:28.130
There is that
separation of concern.
00:06:28.130 --> 00:06:29.470
>> Right.
>> So it just feels good.
00:06:29.470 --> 00:06:30.710
>> Right.
It just feels like,
00:06:30.710 --> 00:06:32.600
I can grow this,
I can reuse this,
00:06:32.600 --> 00:06:34.480
I can take pieces of a page and
move it out.
00:06:34.480 --> 00:06:36.281
And what I'm
teaching developers,
00:06:36.281 --> 00:06:40.020
working with Angular, one of the
workflows that we go through is,
00:06:40.020 --> 00:06:43.670
you have built this piece of
code along with this HTML.
00:06:43.670 --> 00:06:46.270
And not let's extract
it into a component,
00:06:46.270 --> 00:06:47.360
because you have found, gee,
00:06:47.360 --> 00:06:49.178
I need to use this somewhere
else in the app which is.
00:06:49.178 --> 00:06:50.262
>> Yeah.
>> Real common scenario.
00:06:50.262 --> 00:06:51.063
>> Yeah.
>> In Angular 1,
00:06:51.063 --> 00:06:52.972
building templates that
was somewhat painful.
00:06:52.972 --> 00:06:55.560
>> Yeah right.
>> You had all these special
00:06:55.560 --> 00:06:57.420
keywords to transfer things
from the inner scope
00:06:57.420 --> 00:06:58.170
to the outer scope.
00:06:58.170 --> 00:06:59.620
You had to really
debug all this,
00:06:59.620 --> 00:07:01.980
because the variables with the
outer scope of the same name,
00:07:01.980 --> 00:07:03.930
but they are different objects.
00:07:03.930 --> 00:07:05.860
>> Yeah.
>> And all this sort of thing.
00:07:05.860 --> 00:07:08.690
Pulling out a part of a page
into a component when you
00:07:08.690 --> 00:07:12.950
discover you need to reuse it in
Angular 2 is much, much simpler.
00:07:12.950 --> 00:07:13.450
>> Yeah.
00:07:14.740 --> 00:07:17.129
>> And that's a really good
thing because we don't often
00:07:18.340 --> 00:07:20.840
anticipate exactly
what's going to be used.
00:07:20.840 --> 00:07:23.460
Yeah, I know I'm going to reuse
this five or six times, right,
00:07:23.460 --> 00:07:25.490
you see that, and you go yeah,
I want something like that,
00:07:25.490 --> 00:07:27.720
and then you want to grab it and
pull it out.
00:07:27.720 --> 00:07:31.130
>> Do you have any resources for
the developers behind the camera
00:07:31.130 --> 00:07:32.840
that might want to get
started with Angular 2?
00:07:32.840 --> 00:07:34.780
>> One of the big ones that
you pointed to is that Tour of
00:07:34.780 --> 00:07:36.880
Heroes apps,
its a great walk-through
00:07:36.880 --> 00:07:39.140
that goes through the building
a lot of the apps.
00:07:39.140 --> 00:07:44.070
Related to that is,
there are other quick
00:07:44.070 --> 00:07:47.420
starts in the documentation
about different scenarios.
00:07:47.420 --> 00:07:49.330
One of the things that's
not intuitive for us yet
00:07:49.330 --> 00:07:51.700
is hooking it up
to a REST service,
00:07:51.700 --> 00:07:53.470
that's another tutorial.
00:07:53.470 --> 00:07:55.410
That's probably the biggest
one that I see.
00:07:56.520 --> 00:07:57.523
I think both Dan Wallen and
00:07:57.523 --> 00:07:59.621
John Popper are starting to
work on some things through
00:07:59.621 --> 00:08:01.880
Flowsite that will show you
how to build an Angular 2 app.
00:08:01.880 --> 00:08:05.250
>> Yeah, you've got some
content on Channel 9.
00:08:05.250 --> 00:08:08.570
>> Yeah, we did that one with,
00:08:08.570 --> 00:08:10.970
we're focusing
mostly on Angular 1.
00:08:10.970 --> 00:08:11.600
>> Were you?
>> Yeah,
00:08:11.600 --> 00:08:14.230
that was several revs back on
Angular 2, and I think there was
00:08:14.230 --> 00:08:17.510
just sort of an introduction
of the direction.
00:08:17.510 --> 00:08:19.960
>> Okay, in case you haven't
seen it yet, there is a new show
00:08:19.960 --> 00:08:21.890
on Channel 9, called Web Dev
>> Cool
00:08:21.890 --> 00:08:22.690
>> And the most recent
00:08:22.690 --> 00:08:26.510
episode as of this recording,
anyway, is Angular2 with myself.
00:08:26.510 --> 00:08:27.568
>> Fantastic.
>> Introducing Angular2
00:08:27.568 --> 00:08:29.157
[CROSSTALK]
>> I think I did watch that
00:08:29.157 --> 00:08:29.841
last week.
00:08:29.841 --> 00:08:30.611
Yeah, there you go.
00:08:30.611 --> 00:08:32.261
>> Fantastic
>> Awesome, okay, that does it.
00:08:32.261 --> 00:08:34.992
Get excited about Angular 2 and
TypeScript because we are and
00:08:34.992 --> 00:08:37.480
it's good, and
you are going to love it.
00:08:37.480 --> 00:08:41.040
And yeah, if I think of any more
resources that'll help you out
00:08:41.040 --> 00:08:42.130
in getting started,
I'll go ahead and
00:08:42.130 --> 00:08:43.630
drop them down here
in the show notes.
00:08:43.630 --> 00:08:44.460
>> Okay.
>> And thanks for
00:08:44.460 --> 00:08:46.430
joining me on Code Chat, and
we'll see you next time.
00:08:46.430 --> 00:08:46.930
Thanks, Bill.
00:08:46.930 --> 00:08:47.772
>> Thank you.
00:08:47.772 --> 00:08:57.772
[MUSIC]