Angular2 with AngularFire and Async by David East

Angular2 with AngularFire and Async explained by David East at ng-conf 2016.

Transcript

0:00
high that’s why we have ample time and then we can do it I’m romantic until
0:07
another actually comes in he cancels hi I have a problem
0:12
yeah sure I do and now that I’m in a room with 1,400 of my closest friends
0:22
it’s time for me to come clear
0:32
observables
0:38
everything to me is an observable
0:41
things that I see that are observable they don’t even know that there are
0:45
surfable
0:47
enough because not all observables look the same because observables are really
0:57
just a raise their laid out in time and so we’re used to raise that are laid out
1:03
in memory it’s really easy to wrap your head around memory as a physical
1:06
contract but you can wrap your head around arrays as a physical contract
1:11
then her time as a physical contract that you understand observables
1:16
that’s all they are like my dog my dog is observable just an example of barks
1:24
and this is my actual dog and then doll events there
1:32
continuous stream of key up a mouse and click events
1:41
even this presentation is an observable it’s just an observer of slides look at
1:50
all this and I thought to myself ok well what if my database was invisible like
1:58
what if every single time I updated a piece of data it’s sent that update to
2:04
every connected device within milliseconds
2:11
exactly what does the Fireface 400 right turn up for fire base first base is a
2:23
platform for building real-time apps and there’s three main features several
2:28
assault indication static web hosting and what I really want to talk about
2:34
today is the real time database
2:38
so the way the real-time database works is is that we give you a Euro when you
2:43
sign up for an account and you can use this Euro to store data against Russell
2:47
path so in this case against these / people location just storing an array of
2:54
people face Jess library I can create a reference to the real-time database
3:02
using that URL and then I can subscribe to events that tell me whenever anything
3:07
has changed in real time so I get granular updates like whenever a child
3:12
has been added to the list are removed or changed and then I can coalesce all
3:17
of these events into a synchronized array like we see at the top
3:22
now if you use they go on before just like literally everyone in this room
3:27
then you would see that something right here will work with angular one and
3:34
that’s that these callback functions are asynchronous so they’re not gonna work
3:38
with the dangerously with the Costco that apply
3:42
exactly why we built a fire one is he wanted to synchronize collections in the
3:49
real-time database with the Dodge asleep so when I go to hit the scene I thought
3:55
to myself like me I’m really excited to build a library with angular too because
4:02
the real-time database looks exactly like an observable
4:09
you can talk to me and David we have zones and like everyone knows zones are
4:17
the bee’s knees like they’ve they patch asynchronous events so we don’t need to
4:31
call scope not apply anymore so why don’t we just use the regular fire base
4:35
library really good question
4:40
looked at him and I said go you built a jew to work great with observables
4:48
model asynchronous data streams in a real-time database is an asynchronous
4:54
data stream so we’d go to library
4:58
David your rights again
5:05
Geoff cross an eye on building the latest version of angular fire and our
5:11
goal was his you want to synchronize collections as observables and this is
5:18
actually we came up with so this is your typical angular two components and all
5:25
we’re doing here is we’re importing the angular fire service from the English
5:28
fire module and then we can then in check that into the constructor of our
5:33
components and from there we can call this list method that creates a
5:38
synchronized array as an observable crazy to you
5:43
binding in your template is really easy so we can create an unordered lists with
5:50
some list items and then do in G four and we can actually iterate over this as
5:55
if it were an array and memory but because it’s not repaid the async
6:00
because it’s an array that lives over time and then every single time that my
6:05
real-time database updates this template updates automatically as well
6:12
this really does is that simplifies building real-time apps with angular to
6:17
today I’m super excited to announce that regular fire to is actually available in
6:25
beta
6:32
how it works
6:38
radio is just a chat chat up to the right here really see anything because
6:43
there isn’t anything so we’re gonna go and we’re gonna build a nap I call
6:48
Flexjet and it’s just chat and one big old xbox it’s pretty simple and i pieces
6:56
to flex check we need a header me a place to render our messages and then we
7:00
need a place to enter messages so a text box with a button to start out going to
7:06
create a header and get an h3 call this flex chat safe and then what’s weird is
7:14
a perfectly styled on how that happened then I’m going to create my check
7:19
container and create a text box for the button but actually cheated and went
7:27
ahead and I create a custom component with angular to input bar bar does that
7:33
for me so right here I can just take something in it send don’t clear it so
7:40
now what I want to do is to render my list of messages do that by using
7:45
another custom component I made conflicts chat message and inside
7:50
Flexjet message I want to render and in an array of messages do that i mean he
7:56
is energy for that let message of messages and then that will iterate in
8:04
render each item at a time but this is a custom components so actually can bind
8:09
to a property so this cost component has a property of message and what’s great
8:14
about this as I can pass in the message from the injury for into the Component
8:19
AV gonna happen because I have any messages so when you go to the actual
8:25
component itself and there’s some red lines as shifts Nov Oscoda stripping
8:30
right now don’t worry it’s everything safe
8:32
and what we’re gonna do is create an array of messages inside of my
8:38
constructor
8:40
populate just two little messages so say this . messages and asset that to an
8:46
array with two elements L first text of high and then another text like someone
8:52
who’s like really excited for now I’ll save and we have an error because I
9:00
called a message and then we have two little chat messages but also want to be
9:10
able to add messages so go down into here and say ok let’s send so to do that
9:15
and go back into my component and I have an olympic bar that actually raises a
9:21
custom event like all sent so whenever something is sent
9:26
we want to call a method in morning call add message and we’re gonna pass through
9:30
the dollar event never have that really go back into the component and create
9:36
our ad message which overturned a state tax so now I can say this . messages not
9:43
push
9:45
and we have a new message was just in the right now are saying hello this is
9:56
cool but not real time and up to database anywhere someone to bring in
10:01
angular fire so that way we do that is to start out in the 90 S and this is
10:07
where we do all of our bootstrapping bootstrapping essentially says I’m going
10:10
to set up things ahead of time I’m gonna tell and you learn what services I want
10:15
to inject and you know any values I want to configure ahead of time so we want to
10:19
configure it is we want to import from the angular fire to muzzle import the
10:28
fire service providers which is the whole set of things that allow us to
10:32
inject them later and then we’re gonna also import this default fire
10:37
dysfunction and we can do is you can use these inside bootstrap so we can let you
10:43
know that we have some providers and then we’re also gonna let it now that
10:47
we’re gonna use this default fire dysfunction that sets up our URL to our
10:53
real-time database so mine is called flash chat to first base I dot com
11:00
and she did nothing so now I’ll go back to the components and what I want to do
11:08
is a first import the angular fire modules import the this from their fire
11:17
to and you’re wondering why I actually always leave this blank is because it’s
11:22
good to some really awesome where I can see everything that’s available to
11:26
import she’s one of my favorite things so now I have this imported 7 the
11:32
constructor injected and I don’t want this in memory array I want an array
11:38
that lives over time to do that I’ll say eff that database . list and then I can
11:46
say the list
11:47
located at messages now doesn’t like this type are baseless observable of any
11:56
rate is not assignable to type of any array ok so that means but actually what
12:02
it really means is is that this array of messages is an array that lives in
12:07
memory and we don’t want to rate looks memory array that is laid out in time
12:13
then that is an observable so we have a special firebase list of what we can do
12:21
with years we can wrap this and now we have a fireplace lists observable and
12:26
any array
12:31
save and then nothing works why is that
12:35
well let me go back to a temple and what we’re still doing here is that we’re
12:40
treating this energy for it for integrating over an array that leaves a
12:44
memory and we know it doesn’t lives over time and that is an asynchronous
12:49
operation
12:50
gonna pipe they think I save because I made
13:06
we have all these crazy messages and what I really want to be able to do is
13:14
actually go and be able to add messages so let me go back to you my component
13:19
and one thing you can actually see right here is that nothing changed and the
13:24
push method we were originally pushing on just an in-memory right now we’re
13:30
pushing on a fire in typescript get mad we need any runtime errors it all worked
13:35
out it’s because the fire is still collection to provide you a ray like
13:42
methods that trigger editions as if you were using a regular array which makes
13:47
makes it really easy to use so I can go down here and just say zones are the
13:53
bee’s knees and so now that works but this is all messages so I’d like to
14:05
limit the amount I get back from the real-time database and to do that I can
14:10
specify a query that just reduces that results yet provide this query object in
14:16
here and I want to just limited to the last say ten items that and then we have
14:25
no only ten items but I’d rather have it so that the user can configure it in you
14:33
know not just me in my app so to do that i’m gonna go back to my temple and I’m
14:38
gonna create Xbox
14:41
give it a local variable of the limited access to this text box and then at this
14:47
point I want to know when anything changes so using an event
14:51
syntax all bind to the change event and i can say okay well when something
14:57
changes will call this change limit method and I’ll pass through the limits
15:01
value
15:02
so now when I save will get this text box and it’s great so easy to implement
15:09
the change
15:11
limit method so say change limits and that will give us back the actual limits
15:16
and at this point how do I go about running this query
15:23
well first meeting of the fire to it’s really cool that we’re returning back
15:29
lists as observables but what if we put an observable its durable and that’s
15:41
actually exactly what you can do with queries so rather than put a value of
15:45
ten in here I can put in an observable and whenever that observable emits a new
15:51
value the query automatically runs to show you that I’m just gonna import from
15:57
our XJS
15:58
import from our XJS subjects and a subject is a way for us to create our
16:04
own observable
16:07
a subject and then I that needs to be a property so called the limit subject
16:12
that is a new subject and we wanted to be a number and now rather than limits
16:18
last 10 can save this . limit subjects and then inside of here in change limit
16:24
will really doing is reminding to the change event so we’re turning our damn
16:30
events in 20 like everything is an observable
16:35
at this point I can say this . limit subject dot next so saying emit a new
16:41
event and then right here I’m just going to parse and make sure the number 10
16:49
let’s refresh and we are seeing because the rebels are lazy and what that means
17:00
is that we don’t have a value yet for this observable inside the observable so
17:05
it’s not going to firing thing so it’s given a value of wanton enter back
17:13
value 1010 back now get a value of 100 and 200 messages back and all this works
17:22
by just looking up durables and awesome thing about this is that in really less
17:28
than 40 lines of code be created a real time chat application that does the
17:34
dynamic wearing
17:46
actually really the angular fire to project he set up all the boilerplate
17:58
stuff he wrote the foundation of it all I really want to be possible without
18:02
Jeff cross if you see him do what I did and had him arose because he deserves it
18:09
because he helped me upgrade its to RCC and I just really love this picture of
18:18
Rob so he’s really needed to get into my presentation started the fire
18:25
you can just install 2 p.m. so NPM install and if you want to make the cut
18:33
out and get home it’s pretty easy wear underneath the angular or angular /
18:37
angular fire too
18:40
and if you really want to go deep we’ve actually written an entire Developer
18:44
Guide the real me that takes you through everything you need to know to be
18:48
productive and efficient with angular fire too so it goes through installation
18:52
and setup with the angular CLI talks about retrieving data as objects and
18:57
lists and then also clearing those lists and something I didn’t even cover today
19:01
which is a whole nother part of this library and that’s user authentication
19:04
to the next time you feel really really confused about observables just know
19:11
that everything is an observable so even your database and when you see an
19:17
observable just tweet hashtag the rebels are everywhere

 

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 *