Reactive Programming in Angular2 by Rob Womald

 

Angular 2 Reactive Programming Explained by Rob Womald at ng-conf 2016.

Transcript

0:00
everybody so I’m Robert
0:08
the developer advocate for a dealer or actually one of the developer gets
0:12
regular now on Twitter that Rob won’t but today I’m actually not here as a
0:17
developer advocate for angular I’m here as part of the NGX team so I’m here
0:22
representing all these awesome contributors so just one just like give
0:25
a shout out to these people because many projects around for like six months or
0:29
so and these people are awesome couple of them were here today in Abingdon
0:33
really good work so everybody give them a round of applause to start with
0:40
so we have a prequel logo I think designed that one night so what is it
0:48
directs it say its mission to provide a suite of lightweight interoperable
0:52
reactive services and components for angular to kind of our mission statement
0:57
is the services should be usable and isolation they should work together
1:00
seamlessly they should embrace reactor principles and of course if you watched
1:04
any of my talks before everything is a strange sense your ex today has a few
1:11
pretty interesting model so we have indirect store which is we’re gonna talk
1:14
about today we have a direct DEP tools which will also talk about today we have
1:18
a router and GRX router and I just want to chat up for Brandon and Mike they’ve
1:22
been working on this alternate implementation of routing for angular
1:25
too I think it’s super super cool I want everybody to try it
1:28
give us feedback let us know I think it’s a really really interesting idea
1:32
and we have this new and your baby which is an index tbe kind of reactive set up
1:38
there too and just as a note people make fun of all the time because like I’m not
1:43
big on having a really shining names right so like it’s very descriptive I
1:46
stored tools right that’s what we do three simple names in the future we
1:51
might have some more stuff again with really really super interesting so
1:54
resource might be a replacement for the dollars and resource that everybody
1:57
loves from 801 rain everyday lives that one thing I library and I don’t say if
2:04
you have an idea for something reactive and angular to please ping me we love to
2:08
have your stuff under organization so it’s the whole kind of ideas and
2:12
directors will have a place for really cool stuff that people can come and be
2:16
sure they’re getting high quality stuff that has tests and works
2:19
and it works really good companion bring her to talk about today is in direct
2:25
store and so reactive redux for angular to anybody in this room used redux
2:31
before you could cause I can’t actually see any of you so yeah so whats redux
2:40
and this is likely you gasp because I’m on the end of the team and I have to
2:43
react logo rightly god but Allah to do that so redux is a predictable state
2:49
container for JavaScript apps helps you have the patience to behave consistently
2:53
run in different environments since it’s something we are kind of interesting
2:57
things or developers are easy to test again this is something that I think
3:01
would really like a big deal for us really good developer experience such as
3:06
live code editing and then this time traveling debuggers so Danny removed
3:10
introduced redux
3:12
two years ago at a taco much like this one was react if I think and he showed
3:17
up this time traveling to bloggers that literally blew my mind and will show
3:20
that off today so it’s called redux
3:25
because it deals with this concept of reducers right so everybody’s probably
3:30
done reduction in javascript for but if you haven’t let’s do a quick review so
3:34
reducer or a reduction function is a thing that takes a value or accumulator
3:40
if you like the total here and then some values so it does something it returns a
3:44
new state
3:46
64 right 123 reduce it with this sum function we give it the initial value of
3:51
0 anybody know the answer to this the so what’s gonna pop hour
3:57
six yes good so if you like you can start to expand this does reduce idea
4:04
and this is kind of what directs and redux to rate so if you want it instead
4:08
of passing just a enter a value you could give it an array of what we call
4:11
actions right so it gives some sort of instruction to the production function
4:15
so in this case we’re gonna give it a try to counter function that takes the
4:19
total and inaction and if the action is increment then we’ll take the total
4:22
adopted by one and if it’s determined to do it and you know remove a part down by
4:26
one and then can we just take this array of actions reduce it and that would give
4:30
us a total of anybody excellence good intention so this is and again you could
4:39
expand this concept a little bit further so if you want to manage let’s say two
4:42
dudes right like everybody loves a to do list you can do the same thing rights
4:45
you dispatch an action of some sort and then you change the state which in this
4:49
case might be an array of two dudes rights are going if we add a contact
4:53
that to do to the end if we do we do we’re going to filter them down and we
4:56
completed were going to get an update that value so there’s a problem there
5:00
right like this isn’t real world because you never ever have everything in your
5:05
application at the simple array of things are going to happen right
5:07
applications happen over time they they last a long time and if you watched the
5:12
last talk format map of sake or anybody else’s talk to the observable stay right
5:16
we have a solution for this we treat everything as a stream right its
5:21
previous example which is to do then again we got this array of actions here
5:25
are going to reduce them that works kind of in theory but if we jump forward to
5:29
observable and we can do the exact same thing and instead will treat inputs to
5:34
our system instead of as an array will treat them as an observable of actions
5:38
rights he could think that is clicks or drags or whatever and then we’ll do that
5:42
same reduction function except that in observable and right we have this other
5:46
function called scan the problem reduces it waits to the end of the array Fort
5:51
gives you the results of scan works exactly like reduce accept that and give
5:56
you the intermediate value so each time you dispatch value to it it will give
5:59
you the intermediate state
6:01
because it never ends and we can effectively treat the entire application
6:05
lifecycle and kind of continually get the updated state so again with a
6:10
possible actions that could come from anything and in this case was going to
6:14
give her a we take an observable others actions and we scan over it we’ve had a
6:19
reduction function the previous slide and give it an initial state of empty
6:22
arrays and what we do in observables you subscribe to that state and so each time
6:26
you get a new action down the pipe will get the new state that pops up the other
6:30
end
6:30
ok with it so far
6:34
a demo of this is like everything else will build a to do list application and
6:40
apologies because like I’m on the England team I’m terrible at CSS this is
6:45
not gonna be like a car level kind of material design demo but I’m using the
6:48
chills I love it here but apologize for the bad CSS out of time so we got so
6:55
this is your basic angular bootstrap function right we’ve got a demo app and
6:59
what we’re reporting from N GRX tour here is a function called provide store
7:03
provide store takes is the kind of application configuration rights if you
7:08
like you can think about and direct store as a database and in-memory
7:11
database for application and each kind of reducing that we’re gonna described
7:15
as like a table right so it and Eric stores ADB than a reducer is a table
7:20
that’s not really the right analogy but it’s close enough for the right and I’ve
7:24
got my producer functions here so this is that to do something that we saw on
7:28
the undersides again we’ve got an array of today’s gonna start with an empty
7:31
state here and then we’ve got some actions at due to lead to do etcetera
7:35
etcetera etcetera
7:37
visibility filter and what to do is basically have a reducer effectively for
7:43
every kind of entity model whatever you wanna described in your application
7:47
rights you would have probably one producer for users and actions and you
7:50
know any number of things you stronger application you just have a producer for
7:53
it so it provides store does is it basically sets up kind of configures if
7:58
you like the internal database for storing and what allows you to do is
8:02
then you get your application itself so I’m gonna go down here and what I’m
8:06
doing is actually injecting store in stores the actual service that provides
8:12
right this is a service injectable anyway
8:15
application I like to think of it a lot like HDPE or any other kind of services
8:19
and the one you had its a primitive right it’s a it’s a very kind of civil
8:23
servants check the blood where it’s singleton and said you interact with
8:27
store and then getting to notice here is store is strongly typed so I have in
8:33
here somewhere near
8:35
interface that tracks the actual type of information coming out of this writes
8:40
this allows me to have a safe reduction function is one of the reasons I wrote
8:44
kind of storable redux is it gives you the ability to type stuff right and so
8:50
the way the unreacted this so in my at Wendys you get store and then you have
8:56
it’s an observable stories just an observable like anything else observable
9:00
and you can subscribe to it so you get out of this is the state’s
9:07
and then we can actually do is then you say store . dispatch some action to it
9:13
and so in action and Eric store and also and redux has a type which is a strength
9:17
so in this case we can say like anything and it takes a payload optionally in
9:23
this case I’m just like foo bar and so this is gonna affect anything because
9:27
this is like an action that nothing knows about what if we look here in
9:31
console we should see if I can go to counsel for you as well get an object of
9:38
the state of the application rights or remedies we have this visibility set to
9:41
show all and each time we dispatch an action will get a new state so just a
9:47
shade an action here if I wanted to do something like stored at dispatch it
9:52
type ad to do I don’t know text hello world we’re gonna subscribe story done
10:07
at checkout this one for you and we should get if the demagogues are with me
10:12
is to get the nation-state of know to do so and then we dispatch to do so now we
10:18
can look at NBC we’ve got a to do an application so that works nice and
10:24
easily until it actually those users in kind of a real-world contexts want to do
10:28
is instead of subscribing because typically what you think if you’re using
10:31
a good one kind of way of doing this he would do something like start out
10:35
subscribe and then you go like this . to do sequels the state DOT dudes and you
10:39
can do this this is absolutely fine but obviously no one warning the two we have
10:44
anything pipe right we have you understand surfable so it allows us to
10:48
do is I’m going to just do this to say this to deuce is store . select the
10:56
selected actually custom operate we’ve added to this observable and it gives a
11:00
couple of options for the first sorry Mike Ryan but I’m always going to be
11:03
this one first
11:04
start at select can take a string so I can say to do sets just obviously the
11:09
name of the entity right so that to do so here
11:12
matches with the name of my reducers here match this with Z thing that I
11:17
provided to my provides for a function here
11:19
alternately if you liked I take it a bit more than me you can do start out select
11:25
the state’s it takes a function as well and you can you state DOT to deuce and
11:31
so we’ve done here is sliced out a section of the store
11:35
state right we’ve gotten here we’ve said I only care about this little portion of
11:38
state and now absent a sign that observables in now to do so is an
11:43
observable of any and I should actually change this now to do is go into the app
11:49
and say do I need to import that from
11:59
do / producers
12:03
center right and so what I can do then is on my to-do list title component here
12:10
it takes the two dudes property and when you see a sink pipe to unwrap its right
12:15
so there’s almost no logic in the view here what are in the controller
12:18
whatsoever
12:19
all it said his make this observable available to the view and I’m using this
12:23
a sink pipes and rapid so if you look at our to do list components it takes an
12:28
input of to do so what I want you notice here is that there’s nothing observable
12:33
going on inside of this component right like it’s not a single I think about it
12:37
all this to do list component compares cares about is that gets to do is passed
12:41
into it from above the sink a couple of things you need to know about the
12:45
asynchronous city and it’s very usable it’s not injecting any services not
12:49
doing anything specific to this context all it cares about is that takes some
12:53
tattoos
12:54
the other thing is so interesting about this is that is actually quite clever so
12:59
we can put this change texan strategy here
13:02
and we can tell angular change detection strategy I’m going to change taking
13:08
strategy dot on push and what this means is that all of the components and all
13:14
the child components of this component will not be true they’re not gonna get
13:17
change detected they’re not going to do a comparison check to see if they’re
13:20
dirty because we know we can guarantee that the only way it’s going to change
13:24
is gonna come in from above and the a/c pipe they were using will actually go
13:28
hadn’t mark this is too early for us this gives us a big performance this to
13:32
be a really big long lists getting data from above it means we can just shut it
13:35
down and say nor this until the observable fires us any value right so I
13:41
get that chance action strategy on push and then we go back to our apt here so I
13:45
can just show you thats to do the same like that and i got a component in here
13:50
called new to do and so new to do is using a lot of material science stuff
13:55
and it’s got an action outputs to its job is to just allow you to enter a new
14:01
to do I’m actually using energy model here just to get the two do taxed right
14:05
that’s available here on the controller then one thing is when I click the
14:09
button that says at do go ahead and call this action . admits that’s gonna spit
14:13
this action what we’re doing here in this is this is a parent I quite like is
14:18
that this is the action that NJ Rex store cares about as good as if it was
14:24
an event of certain normal events and then again what I’m doing is in my app
14:27
itself here listening to that action event and just dispatched to the store
14:35
so that lets us just basically connects the the story of listener directly to
14:40
this to this component outputs again with almost no logic in a few whatsoever
14:45
so for now go into my component here do its thing and sale a learn
14:52
earn and GRX and that that it works
14:56
array that’s good so it’s basic to-do list right we can say like learn angular
15:01
to and we’ve got going on here is in our to do list of actions as well right so
15:09
if you look at our to do list it’s got an output of actions and then the one
15:13
thing we want to do this we want to check them off the list right we want to
15:17
make them completed or not so good inside of this component we do love
15:20
magic we have our check property so when a binding and change which the event and
15:25
we say sets that we passed to the event and the to do and then again we like
15:28
create this action object that nginx cares about which is this to do object
15:32
hearsay type updated to do
15:34
passenger payload an empty object with the to do and then the completed
15:39
property coming in from the view so in our apt we listened to that right and we
15:44
just at the store so we can do this this all works and if I change this year
15:48
changes here I’m gonna show you the kind of long Hansen tax this again would say
15:54
store . subscribe and so you’ve seen me do this a couple of times right now I
16:00
wanna see what’s going on in store and i cost like this out and this is find your
16:04
friends can make money to your console log debugging which is never cool to do
16:07
so don’t do that see the state changed at these checks you’ll see these things
16:12
will change right so what we can do though actually mean to kill their what
16:21
things that I really liked what I saw the first indication of redux
16:24
was time travel debugging right I mentioned at the beginning so Mike Ryan
16:28
and I talked about this little bit and I kind of went around in circles little
16:32
while and Mike sent me a PRT months back to was like oh hey by the way like I
16:36
didn’t do this entirely amazing and debugging thing so I want to show you is
16:41
i think is probably the first time this has been seen on stage
16:44
if you submit that we have an interactive tool components and directed
16:56
it down here or directors right here right now it’s gonna happen in my apt
17:01
added now is this kind of harboring side panel on the left screen right
17:07
do things in my application here so I can say like learn and GRX and learn and
17:16
jeweler to showing his every action that’s been dispatched into the store
17:21
right it’s gone and it’s done this fact that the state somehow and we can use
17:25
any point the application you can look at what that payload was so I set out to
17:29
do or what the state of the application was at that point in time
17:33
rights again it started with tests and then I have another I can log the second
17:37
state here and I had to look into the history of my application is really
17:42
useful you’re trying to debug a really complex application you like what’s
17:45
going on how’s this work what they do is look back and see like how did this work
17:49
the reason we call it time to have trouble debugging now is a bike down to
17:53
a couple more things here and i say like
17:55
you know like learn that I’ve tools
18:00
added 32 deuce right now my state now has three today as well i get out here I
18:05
can show you that there are three to do some I rain but super clever about this
18:09
is I can say actually what will the application of been like if I hadn’t
18:13
dispatch that second ad to do and I can cut it out of the equation right and the
18:18
application and reach computes from that point in time where like what the
18:22
application looks right at any point in stock that can say I don’t actually care
18:25
about this or this and watching a really incremental step back and forth to your
18:30
applications state should work I’m doing this I’m actually test the same updating
18:34
to do and if I going to cancel this one what’s it like at the point that I added
18:39
this new didn’t do this update to do but actually did an update to do after it
18:42
socially clever and then you can say like ok actually want to commit at this
18:45
point and then keep going forward and do more stuff is really really super
18:51
powerful pattern writes really really do this I think I think Mike and Brendan
18:55
are also working on a depth tool for the router as well to allow you to step back
18:58
and forth to the routing but this is something that like the blew my mind for
19:02
first time and it’s something that we really want to make a big deal with iraq
19:05
so it’s in there you can play with it
19:06
be able to get up now
19:16
that it’s it’s an organization that we really want to be like kind of a premier
19:22
place for angular to stuff if you have ideas please come and talk to me after
19:26
the talk a lot to talk about it
19:28
the ruling by the septal idea is it in redux Winterburn react they have a huge
19:32
amount of these different you have one that’s like built into the crime console
19:36
they have one that’s kind of you so this this kind of ridic settled in we have
19:40
here is a very simple component that could be extended to any number of
19:43
different things again if you wanna come and work with that please come and talk
19:46
to me that’s pretty much all from me go try this out but rather a drought send
19:51
any comments concerns on Twitter and thanks for having me

 

AngularJS 4U

AngularJS 4U

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 *