Angular 2 + TypeScript = true Let's Play! [w/ subs]



00:00:00 – did anyone check that stock-outs yeah
00:00:03 – all right some people that's cool so
00:00:06 – that was interesting because back then
00:00:08 – and that's one year ago right we were
00:00:11 – kind of experimenting with angler one
00:00:12 – and combining that with typescript and
00:00:14 – seeing how that would work and then one
00:00:17 – year later the shock we had like
00:00:18 – incredible shock right because and that
00:00:20 – that's shock was that Microsoft and
00:00:23 – Google actually decided to combine those
00:00:25 – two things in the next generation of
00:00:26 – anger that I was totally shocked by that
00:00:28 – because we were actually just having fun
00:00:30 – and seeing and giving typescript some
00:00:32 – love right so but then this actually
00:00:34 – turned out to be true as a matter of
00:00:36 – fact the shock was could be compared to
00:00:38 – when Steve Ballmer laughed at the iPhone
00:00:40 – at the iPhone first iPhone at how
00:00:43 – expensive it was when it was announced
00:00:45 – in 2007 and then later six years later
00:00:48 – he would announce the Lumia 1020 to
00:00:49 – about the same price so the shot was
00:00:51 – about the same yeah so very interesting
00:00:54 – so Angie as you know in Angie Europe
00:00:59 – last year the angler guys announced that
00:01:03 – they would deprecated angle one angular
00:01:06 – 2 would be completely different and that
00:01:08 – was kind of kind of a shock in the
00:01:10 – community and I'm pretty sure that you
00:01:12 – guys also were shocked the if you work
00:01:13 – with angular today how many work was
00:01:15 – angler by the way whoa it's a full room
00:01:17 – that's really cool so I'm pretty sure
00:01:19 – your instructors me when you heard this
00:01:21 – news right so you know the angular 2.0
00:01:24 – announcement backfired in the community
00:01:25 – people are really angry they didn't know
00:01:28 – what was going on because everyone was
00:01:30 – happy with longer one but the thing is
00:01:31 – that you know react was I'm gonna say
00:01:34 – this and don't shoot me for that that's
00:01:36 – my theory only oh of course I think when
00:01:38 – react was announced the younger one guys
00:01:40 – thought that they had to do some changes
00:01:42 – right because performance wise in hangar
00:01:45 – 1 I mean when you win when application
00:01:47 – is scale it really becomes slow right
00:01:49 – it's not really great in performance but
00:01:52 – it has an awesome architectural angle 1
00:01:54 – and testability is really great and you
00:01:56 – have everything you need like the tenant
00:01:58 – injection and the whole package but I
00:01:59 – think I had to do some stuff when came
00:02:01 – to performance right so so this was you
00:02:04 – know it was really dramatic in the
00:02:05 – community you know let this mark the day
00:02:07 – that I decided to get the h*** out of
00:02:09 – web development really dramatic
00:02:11 – so yeah it's interesting
00:02:13 – but then you know I think five months
00:02:15 – later or so this news came out and you
00:02:17 – know like whoa I was ecstatic myself and
00:02:20 – they said oh wait a second you know a
00:02:22 – script was actually attached script all
00:02:24 – along and Microsoft and Google decided
00:02:26 – to collaborate on the next generation of
00:02:28 – angular so they said okay we're going to
00:02:30 – use this this will be the next version
00:02:32 – and this article here that you see is
00:02:34 – from TechCrunch and the URL they're here
00:02:37 – to go if you went there you could read
00:02:38 – in URL you know h*** has not frozen over
00:02:40 – yet
00:02:41 – and these h*** hasn't frozen over yet
00:02:43 – how could marks on Google collaborate is
00:02:45 – really really crazy anyways this yeah so
00:02:49 – all right angular one so it was a full
00:02:52 – room here so you're all familiar with
00:02:54 – hangar 1 and all of those concepts here
00:02:56 – controllers the same is two-way
00:02:58 – data-binding or the infamous to a data
00:03:00 – binding model direct you have your
00:03:02 – directives and you know greatest ability
00:03:04 – you know forget all that because the
00:03:07 – next version of angler is going to be
00:03:09 – completely different I'm not saying that
00:03:11 – the stability will be deprecated no no
00:03:13 – no no you can fail fast your stuff but
00:03:16 – it will be different ok but all the
00:03:18 – other things you can just forget about
00:03:19 – that embrace angular 2.0 which is with
00:03:24 – typescript right ok an angular 2.0 there
00:03:28 – are two things that you need to go
00:03:29 – it's your templates and it's your
00:03:33 – components and it's all about those
00:03:35 – components so templates or selector I'm
00:03:39 – going to use both of those terms if
00:03:42 – you're if you've worked with web
00:03:43 – components you're going to love angular
00:03:45 – 2.0 because it's all about that and it's
00:03:49 – kind of like it's a component based
00:03:51 – architecture so it's like Lego right you
00:03:54 – put your bits and parts and you put them
00:03:56 – together so that's your components ok
00:03:59 – you're going to be excited now so no
00:04:03 – more two-way data-binding
00:04:04 – no more the new binding is one
00:04:06 – directional and as of today they call it
00:04:09 – the forward binding and the reverse
00:04:11 – binding but it's actually one
00:04:12 – directional binding and it's event its
00:04:15 – event based so what that means is that
00:04:17 – when you you click on the button for
00:04:19 – instance on your HTML you send an event
00:04:21 – to your component and any listeners of
00:04:24 – that type of event will get the updates
00:04:26 – selected right no more watch no more of
00:04:28 – that stuff that watches your whole thing
00:04:30 – and does the dirty checking it's one
00:04:32 – directional binding and that's one of
00:04:34 – the spearhead I mean they're
00:04:36 – spearheading angular 2.0 with this thing
00:04:38 – here because they're saying that this
00:04:41 – part here it will drastically increase
00:04:43 – increase your performance nine or to two
00:04:45 – so that's really interesting
00:04:47 – alright I promised you to show you code
00:04:49 – and I'm going to do that they're going
00:04:50 – to be a lot of code in this presentation
00:04:52 – because let's be honest we want to see
00:04:54 – the code we want to see how longer –
00:04:55 – looks like right but you know I was
00:04:59 – discussing with myself if I should do a
00:05:02 – lot of live coding because this thing is
00:05:03 – really unstable right it's alpha right
00:05:05 – now and the typescript 1 6 beta compiler
00:05:08 – is beta so I don't want to challenge
00:05:13 – fate right and just run some code that
00:05:15 – won't work so instead I will show you a
00:05:17 – lot of code and what's better than hello
00:05:20 – world right so this is an angular 2
00:05:23 – templates or selector okay
00:05:26 – and it looks kind of familiar to
00:05:28 – something doesn't it it looks like a
00:05:31 – directive doesn't it yeah that's the
00:05:33 – selector here is your component this is
00:05:37 – your typescript class this is such give
00:05:39 – code so as you can see here we're
00:05:43 – referencing angular 2 I was at the top
00:05:45 – and that's tag definition Wrangler – how
00:05:47 – many of you are familiar with subscript
00:05:49 – okay and like maybe 20% or so that's
00:05:52 – okay it's going to be that's really cool
00:05:54 – because then you'll see a lot of things
00:05:55 – here a lot of typescript talk if you
00:05:57 – want to work with language – side script
00:05:59 – is going to be your new friend I think
00:06:01 – because it's really native now with the
00:06:03 – language but it doesn't mean that you
00:06:04 – need to work with Oscar go you can use
00:06:07 – just equity of six and seven that's
00:06:09 – that's alright also but it's recommended
00:06:11 – a tax code that you use subscripts so
00:06:13 – alright so here's our components we're
00:06:18 – reporting components which is from anger
00:06:20 – to view three trap and then here is the
00:06:24 – selector hello world this is the
00:06:26 – template this is the HTML parts right
00:06:28 – and this is our view right here's the
00:06:30 – class HelloWorld and bootstrap hello
00:06:32 – world it's a simple as that you
00:06:34 – bootstrap on a component level right so
00:06:36 – so it's really as simple as that
00:06:38 – okay I thought that I'll run this part
00:06:41 – rest because it looks here quite safer
00:06:44 – so let's run this it's a thing called
00:06:54 – that you saw but you know since we have
00:06:56 – a touch script component here right we
00:06:58 – have to compile that so we use the
00:07:00 – typescript compiler to compile the TF
00:07:02 – code into JavaScript code alright now
00:07:04 – this part here may not be very popular
00:07:07 – among JavaScript developers right
00:07:08 – because you're really writing is another
00:07:10 – language it's a transpiler the
00:07:12 – typescript part so when we compile that
00:07:13 – code this is a list of the JavaScript
00:07:17 – that gets compiled right and yeah some
00:07:20 – of you will say wow this is crazy you
00:07:22 – know like what the h***'s going on here
00:07:24 – right but that's how it's that's how it
00:07:26 – is so you work at a developer you work
00:07:27 – with typescript code you don't work with
00:07:29 – JavaScript code you compile the
00:07:31 – typescript code into JavaScript and now
00:07:33 – that in itself may be a demotivation for
00:07:36 – some of you right for some of your
00:07:37 – JavaScript developers but that's how it
00:07:39 – is and but again you can use echo script
00:07:41 – six and seven like one six seven then
00:07:44 – you'll get this most of the stuff here
00:07:45 – at classes and everything so we compile
00:07:47 – that code and then if we look at the
00:07:51 – index.html this is how it looks like so
00:07:55 – what I'm doing basically is I'm floating
00:07:57 – tracer so you know what tracer does
00:07:59 – anyone know yeah cool so tracer is like
00:08:03 – you take ACMA scripts these components
00:08:05 – and it take compile them down check my
00:08:07 – scripts v so the browser can understand
00:08:09 – the code right because there is no
00:08:10 – support right now everything is so new
00:08:12 – so this is what we're going to do so we
00:08:14 – can so our browser can understand the
00:08:16 – code and then we're including system J s
00:08:20 – so here's the cool thing we're excluding
00:08:22 – system Ghia so we can import our
00:08:24 – JavaScript code right so instead of
00:08:26 – referencing the the Java code on the top
00:08:28 – script equals and so on we used to send
00:08:31 – JSON portraits dynamically and then
00:08:33 – we're closing the Amalur to code so
00:08:36 – system import a p– and app is the name
00:08:39 – of the JS file right Abdo JS let me have
00:08:42 – our selector here so very
00:08:44 – straightforward and it should print out
00:08:46 – the hello rope right
00:08:47 – so we run live server so we'll step
00:08:51 – localhost hello world great first anger
00:08:56 – Sukkot awesome alright okay cool
00:09:05 – now let's talk a bit about data sharing
00:09:09 – right now when you write your web apps
00:09:11 – you're going to need to work on data
00:09:13 – right dynamic data so so you can send
00:09:16 – data between your components and then
00:09:18 – you can show that and so on this is very
00:09:20 – simple it's similar it's the same as an
00:09:22 – angular 1 right so as you can see here
00:09:24 – we have to find the variable conference
00:09:26 – a string variable and we're printing out
00:09:28 – conference right and then we
00:09:30 – initializing that parts here so here's
00:09:33 – the constructor for this class and then
00:09:35 – we initialize that that was own and then
00:09:36 – that's how it works simple as that
00:09:40 – yeah so any variables that you define
00:09:42 – here in your class it will you print
00:09:44 – them out I mean they're they're
00:09:46 – automatically binded to your HTML code
00:09:49 – so that's how it works inside scripts
00:09:51 – how does that look like does it look
00:09:52 – like really weird I guess it looks
00:09:54 – pretty weird if you haven't worked a
00:09:56 – script before because you have those
00:09:57 – objects and classes but anyway now the
00:10:01 – interesting part let's see here we the
00:10:04 – interesting part the binding right the
00:10:07 – one directional binding so what I'm
00:10:09 – going what I'm doing right now is I'm
00:10:10 – extending my code right as we go through
00:10:12 – the presentation
00:10:13 – so you'll see we're adding more features
00:10:14 – to hello world tango so let's see here
00:10:19 – what I'm doing now is that I'm including
00:10:22 – events because I want to add a button to
00:10:25 – the left and then I want to click on the
00:10:28 – button and then I want to add a new row
00:10:29 – a Dubrow
00:10:30 – right so basically here's the
00:10:34 – interesting stuff so see events we're
00:10:36 – importing click which is an event and
00:10:37 – then if we go here we have click and
00:10:40 – have these weird parentheses right so
00:10:42 – when you use those parentheses it means
00:10:44 – this is the forward binding part so this
00:10:46 – is when you click this event is sent
00:10:48 – back to the component and then you have
00:10:50 – the listeners which are brackets so
00:10:52 – here's the bracket so what I'm saying is
00:10:54 – when I click this I want to call this
00:10:55 – function here which is over here and
00:10:57 – send in a
00:10:59 – object and listeners which are brackets
00:11:02 – for instance name will get the change
00:11:05 – here or we get the data so car dot name
00:11:07 – and same here so this is how it works
00:11:10 – and then as you can see here we have
00:11:12 – something called directives so you can
00:11:13 – also use directives here in this context
00:11:16 – and those directives would look like
00:11:18 – this our name car price this is
00:11:20 – something that you can also do angler
00:11:22 – too the interesting thing here that if
00:11:25 – you see here you have your component
00:11:27 – your logic here and you have your
00:11:28 – template here in one file right it's
00:11:30 – pretty cool because it means that you
00:11:32 – can work you can stay in the same file
00:11:34 – and work on your stuff now this is we'll
00:11:36 – see how how developers will consider
00:11:39 – that but you know at least from my
00:11:42 – experience were used to putting the
00:11:43 – templates in other files right another
00:11:45 – tml files and refer to them but here you
00:11:48 – can do both we can have a code here or
00:11:50 – you can put them other files because as
00:11:51 – we know this will be this will grow over
00:11:54 – time very much there so you can you can
00:11:56 – use both of those things alright but the
00:11:58 – cool thing here is that I just need to
00:12:00 – think about two things
00:12:01 – the selector and the component no more
00:12:02 – controllers no more directives no more
00:12:04 – of that no more filters and so on and so
00:12:07 – just two things so yeah ah so if you
00:12:11 – look here now we have a div and in this
00:12:14 – div we can now now we can reuse the
00:12:17 – components that's the cool thing so you
00:12:19 – can if you write if you create another
00:12:21 – div and you type click you can display
00:12:24 – again on the car then you can use that
00:12:26 – component again and any in any diff so
00:12:29 – when it is can reuse components that's
00:12:32 – how it looks like this is likely the the
00:12:35 – kind of like the short version of how
00:12:38 – the one-directional binding will work
00:12:39 – that looks really cool alright let's
00:12:44 – talk about dependency injection
00:12:45 – dependency injection is really
00:12:47 – interesting right because let's be
00:12:49 – honest we all want the I when we write
00:12:51 – our code because we want to get in the
00:12:53 – dependencies on runtime right anything
00:12:55 – else we need weak inject it and we can
00:12:57 – get it at runtime and that's really cool
00:12:59 – I want to wire everything on startup or
00:13:01 – at least wider I think so everything is
00:13:03 – available to us and then runtime so an
00:13:06 – angler one so everyone has a single root
00:13:09 – injector
00:13:10 – all right and what that means is that
00:13:12 – you wired everything on startup on the
00:13:14 – start of your module you write that you
00:13:16 – wire everything and you initialize your
00:13:18 – your dependencies and everything in at
00:13:21 – the startup level and that's it that it
00:13:24 – will be available throughout so that's a
00:13:26 – single injected angle drill has a
00:13:28 – hierarchical injector which means that
00:13:31 – you don't wire everything at the start
00:13:33 – but you inject your dependencies in your
00:13:36 – components and you get them as you need
00:13:38 – them all right and that's lazy loading
00:13:39 – right so we have lazy loading here and
00:13:41 – that's really cool because one of the
00:13:44 – greatest things is that no more string
00:13:47 – clips no more of that unification no
00:13:50 – more of those in education issues that
00:13:51 – we have right if you guys remember we
00:13:54 – always have to write like string you
00:13:56 – know when we defined dependencies in
00:13:58 – angular 1 we have to it's like string
00:14:00 – comparisons right that's how angler such
00:14:03 – as the dependencies has to do string
00:14:05 – comparisons now if we do many patients
00:14:07 – will screw all that up right so we've
00:14:08 – had some issues with that but I'm going
00:14:10 – to doesn't do that anymore
00:14:12 – it uses an interface which gets types
00:14:15 – for you right we're using typescript so
00:14:18 – we'll get the types and it's really
00:14:19 – flexible makes things much easier and
00:14:21 – since we have lazy loading that means
00:14:23 – that the performance will be much better
00:14:26 – than before
00:14:26 – so we'll get stuff just if we need them
00:14:30 – all right so let's extend our hello
00:14:34 – world a little bit so what I'm doing out
00:14:36 – that I'm including a dependency firebase
00:14:38 – right how many of you use firebase today
00:14:41 – or worse or play the firebase Yeah right
00:14:43 – that's really awesome for data right so
00:14:45 – I'm injecting a firebase dependency into
00:14:47 – my component so C imports angularfire
00:14:52 – Sarvis an array we're going to use also
00:14:54 – from angular fires this is included and
00:14:58 – then we're binding that to harvest this
00:15:02 – is the binding that we do as you can see
00:15:03 – it's on the component level we're doing
00:15:05 – the wiring and everything on component
00:15:06 – level not not in the startup of the
00:15:08 – application yeah so then we're injecting
00:15:13 – that here I'm gonna fire in our
00:15:15 – constructor and we're setting the array
00:15:16 – so it's pretty straightforward so if
00:15:19 – you're familiar with depends injection
00:15:20 – this looks quite straightforward
00:15:22 – so it's that's all you need to do inject
00:15:25 – to your dependencies like this included
00:15:26 – and it will be available if you need it
00:15:29 – in your code and that when I say when
00:15:32 – you need it means that's when I if I
00:15:33 – call the to do service here somewhere my
00:15:36 – component then the the instance is
00:15:38 – created the firebase instances may
00:15:40 – create them alright so just like anger
00:15:45 – one anger too has built-in components
00:15:47 – under one had built-in directives right
00:15:49 – that we could use let's talk about those
00:15:52 – thing components and this is I think
00:15:55 – this I think I find this quite fun
00:15:57 – actually because they make our lives so
00:15:59 – much easier
00:16:00 – it was components all right ng is right
00:16:03 – the most simple component components
00:16:06 – that we have so NGS you can have
00:16:08 – conditions so you can check for integers
00:16:10 – and you can print a div you can do
00:16:14 – string comparisons with energy if you
00:16:16 – can also call functions and return
00:16:20 – boolean value values for instance so ng
00:16:23 – if please straightforward kind of like
00:16:25 – ng show right from angry wrong ng switch
00:16:30 – switch case pretty awesome what's cool
00:16:33 – here is that we have you can have
00:16:34 – multiple cases which are similar right
00:16:37 – so in this case we have h2 that we have
00:16:40 – two K's twos right two days to
00:16:42 – interesting and so when one case two
00:16:45 – hits I will get both of those le are
00:16:50 – several like elements right and then we
00:16:53 – have default default choice ng switch is
00:16:55 – going to be handy when we when we start
00:16:57 – working in one or two we have ng style
00:17:00 – and this is this should be kind of like
00:17:03 – familiar to you from a good one we could
00:17:05 – do the same thing over there also so we
00:17:07 – can use style dot color like this and we
00:17:11 – also have ng style both of those work
00:17:12 – and ng style we can then pass a CSS
00:17:15 – class right so you can do like this
00:17:18 – that's pretty cool I don't think we're
00:17:20 – going to do much of that so when we work
00:17:22 – with our apps we would want to put them
00:17:25 – in other files or ITSs files and then
00:17:27 – reference them so ng style we have ng
00:17:31 – class so you can define your service
00:17:34 – class almost up here
00:17:36 – since all this is the various ways that
00:17:38 – you're going to we're going to use class
00:17:40 – so right now it's called just class it's
00:17:41 – not ng class its class so I don't know
00:17:44 – maybe they're gonna change it we don't
00:17:45 – know as I said it's alpha so this stuff
00:17:47 – is really moving so but we'll see but
00:17:49 – many case it's the same same thing this
00:17:51 – is in concept and so class and then you
00:17:55 – can define let's say colored that's the
00:17:58 – CSS class and it could say false it
00:17:59 – means that do not use this class
00:18:01 – basically true use that status class on
00:18:04 – my development and then what we could do
00:18:07 – also we can use several CSS classes we
00:18:09 – can use colored round and so on like
00:18:10 – this and finally we can also use
00:18:14 – collections right for instance or
00:18:16 – variables from our components so if we
00:18:18 – have initialized this class to the same
00:18:21 – thing here we could reference it like
00:18:22 – this in our HTML all right pretty cool
00:18:26 – mg4 ng4 is pretty pretty known to us
00:18:29 – from angle one you can loop through
00:18:32 – collections and you are same at like
00:18:33 – this and note the hash tag here so we're
00:18:36 – going to use that hash tag is the same
00:18:37 – as VAR right so VAR c equals something
00:18:39 – hash tag something and then print that
00:18:42 – out and this is this part is in our
00:18:44 – component and here's the initialization
00:18:46 – of the collection alright the next thing
00:18:49 – is really interesting it's pretty cool
00:18:52 – it's cool this thing is called ng non
00:18:54 – binding all right engine on button will
00:18:57 – means that there are some times there
00:18:58 – are parts of our web app that we don't
00:19:00 – want to compile and bind all right we
00:19:02 – don't want to do that I guess it's the
00:19:04 – case that may happen sometimes right so
00:19:06 – we can do that with the engine on
00:19:07 – bindable so as you can see here on the
00:19:09 – top here I'm just printing out the
00:19:12 – content variable value from our
00:19:14 – components but here I'm using ng non
00:19:16 – vulnerable and then doing the same thing
00:19:18 – but as you can see this is a print out
00:19:19 – as you can see it didn't work here it's
00:19:22 – worked here but here did not work
00:19:23 – sometimes you want to do that maybe
00:19:25 – because of performance issues I don't
00:19:27 – know we'll see but you can do that with
00:19:29 – ng no bindable
00:19:30 – that's pretty cool alright you can still
00:19:34 – use ng model but you shouldn't because
00:19:36 – ng model uses two-way data-binding that
00:19:39 – we have for my one now you can still use
00:19:41 – to a data binding language to write but
00:19:43 – you shouldn't do that right because we
00:19:44 – don't want to do that we want to have
00:19:46 – tasks or apps but I guess some cases
00:19:48 – that you know
00:19:49 – you'll have it you really need this then
00:19:52 – you could but you shouldn't do that yeah
00:19:58 – all right forms forms are most
00:20:01 – complicated and essential things in our
00:20:03 – web apps right forms are really the core
00:20:05 – of the stuff that we do so and angular 2
00:20:08 – will have forms you can you can actually
00:20:10 – implement forms through validation the
00:20:12 – whole package and it's really cool so
00:20:14 – let's assume that we're creating a form
00:20:17 – will use the ng control so ng control is
00:20:20 – a field right ng controls used on a
00:20:22 – field in your form or Excellus if we had
00:20:24 – an input field then we use ng control
00:20:27 – and in this case we're calling that name
00:20:29 – this is how you do that for each field
00:20:32 – here's a control group so if we have
00:20:35 – several fields we can we can we can
00:20:38 – create a control group that initiate
00:20:41 – initializes everything right so we don't
00:20:43 – need to ng control equals new and runs
00:20:46 – on we can have a control group for
00:20:47 – everything so this is how it looks like
00:20:51 – and here is our form alright so as you
00:20:57 – can see here again hash I guess create a
00:20:59 – local variable F equals farm again the
00:21:03 – parentheses for for for the binding for
00:21:05 – the year submit and on submit I want to
00:21:08 – pass the value of F which is my form
00:21:10 – it's really cool this is all you need
00:21:12 – right this is the post basically right
00:21:14 – so you do the post and you send the
00:21:16 – values of your form like this so let's
00:21:19 – say if your if you've I mean I come from
00:21:21 – a dotnet background so don't shoot me
00:21:23 – for that but let's say if you're working
00:21:25 – with MVC or something and don't met them
00:21:26 – you know you have all those really ugly
00:21:28 – stuff from razor
00:21:29 – yeah I'm pretty silly criticizing market
00:21:31 – of stuff that's good yeah so you have
00:21:33 – this razor stuff using form sub on
00:21:35 – submits post do some so much code right
00:21:37 – but here we can do that to the angler so
00:21:40 – we can submit our stuff just by one one
00:21:42 – one code here one line so we won't need
00:21:44 – a back end the whole like back end stack
00:21:46 – with sea shark or Java or anything you
00:21:49 – can just work with anger to the whole
00:21:50 – thing so and then basically here we're
00:21:55 – creating a label and then ng control
00:21:58 – this is the first name yeah so
00:22:00 – oh that's the f*** okay and this is this
00:22:04 – is the function that I showed you
00:22:06 – earlier
00:22:06 – so almost upon submit sound value so
00:22:09 – this basically here we're printing that
00:22:10 – out and then when you put that value now
00:22:12 – what you're going to see is you can see
00:22:14 – an object with the fields right so in
00:22:17 – this case we had one field first name so
00:22:20 – it's going to print object with that
00:22:22 – field basically oh yeah
00:22:26 – so validation right validation is really
00:22:29 – important right and it's real easy it's
00:22:31 – at least that's what it looks like right
00:22:32 – I'm I'm going to so new right I've just
00:22:34 – read stuff about it and experimented
00:22:36 – with it but it looks really easy if
00:22:38 – that's how it's going to be
00:22:39 – let's hope that read it's awful but I
00:22:42 – don't think the dare change stuff now
00:22:44 – it's going to be crazy
00:22:45 – the anycase validation really simple we
00:22:49 – have control we use validators which
00:22:51 – comes from anger – well that validators
00:22:53 – don't require that's it this field is
00:22:55 – not required okay so and in our
00:22:59 – component we can we that's where we put
00:23:01 – the work we define that stuff that's
00:23:03 – where we define the validations and
00:23:05 – everything initialize them so what we
00:23:07 – can do also we can inject the form
00:23:08 – builder because we don't want to do like
00:23:10 – this for each control right it's so many
00:23:13 – so many fields don't wanna do that
00:23:15 – so instead we inject the form builder
00:23:17 – and then we can group them group them
00:23:19 – like this and then just such a quiet all
00:23:21 – of them and here's the initialization
00:23:23 – the first name okay we can fetch the
00:23:25 – control like this all right so this is
00:23:27 – one builder and you can fetch it like
00:23:29 – this from your view okay so usually when
00:23:35 – you do validation we want to have some
00:23:36 – conditions right so firstly you have the
00:23:40 – valid but valid right so you check for
00:23:41 – valid if my form is not valid then I
00:23:43 – should show a warning right simply is
00:23:45 – that if let's see again you can also do
00:23:51 – it so this is done on the fun level you
00:23:53 – can also do it on control level so the
00:23:56 – first name is just first analyze then
00:23:58 – show that show that word both of them
00:24:01 – work right form level control level okay
00:24:04 – it's going to be like verbose there's
00:24:05 – nothing you can be longer longer but
00:24:07 – yeah you can also do like this you can
00:24:10 – use the
00:24:11 – has error you can use that on a class
00:24:13 – for instance and then you could check
00:24:15 – the control so in this case you want
00:24:17 – some some styling right we want to show
00:24:19 – some color on the validation so the
00:24:21 – first time we got valid and certain
00:24:23 – stash this is interesting because it
00:24:24 – means that if the user has actually
00:24:26 – edited the field or touch this from his
00:24:29 – device then you should and it's not
00:24:32 – valid then you should show the work in
00:24:33 – the validation right ok so it first name
00:24:39 – you can also first-time control has this
00:24:41 – has error methods that you can use so
00:24:43 – because sometimes you we may have other
00:24:46 – conditions right not just required maybe
00:24:48 – we want to have things like you know is
00:24:51 – this valid like it's correctly written
00:24:54 – for instance an address has to have this
00:24:56 – and this and that condition and that's
00:24:57 – on the city and so on so we can have
00:24:59 – several other conditions so that one has
00:25:02 – a required then you can use this then
00:25:04 – you can show the error sorry but that's
00:25:07 – getting longer so again we can also use
00:25:10 – it on form so the form has ever required
00:25:13 – and it's the first time control then you
00:25:16 – show that this error okay if let's see
00:25:21 – here we can also use something called
00:25:23 – fine so we can find our control from the
00:25:26 – form and then if that is not valid and
00:25:29 – first name is touched again with citizen
00:25:32 – just to illustrate to find mechanism
00:25:34 – that you can use okay many stuff that
00:25:36 – you can do now when it comes to forms
00:25:38 – and validation alright so as I mentioned
00:25:41 – earlier sometimes you have like address
00:25:43 – or zip code that has conditions red so
00:25:46 – it has to start with with the some
00:25:48 – specific number or something like that
00:25:50 – so we can do that we can have custom
00:25:52 – validation okay so how do we do custom
00:25:55 – validation we can use the validator
00:26:00 – suppose so what we do is that we combine
00:26:02 – stuff right so we want to use required
00:26:04 – but then we can also we want to create
00:26:06 – our own custom validation in this case
00:26:08 – as if validator so this is a function
00:26:10 – the validator text and control and then
00:26:13 – if the control value does not match it
00:26:15 – doesn't start to 0-6
00:26:16 – then you should return this one invalid
00:26:20 – so it will be invalid if it does not
00:26:22 – start with zero
00:26:23 – this is custom validation so so if
00:26:26 – another we check on the control if it
00:26:28 – has the error invalid it right which you
00:26:31 – have defined here then we should show a
00:26:33 – lot Asian I think this is really cool
00:26:35 – because it gives us kind of an easy way
00:26:38 – to do custom validation all right so
00:26:43 – there's something called observer which
00:26:45 – is observable right we can use observers
00:26:47 – on our form values so basically if
00:26:50 – someone clicks on a field or anything we
00:26:52 – can listen to that events so that you
00:26:55 – can do that by the observer so in this
00:26:58 – case we're just listening on Dali
00:26:59 – changing the first name print and then
00:27:02 – print the value that it was changed to
00:27:04 – right so this is basically like KeyUp or
00:27:06 – something in JavaScript right key up or
00:27:08 – click sir yeah and the same thing here
00:27:10 – observer on the form level so and here's
00:27:13 – the cool thing
00:27:14 – so what I'm doing here is I'm typing a
00:27:15 – first name right I mean typing a first
00:27:17 – name John right so when I type j party j
00:27:22 – going to listen to that and then so on
00:27:24 – right so I think you see the idea here
00:27:26 – and here is the value from the form as I
00:27:28 – mentioned earlier it turns out an object
00:27:29 – with the control so J and then I
00:27:32 – continue with Jo and then John so this
00:27:35 – is how it works
00:27:35 – that's how observers work all right a
00:27:39 – little bit about component about router
00:27:42 – near a component arter it's really just
00:27:44 – one slide because it's really new I mean
00:27:46 – it's really there's so much mystery
00:27:48 – around the component router that yeah
00:27:50 – we're just gonna but is the thing that
00:27:51 – is known at this time is that you can
00:27:54 – have a sink low ting of components and
00:27:55 – that's pretty cool right if you want to
00:27:57 – route to sort of components that is done
00:27:59 – asynchronously so there's been a lot of
00:28:02 – talks about the router rights and from
00:28:04 – anchor1 and everything they're saying
00:28:05 – they've done the new component Wrangler
00:28:07 – to is going to be awesome they're saying
00:28:09 – and really excited about that
00:28:11 – so let's see how it works out but I
00:28:13 – think we know that it's a thing and it
00:28:15 – would be much better than the PD setter
00:28:18 – ok so now we get to the really
00:28:21 – interesting part right migration so I
00:28:25 – know many of you have angry one
00:28:27 – applications running today in production
00:28:29 – right how many of you have apps in
00:28:31 – production today
00:28:32 – and you're 1x yeah a lot of people like
00:28:35 – 80% so how are we going to tackle that
00:28:38 – right how do you do migration right
00:28:40 – because I'm going to run so different in
00:28:42 – anger to and if you want to work with
00:28:44 – the new version how do we do that in a
00:28:46 – smooth way so okay the good news is that
00:28:49 – you can run angry ones anger to side by
00:28:52 – side so if you want to work with anger
00:28:55 – too you can start your application anger
00:28:57 – to stuff while your legacy stuff anger
00:28:59 – one is working as it should be and they
00:29:01 – can cross they can work together so you
00:29:03 – can send services inject services from
00:29:05 – anger 1/200 too but you have to do some
00:29:07 – rewriting right so this this here
00:29:11 – actually this news here was announced I
00:29:12 – think two weeks ago or something and
00:29:14 – honestly the blog post and the blog of
00:29:16 – the anguish team as I said that they're
00:29:17 – going to include ng upgrade libraries
00:29:19 – that you can use that will make things
00:29:21 – easier so what you have to rewrite
00:29:23 – there's no like there is no seamless
00:29:26 – migration here we have to either rewrite
00:29:27 – or you can run them side-by-side so if
00:29:30 – you want to rewrite your stuff you can
00:29:32 – do that you basically have to think that
00:29:34 – each directive will be a component and
00:29:36 – you can do that step by step now again
00:29:38 – the anger team has published a step by
00:29:40 – step guide a really specific guide that
00:29:42 – will help you on your own your
00:29:44 – applications so so I recommend checking
00:29:46 – that out and then and then trying to go
00:29:50 – through the steps once the time is right
00:29:52 – right I'm going to risk the offer I mean
00:29:54 – it's going to be final in 2016 that's
00:29:56 – that's a plan so far so that's why she
00:29:59 – will be from ready okay but done okay
00:30:02 – the question is why should we upgrade
00:30:03 – right why should we do that okay there
00:30:06 – are many reasons so that one of the main
00:30:08 – reasons is that is that it's going to be
00:30:10 – much better performance wise right so
00:30:13 – you're going to have three to five times
00:30:15 – faster rendering and then we have you
00:30:18 – know like temporary compilation
00:30:19 – everything is done the pre time like
00:30:22 – before you compile stuff in run time
00:30:24 – happened just before we have caching and
00:30:26 – the views and they're saying there'll be
00:30:29 – a lot of low remember you said you know
00:30:30 – and yeah much powerful something the
00:30:34 – cool thing is D I'll is the VI that I
00:30:36 – talked about also and you know and well
00:30:40 – one of the features that we're looking
00:30:41 – forward to is the server-side rendering
00:30:43 – actually because that you can do render
00:30:46 – server-side you don't have to let the
00:30:48 – client do the rendering for you so this
00:30:50 – is also mysterious don't know much about
00:30:52 – it yet but they're saying that would be
00:30:53 – possible what workers are really
00:30:56 – interesting because you'll have some
00:30:57 – threads isolated stretch that could run
00:31:00 – your application which means you have a
00:31:02 – very smooth UI and you know like mobile
00:31:07 – app supports so for mobile Mobile is
00:31:10 – going to be much better much easier and
00:31:12 – faster than before
00:31:14 – that's all this information that's
00:31:15 – coming from the angular team right
00:31:17 – we don't have experience with this yet
00:31:18 – right so yeah it's a promises but we
00:31:22 – don't we don't know yet but let's let's
00:31:25 – see all right and there's more to come
00:31:27 – more to be announced
00:31:28 – ok so if you should so when anger to is
00:31:31 – production ready
00:31:32 – should you upgrade well my answer is yes
00:31:35 – you know because the world is moving
00:31:38 – right it's moving really fast and these
00:31:41 – guys thought that you know this is this
00:31:42 – is the best approach for angler we have
00:31:44 – to do it like this and I think this is
00:31:47 – again it's my personal opinion that they
00:31:49 – really got inspired by react maybe rest
00:31:52 – because react is quite fast so they have
00:31:54 – to really change the architecture so but
00:31:56 – if you ask me if you should upgrade yes
00:31:57 – I would say yes ok what I'm going to do
00:32:00 – now is you know there's been a lot of
00:32:02 – stuff going on in the community around
00:32:04 – anger too so I'm going to show you some
00:32:06 – stuff for instance here's this guy Sean
00:32:09 – McKay who works at meteor all right near
00:32:11 – UJS and he made the performance test ok
00:32:14 – he wanted to compare a blaze react
00:32:17 – angular meteor and angers two combined
00:32:20 – with with with the meteor ok so this is
00:32:25 – going to be cool okay look at this okay
00:32:28 – these are some of the deterministic
00:32:30 – tests that he made okay so okay and this
00:32:33 – in this case here what he did basically
00:32:35 – that he was generating roads on the Dom
00:32:37 – okay like 50,000 60,000 roads on the Dom
00:32:41 – and you know this is what he got okay as
00:32:44 – you can see angler to alpha is quite
00:32:46 – ahead of the others here right
00:32:48 – angry bomb 4 is the worst here right it
00:32:51 – gives you an idea this case angry to
00:32:54 – alpha really triumphs right
00:32:56 – so and there we have react just yeah
00:33:00 – behind anger to other and on this is the
00:33:05 – one test the second that he made was
00:33:07 – that he tested changes okay and this in
00:33:11 – this case basically what he did was that
00:33:12 – he clicked on the button and he wanted
00:33:15 – to color light several text text fields
00:33:17 – right so click on the button button and
00:33:19 – then you have several several text field
00:33:23 – having like a color red so he wants to
00:33:25 – find Waldo right so he clicked on button
00:33:27 – and Waldo all the world of elements in
00:33:29 – the Dom were were a colored red angular2
00:33:32 – again just you know smashed everyone I
00:33:35 – know to Arthur as way ahead right but
00:33:39 – you know again this is just contest that
00:33:41 – he made and but he also put put those
00:33:45 – tests and the code on github so you can
00:33:46 – you can touch that yourself and see what
00:33:48 – you get but you know this is insane
00:33:50 – right I mean energy also is way ahead
00:33:52 – here in these days so that's that's cool
00:33:55 – that's cool let's see that's gonna
00:33:56 – happen you know we're just building the
00:33:58 – anticipation here right okay this is do
00:34:01 – it this is the one thing the other thing
00:34:03 – is that you know just well pleum
00:34:05 – Patrick's tables and these guys have
00:34:07 – done an incredible job in the community
00:34:08 – they've created an angler to survey and
00:34:10 – over 2100 anger develops across the
00:34:13 – world participated in this survey i I
00:34:15 – thought this would be interesting to
00:34:16 – include to show you in the presentation
00:34:18 – because it will give us kind of an idea
00:34:20 – of how things will progress and
00:34:22 – community so ever I mean even angularjs
00:34:25 – Oslo participated in this survey so so
00:34:28 – let's see let's see some of the answers
00:34:30 – here okay okay so what do you prefer
00:34:33 – when you're going to work with anger to
00:34:34 – what kind of transpiler and we talked a
00:34:36 – little bit about that I'm going to use
00:34:37 – type script like my script five Babel
00:34:39 – you're not sure other we see here a text
00:34:42 – shift is on top that's really cool
00:34:44 – that's really cool to see so if I ask
00:34:47 – you now when the time is ready friends –
00:34:49 – are you going to work with that do you
00:34:51 – want to work with a tag script you can
00:34:52 – raise your hand for yes you want to work
00:34:54 – with type scripts what I'm going to do
00:34:55 – is ready okay it's like more and more
00:35:00 – like yeah that's cool so maybe 60
00:35:03 – percent or something that's that's great
00:35:04 – you know I'm actually I'm happy to see
00:35:06 – that you know because the beginning of
00:35:08 – presentation very few of you has worked
00:35:10 – right so to see that really makes me
00:35:13 – happy so and what kind of tempted by any
00:35:16 – context are you going to use this is
00:35:18 – just you know because some people really
00:35:21 – found it drastic that you have this
00:35:23 – thing the parentheses on the brackets
00:35:25 – it's really weird right so a lot of
00:35:27 – people refer want to use this way of
00:35:30 – doing it this is the actually standard
00:35:32 – way the default way but you can also do
00:35:33 – this I think this is just an early
00:35:35 – answer I think it will progress to this
00:35:38 – eventually it just have to get used to
00:35:40 – it but still interesting okay and this
00:35:45 – is something I talked about earlier you
00:35:47 – know the templates are we gonna have
00:35:48 – them in the component file or are we
00:35:50 – going to separate them from the
00:35:51 – components and you know answer is we're
00:35:53 – a bit mixed here we have both an
00:35:56 – external file for instance that's I
00:35:58 – think also how how it's going to be
00:35:59 – we'll have both well maybe some cases
00:36:02 – will have them in the same file other
00:36:03 – cases we'll put them another file a lot
00:36:06 – people answered external file
00:36:07 – I guess because we're used to that from
00:36:09 – angler one so this may be this may be
00:36:11 – the case in line some people answered
00:36:13 – you know I don't recommend any line at
00:36:14 – all because here it's really makes
00:36:16 – maintenance really hard we shouldn't do
00:36:18 – which using inline templates at all and
00:36:21 – so on okay
00:36:23 – routing alright we don't know much about
00:36:25 – the component I just heard it's going to
00:36:27 – be great so a lot of people said yeah we
00:36:30 – have also UI router we'll see and you
00:36:32 – know people not sure
00:36:34 – and so it's kind of distributed and you
00:36:36 – know and some saying they're gonna write
00:36:38 – their own custom router yeah I'm not
00:36:41 – going to go to all of them here but know
00:36:43 – what kind of frameworks we'll use with
00:36:47 – angular 2 right so we have our hjs
00:36:50 – that's really cool because observables
00:36:52 – you know i can use observables there and
00:36:53 – that's really been interesting
00:36:56 – firebase immutable J's angular meteor
00:36:59 – and kind of distributed this is this
00:37:02 – question here is probably the most
00:37:04 – distributor has the most attributed
00:37:06 – answer right and it says you know we'll
00:37:08 – use the server rendering stuff that I've
00:37:09 – announced we don't know much about it
00:37:11 – yet but we've heard a lot of great
00:37:13 – things so probably yes I answered yes so
00:37:15 – that one because you know
00:37:18 – yeah so editors that I find a question
00:37:22 – quite interesting because you know how
00:37:26 – about you guys do any of you use
00:37:28 – webstorm when you work Langer very few
00:37:31 – how about sublime yeah you know like the
00:37:36 – save in for instance him okay what other
00:37:42 – okay yeah
00:37:45 – myself I switch to visual studio what
00:37:47 – are you city code yeah like two percent
00:37:51 – one percent yeah you didn't see the code
00:37:54 – yeah only myself
00:37:55 – yes nah yeah so I think weasel series is
00:37:57 – great I use that in the small the whole
00:38:00 – world earlier I used webstorm before but
00:38:02 – I switched to visual studio code because
00:38:04 – you know I'm working on a plan I think
00:38:05 – it's get its hits know the way of you
00:38:07 – know it work Visual Studio will get used
00:38:09 – to to it so okay
00:38:12 – yeah bill to this is interesting so as
00:38:14 – you can see here gold is really on top
00:38:17 – here
00:38:17 – most cups to build so how about you guys
00:38:19 – go do use gold for your for building
00:38:21 – wraps cool what about the grunts yeah I
00:38:25 – think it's those two so yeah it's like
00:38:26 – 50/50 what factors in JSON okay what
00:38:33 – other frameworks other than angular
00:38:34 – angular 1.x that was an interesting
00:38:36 – question a lot of people answered jQuery
00:38:38 – react that's interesting listen you want
00:38:41 – to buy you want to combine and combine
00:38:43 – those that's interesting how many of you
00:38:45 – use jQuery today with angular or you
00:38:48 – know your query by itself
00:38:49 – yeah so it's like sixty percent I'll
00:38:52 – react for instance I never asked you
00:38:53 – about yeah
00:38:54 – oh okay just 8% 8% fully okay well it
00:39:00 – makes sense you know you're coming to an
00:39:01 – anger to presentation like yeah so you
00:39:04 – wouldn't probably work here
00:39:06 – what are we looking forward to it really
00:39:08 – what are you looking forward to anger to
00:39:10 – it's really a hard question because we
00:39:12 – don't know much yet really the change
00:39:15 – detection and the binding really got me
00:39:17 – so I'm happy for that let's see how that
00:39:20 – turns out experience level line or 1x
00:39:24 – you know a lot there are a lot of
00:39:25 – advanced developers out there and
00:39:28 – that's kind of normal I think because
00:39:29 – angular 1.x has really become popular
00:39:31 – around the world so so and then you have
00:39:34 – you know a lot of times people may be
00:39:35 – less experts but they're still 20%
00:39:37 – experts 21% that's a good thing
00:39:40 – angular 1.x is being used like
00:39:43 – everywhere so okay finally I want to
00:39:47 – really recommend this book here ng book
00:39:50 – to a good colleague of mine the polygon
00:39:53 – mine gave me a like showed me some dress
00:39:55 – it's in draft right now people they're
00:39:57 – writing the book it's not complete yet
00:39:59 – but I've taken a look or two on it it's
00:40:01 – really inspired me for this talk I think
00:40:03 – this book this book is going to be great
00:40:05 – because it really goes into depth of
00:40:06 – anger too as it is today of course we
00:40:09 – all know what's going to happen in seven
00:40:11 – nine months you know but it really gives
00:40:14 – you a good idea of how anger to looks
00:40:17 – and behaves like so definitely recommend
00:40:20 – a ball and I also recommend checking out
00:40:22 – the blog of the angular depths right in
00:40:25 – seclusion my slides


Video Url:
http://youtu.be/ZoRry-cW1TQ

Comments

comments