Angular2 and Typescript Explained by Daniel Rosenwasser

Angular2 and Typescript Explained by Daniel Rosenwasser

Transcript

0:00
good morning everybody I’m Daniel rose monster I’m a program manager on the
0:08
tape strip tease and today I’m here to talk about tapes shipped in anger and
0:12
how the two are better together now I want to face this reality this fact big
0:19
JavaScript outs are hard and it’s not even just big JavaScript apps it’s small
0:25
and medium-sized thats that slowly grow over time and accumulate more and more
0:29
and after a while they become what we like to consider a readonly codebase
0:33
right you kind of do you need a fix something you need to maintain and you
0:38
just see start like prodding and poking and you’re not really sure where to
0:41
start and then here just not you don’t even feel comfortable changing things
0:45
because you know who knows what you might break so it becomes really only
0:49
and this is something that we ran into a lot of Microsoft actually I mean you
0:56
know it’s a big company we’re building a lot of jobs of code and so even Visual
1:00
Studio code the editor that we’ve released last year
1:03
used to be a JavaScript JavaScript you know that and after a certain point the
1:11
complexity got to be a little bit too much that became hard to maintain and we
1:16
knew that this was not a unique problem to people right for the most part
1:21
other companies are starting to see this as well server-side JavaScript is
1:25
becoming a thing at the time because well noted popped up and then if you
1:30
just look at the sheer complexity of apps yet we’re growing on the internet
1:34
he was getting he returned harrier hard to maintain and so we said JavaScript on
1:41
its own is not enough to make these carry outs you know it’s just getting to
1:47
be difficult and we love JavaScript it’s very expressive it allows us to create
1:52
these apps that are you know just get something up and running really quickly
1:56
and it’s really powerful but the thing is that we knew that we had experience
2:00
in other languages making more complex apps and we found ourselves missing
2:04
things like modules to help us structure applications
2:07
classes and types to help establish contracts and behaviour between
2:12
different parts of our programs and some of the stuff is coming with future
2:17
versions of Java Script like es 2015 yes six but it’s not like you have any Essex
2:23
engine just running everywhere right people are targeting I ate which runs
2:27
ACMA script three and this is like just something a part of jives with
2:32
development you’re not always targeting the newest platform at the same time we
2:37
just need two types to help us with two lengths because jobs are chilling was
2:41
not necessarily at the best place so we said let’s take this language that we
2:46
actually like we like building at seven at things that were missing so future
2:52
jobs are features as well as types and tooling to help us make jobs or perhaps
2:56
faster and that’s how we ended up with type script and type script is an
3:01
open-source cross-platform superset of JavaScript so if you have any JavaScript
3:07
that is valid today
3:09
you plug into the tapes of compiler and it’ll trans pilot and give you clean
3:14
readable output and we also have a source maps to help you debug if you’d
3:19
like but many teams have told us hey we don’t even need the source maps we just
3:23
to bug the JavaScript straight now in late 2014 the angular team announced
3:32
something called at script and they’ve come to some of the same conclusion that
3:35
we had namely that JavaScript apps were hard to write and that we needed a
3:40
little bit more we needed to link we needed a couple of extra things a little
3:44
too types as well they said well take shipped is not enough necessarily so a
3:50
lot of members of the community and both communities said well why don’t you guys
3:53
just working to get there and you know we ask ourselves why aren’t we all just
3:58
working to get there so we we we reached out and we said well what is it gonna
4:03
take for it tape strips to become the tool of choice for the next generation
4:08
of anger
4:10
and among the many things we knew that we needed to buffer for ESX support and
4:15
you were to really look forward to the future and so we needed to embrace that
4:20
as well and so we actually gave it a lot of attention just put her foot on the
4:24
pedal and push our support for that sped it up speed up the work on it then we
4:30
implemented decorators to give you the nice dependency injection features that
4:33
you get an angular to today and finally we added support for system GIS and so
4:39
now you can use the suggest with type script and you get a lot of nice
4:42
features from that now apart from that we also knew that
4:48
tooling it was something that we were always touting but we’re really focusing
4:52
on Windows and Visual Studio but other developers don’t necessarily only work
4:58
on Windows in Visual Studio they work on Mac and Linux will you work on sublime
5:04
you work on different editors like the minimax and it’s a very diverse bunch
5:07
and so we we’ve really decided okay let’s try to focus on just for now
5:14
sublime and every platform and so we created an officially supported Sublime
5:20
Text blog entry type scripts and with that we took the core of that and we
5:25
created something called TAS surfer and so now as long as your editor has a
5:29
plug-in model it can support type script and so the end result is that we’re on
5:36
your favorite editor basically run Sublime Text Visual Studio vs code
5:40
eclipse in IMAX Adam Webb storm basically if you have a favorite
5:46
platform and a favorite editor we’re probably there so I think we would have
5:52
gotten to this point eventually but soon had it not been for a record the angular
5:58
team and community by understanding just the needs and everything that you guys
6:05
were looking for
6:06
we were able to make ourselves a better language so we want to thank you all
6:10
think the England team for embracing us as part of the community
6:14
those thank you very much
6:22
now I don’t want to get this too much because sometimes that happens but so
6:28
I’m going to launch into demo mode and see if we can get this going I’m gonna
6:37
open up a really basic code samples javascript and so is this
6:47
unplug replug
6:58
windows keep that the magic thing ok so here’s a short coat a little bit of code
7:08
in javascript and I wanted to take a quick look at it and there’s a couple of
7:12
bugs I’m just gonna be frank with you and if you found them great if you
7:17
haven’t found them I just want to point out you would probably not find them in
7:21
code view these things slip by so I’m just going to rename this to adopt ES
7:27
File Rename let’s rename that that’s where that is
7:34
shipping dot T S great ok you see these little red squiggly then if you’re
7:42
familiar with Microsoft Word red squeeze mean you might be doing something wrong
7:47
now it doesn’t necessarily mean that you can’t print out your document right if I
7:51
read my last name in Microsoft Word it freaks out but I can still print it and
7:55
it’s ok so if you look at these red squeeze we see read only does not
8:01
existent a property descriptor
8:03
ok let’s take a look at what that actually means we look at the fine
8:08
property and what’s in a property descriptor ok I don’t see readonly but I
8:12
see writable and so let’s actually just switch that out and we mentor rights
8:20
right of bowl tradable and it corrects me false that’s great
8:27
next one is you can’t give an HTML elements to something that’s a string
8:32
now this is a very common problem get on that by the elements and person to get
8:39
takes a string ok so it probably want to do is get the content of that you get
8:45
the text content and this happens a lot when you’re just kind of play around the
8:50
dorm and this one is actually just kind of once you’ve seen the area like
8:56
herself in the head I forgot the extra bar right that’s an arithmetic operator
9:01
not the or the double bar so you know never run types of making just adequate
9:06
type annotation I can say that this is a string or a string array immediately get
9:12
this error oh you can’t for each on something that’s a string or a string
9:16
array well why not I just checked if I had a length and right length is on
9:22
strings and arrays so what I better do is a better write a ring that is a ray
9:28
email address and now it works because I production figures out oh that’s a
9:38
string array that sucks her aid and then the other branch it can figure out
9:41
that’s just a string no big deal
9:44
one last error trip is not a number on a number well look at Val thousand number
9:51
what’s index and drinks I must have just swap these parameters around
9:57
so no big deal right
10:00
pictures help us with a bunch of these errors things that you probably would
10:04
have just sort of just slipped you bind code review and save you a ton of time
10:09
so that great I love to shop for this reason it just helps me catch simple
10:15
things more complex things really quickly as I just type it along now you
10:21
might say all but that’s just a demo app right and so you know that’s why I want
10:25
to show you just how easy it is to move towards typescript if you have an
10:29
existing code base so I’m gonna open up a quick to do NBC project written an
10:34
annual wine and JavaScript wanna show you what this is just not aware to do
10:42
NBC is just a simple to do out and so little harder on the screen but by the
10:50
way can read this
10:51
their own good
10:53
a little bigger I’m sorry about that sorry about that I apologize better ok
11:00
great so if you look through this Jess example I’m seeing that this is a pretty
11:06
standard Cingular one out she only different the only thing that I find
11:10
interesting is that the person who wrote this captured the value of this with PC
11:14
just avoid this orphanage that was an interesting little pattern so I just
11:20
want to go easy to move over to a textured could based so first thing I’m
11:23
gonna do something to copy over the Jazz folder and rename it to source a
11:29
different place from a input files and actually feel well but is it just
11:35
remember what this Jess by looks like for a moment right now I’m just going to
11:39
delete the JSF older
11:41
feel pretty confident that what I’m gonna do and that the famous famous last
11:45
words in a presentation that you might give so
11:52
of course continue
11:57
User Account Control ok yes
12:01
get rid of that ok now it’s getting on the click event that I had earlier ok
12:06
and don’t worry these things happen and we are resilient in the face of
12:11
computers so called to use config that Jason all this is an options file for
12:19
type script editing when you’re writing code when you’re using it with the
12:22
compiler within and I’m gonna add two options I’m gonna have compiler options
12:29
ok usually get completions understood to be below the editor no big deal
12:39
background and actually just gonna open up the next one
12:51
ok compiler options
12:54
ok I’m just going to keep writing so critical part I want to use is the outer
13:02
option and without their that’s just saying I want my input file my
13:06
impossibly mapped out to this specific folder so I’m gonna just out with the
13:11
old jazz folder and next thing I want to do is allow Jas which is not going to
13:16
just let me to use JavaScript as input files which is great if you have an
13:19
existing jobs for project is going to bed too true now
13:24
lastly I’m just going to add some exclusions
13:28
exclude and we’re just gonna said that to an array of note models cuz you
13:36
usually don’t get output of unit modules and finally the inputs we don’t want our
13:41
output we don’t have to be used as inputs right and some just gotta start
13:46
tired mostly in 221 BC start testing and watch the train as it just ends up we’re
13:55
gonna go back into here and we’re gonna look at at sorry we look at the
14:00
controller again so first thing to do is take a look here and watch mode good
14:15
things ok I meant exclude that excludes ok
14:23
then watch mode and here we look at the Jazz folder we look at our controllers
14:33
again and my input looks basically the same as my output if you just take a
14:41
quick look here it is just the spacing of a bit changed up so when we gonna do
14:50
is I’m gonna switch this to tears again you’re gonna see red squeeze on angular
14:57
and basically what they’re saying that’s textured is just saying hey I don’t know
15:02
if you misspelled something so can you make sure that that actually is what you
15:05
meant to type and so what to say
15:06
hate bill typescript actually didn’t write angular so we’ll just say anger
15:10
exist and usually get the full flush type definitions for this but I’m just
15:14
gonna say it’s a type any
15:16
I can do anything I want with it and if you look at EC it has the type any which
15:22
isn’t very satisfying I actually want that to be a little bit more strongly
15:25
typed because it allowed me to do some nice analysis application of the right
15:33
on my to-do control interface and so I’ll say that PC is of type my to-do
15:39
control and that’s again just hope I don’t know these existing can you please
15:46
make sure that’s what you meant to write so I’ll just great to do and alright
15:51
escape key and if I don’t specify type 2 days as a subtype any but if I can also
15:58
say that these have specific tapes and have actually gone through and done this
16:02
for all of us here today I’ve created a file to control DTS and that has the
16:08
interface and description of my controller and so let’s go back to VA
16:13
the types of files and let’s use that as the type here
16:18
DoubleClick and now that I’ve done that one of the cool things is that as I go
16:25
along I type slow throughout my program and so far hover over to I see it’s a
16:31
type to do that if I type if I have over index number and so i cant wait to do
16:38
completed to do that title of and it gives me a nice suggestions now the
16:46
reason that you would do this is one you get really nice styling and nice
16:49
catching and that’s terrific but if you’re also just thinking about moving
16:54
over to nature to a permanent one at the first step towards doing this stuff is
16:59
to actually move your coat over to type script and that’s because you actually
17:04
start flushing out the types and describing the contract between
17:08
different parts of your program so I strongly suggest looking into this its
17:13
actually a very easy thing to do next thing I want to just open up in and she
17:18
read it up
17:21
code and she read it and basically Internet’s not working so great for me
17:29
right now but I’ll show you basically what this app does it just grabs results
17:35
from reddit.com and justice place links just kinda like any subreddit would and
17:41
so it’s really simple as soon as we get our Jason objects we actually just use
17:48
what’s called the type of person to just say hey I know what the shape of this
17:51
thing is now if you look at what you get back from Reddit you get this really big
17:56
blob of data and you get things that you might not necessarily care about like if
18:01
it’s edited or to link their CssClass like things like that you’d really just
18:06
don’t care that much but when I define the shape of this I only needed to
18:11
define as much as I cared about and I just wrote that the type and then as I
18:16
went along I could get some nice tooling like as I type along I can countries me
18:22
say this as a dad which has a children with second map on and then everything
18:27
I’m a pond I get a depth of field as well and if you look at the jobs with
18:31
experience very fussy and you don’t necessarily know if you have the things
18:34
that you have to going back to presentation of you and hugs and things
18:46
that are coming up four types trip to our I’m really excited about to be
18:50
honest I don’t obviously months about that a single weight is gonna be
18:55
phenomenal if you write a lot of tests go to any sort of a synchronous code
18:59
this saves you from having to invert the logic of your programs by putting them
19:02
in callbacks and promises and so you don’t have to worry about that sort of
19:06
stuff we’re also getting readonly properties getting the ability to type
19:10
this in functions which allows you to migrate dirty jobs with code or just
19:15
write code the way you want a lot more easily got past nothing which is going
19:21
to make JPM use a lot easier
19:23
some other really nice static analysis stuff
19:26
one of the best things that’s coming is an improved typings acquisition story so
19:32
you can we’re moving away from a model of using an external to elect esd or
19:37
type things we want to just use the existing infrastructure that you get
19:41
today so for instance you’re already using and Kim or something like it to
19:45
manage all of your dependencies for your code so why not just move toward that
19:51
model for your DTS files and that’s what we have been thinking and so in the
19:57
coming months you’re going to be able to see or internet ways you’ll be able to
20:01
just play that brand with us soon and just see how this works out so I’m
20:08
really excited about that another thing is noble not nobel and honorable types
20:14
now know has been called the billion dollar mistake by its creator and in
20:21
javascript
20:22
we have no end undefined and so you know simple math that’s a two billion dollar
20:28
mistake so let’s let’s let’s get our losses back right by default Nolan
20:35
undefined are in each of your domains you have number in a number of known
20:40
undefined in string of Nolan finding that makes things harder cuz you have
20:43
more edge cases to think of so what’s next that we’re adding a mode where you
20:49
can just think of another undefined as their own having their own types and
20:54
with that the same way that you might you might describe something that’s a
20:58
number or string as number or string with a union type you would say I have
21:03
number or undefined so I think that’s really great I would love if you all
21:09
gave it a shot
21:11
it’s in aren’t we have nightlies and if you’d like
21:14
keep in touch we’re on github just believe it’s an issue or suggestion or
21:19
anything like that
21:20
bring us on Twitter Tweet us on Twitter sorry get us on Twitter I’m listening to
21:27
a ton of stuff on or get a chat room
21:30
and you can find example code for all of this on this repo up here and thank you
21:35
all so much for your time today I really appreciate you all having Eng comp today
21:39
thank you for that to the hosts it’s been phenomenal so thank you

 

 

AngularJS 4U is a development blog and Angular Community where you can share your latest ng development tips, articles, demos, plugins, modules and more.

Leave a Reply

Your email address will not be published. Required fields are marked *