Learn how to run a database profile on the Firebase realtime database to analyze speed and memory: https://angularfirebase.com/lessons/firebase-database-performance-testing-and-profiling/

Firebase Profiler Tool: https://firebase.google.com/docs/database/usage/profile
2024-02-04T08:05:38.247Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
332f89e4-b89c-4f91-afe7-a7ea961a4cc2
720eed5f4b2c313bc2728fbf7230dd22abbf9e9e268f899a1674364a718ae5ad
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Database profiling is critical for finding bottlenecks or other issues that might be degrading the user experience.
In this episode, we're going to look at the built in Firebase Profiler tool which will give us a breakdown of the memory and speed performance of our database.
This tutorial is done in the context of an Angular application, but can just as easily be applied to the Firebase JavaScript SDK.
If you're just getting started with Firebase, you'll need to install the Firebase tools command line interface and then initialize your project by running Firebase init.
To demonstrate this feature, we're going to read and write a bunch of weather data in the Firebase database, which I've acquired here from the Dark Sky API.
So I went ahead and parsed this JSON into JavaScript, and then I'm importing it in an Angular component here.
When we save the data to Firebase, it's going to look like this, a big object with its own nested objects and arrays.
Not something you would consider optimized for efficiency in a NoSQL database.
Then back in the Angular component, I'm going to create an observable stopwatch, which will help us determine the actual latency the user sees on the front end.
So we can start the stopwatch as soon as we make a request, and then as soon as Firebase returns us an actual object we'll stop the stopwatch and then I'll display that number in milliseconds on the front end.
We can do this in RxJS by creating an observable interval that ticks every 1 millisecond, and to finish the stopwatch, we just call unsubscribe on it.
Then going down into the Angular component, we can just create a new instance of the stopwatch and then inject the AngularFire database in the constructor.
Then the first thing we'll profile is the write speed to the real time database.
First, I'll quickly show you the plain Firebase SDK code.
Basically, we just make a reference to the database and then push new objects to it.
Then back in Angular, we'll do the same thing but using the AngularFire 2 wrapper.
And I want to push 20 objects to the database.
So I use a for loop here, and then for each iteration, do db push.
That's going to return a promise.
So once we get to the very last iteration, we will wait for the promise to resolve, and at that point, we'll stop the stopwatch.
Now to run the Firebase profiler tool, all we have to do is bring up the command line and then run firebase database colon profile.
This command will record everything that's happening in the database until we actually tell it to stop.
Now we can go into our Angular app and then run the right method and that's gonna put 20 different items in the database and we can see we had a 119 milliseconds of latency on the front end.
Then we can go back to the command line and click enter, and then we get the report back from Firebase.
There's a bunch of different stuff to look at here, but for this operation, we wanna look at the write speed.
So that'll give us the number of operations that occurred at this node and the average speed, and it will tell us whether or not permission was denied for that operation.
We can also get feedback on, uh, memory usage, and we can see each operation here required 29.87 kilobytes.
You can see these figures for both the uploaded and downloaded memory.
Okay.
So now that we have some data in the database, we're gonna start looking at profiles for reading data.
The first thing we're gonna do is read data as a list.
And just to show you the regular Firebase code here, we just have a reference and then we'll get the snapshot of that reference.
Then in Angular, we start the stopwatch, and then we make a query for a Firebase list.
Then I add some query parameters here to sort the elements by the child property of latitude.
At this point, we don't have an index built for latitude, so this is going to be a very efficient query, um, but in the next step, I'll show you how to set that up in Firebase.
And lastly, we subscribe to the observable and then stop the stopwatch once it emits some data.
So we'll start a new profile, and then once we run this query, we get a warning from Firebase that we don't have an index on the latitude property.
So we can optimize performance by going into the Firebase database rules and then just adding index on with the property that we wanna index.
And Firebase will automatically create an index to optimize sorting by that property.
If we rerun the query, we get a slight increase in performance and we no longer see the warning, but this will be a huge increase in performance as your list gets bigger.
The Profiler tool will also warn us if we're making any unindexed queries.
So that's another nice feature of the Profiler.
The next performance topic we're gonna look at is what happens when you make multiple queries at the same time.
Intuitively, you might think making a whole bunch of queries at the same time is gonna be really slow and inefficient.
But in reality, Firebase handles everything in a non blocking manner.
So we can send multiple requests, and it can actually still be really fast.
So here I have 20 push keys from the database as an array, and we're going to make a separate request for each one of these push keys.
Then I'm going to console log the request and the response in different colors just to show you how Firebase actually handles these requests.
And then like before, we'll stop the stopwatch once we get the last item back from Firebase.
So if we run this code in the Angular app, notice we get 20 requests sent and then we get a batch of 20 responses back all at the same time.
So you can break your request into multiple smaller requests and you won't have any loss in performance generally speaking.
This time I added a 100 millisecond delay between each request, And you can see we get the responses back in different sized batches depending on when they're actually ready in Firebase.
So the bottom line here is that you can send multiple request to Firebase without sacrificing much in terms of performance.
That's it for Firebase database profiling.
If this video helped you, please like and scribe.
And if you wanna get involved with the channel, consider joining our Slack team or becoming a pro member at angularfirebase.com.
Thanks for watching, and I'll see you next time.

Speaker 0: Database profiling is critical for finding bottlenecks or other issues that might be degrading the user experience. In this episode, we're going to look at the built in Firebase Profiler tool which will give us a breakdown of the memory and speed performance of our database. This tutorial is done in the context of an Angular application, but can just as easily be applied to the Firebase JavaScript SDK. If you're just getting started with Firebase, you'll need to install the Firebase tools command line interface and then initialize your project by running Firebase init. To demonstrate this feature, we're going to read and write a bunch of weather data in the Firebase database, which I've acquired here from the Dark Sky API.

So I went ahead and parsed this JSON into JavaScript, and then I'm importing it in an Angular component here. When we save the data to Firebase, it's going to look like this, a big object with its own nested objects and arrays. Not something you would consider optimized for efficiency in a NoSQL database. Then back in the Angular component, I'm going to create an observable stopwatch, which will help us determine the actual latency the user sees on the front end. So we can start the stopwatch as soon as we make a request, and then as soon as Firebase returns us an actual object we'll stop the stopwatch and then I'll display that number in milliseconds on the front end.

We can do this in RxJS by creating an observable interval that ticks every 1 millisecond, and to finish the stopwatch, we just call unsubscribe on it. Then going down into the Angular component, we can just create a new instance of the stopwatch and then inject the AngularFire database in the constructor. Then the first thing we'll profile is the write speed to the real time database. First, I'll quickly show you the plain Firebase SDK code. Basically, we just make a reference to the database and then push new objects to it.

Then back in Angular, we'll do the same thing but using the AngularFire 2 wrapper. And I want to push 20 objects to the database. So I use a for loop here, and then for each iteration, do db push. That's going to return a promise. So once we get to the very last iteration, we will wait for the promise to resolve, and at that point, we'll stop the stopwatch.

Now to run the Firebase profiler tool, all we have to do is bring up the command line and then run firebase database colon profile. This command will record everything that's happening in the database until we actually tell it to stop. Now we can go into our Angular app and then run the right method and that's gonna put 20 different items in the database and we can see we had a 119 milliseconds of latency on the front end. Then we can go back to the command line and click enter, and then we get the report back from Firebase. There's a bunch of different stuff to look at here, but for this operation, we wanna look at the write speed.

So that'll give us the number of operations that occurred at this node and the average speed, and it will tell us whether or not permission was denied for that operation. We can also get feedback on, uh, memory usage, and we can see each operation here required 29.87 kilobytes. You can see these figures for both the uploaded and downloaded memory. Okay. So now that we have some data in the database, we're gonna start looking at profiles for reading data.

The first thing we're gonna do is read data as a list. And just to show you the regular Firebase code here, we just have a reference and then we'll get the snapshot of that reference. Then in Angular, we start the stopwatch, and then we make a query for a Firebase list. Then I add some query parameters here to sort the elements by the child property of latitude. At this point, we don't have an index built for latitude, so this is going to be a very efficient query, um, but in the next step, I'll show you how to set that up in Firebase.

And lastly, we subscribe to the observable and then stop the stopwatch once it emits some data. So we'll start a new profile, and then once we run this query, we get a warning from Firebase that we don't have an index on the latitude property. So we can optimize performance by going into the Firebase database rules and then just adding index on with the property that we wanna index. And Firebase will automatically create an index to optimize sorting by that property. If we rerun the query, we get a slight increase in performance and we no longer see the warning, but this will be a huge increase in performance as your list gets bigger.

The Profiler tool will also warn us if we're making any unindexed queries. So that's another nice feature of the Profiler. The next performance topic we're gonna look at is what happens when you make multiple queries at the same time. Intuitively, you might think making a whole bunch of queries at the same time is gonna be really slow and inefficient. But in reality, Firebase handles everything in a non blocking manner.

So we can send multiple requests, and it can actually still be really fast. So here I have 20 push keys from the database as an array, and we're going to make a separate request for each one of these push keys. Then I'm going to console log the request and the response in different colors just to show you how Firebase actually handles these requests. And then like before, we'll stop the stopwatch once we get the last item back from Firebase. So if we run this code in the Angular app, notice we get 20 requests sent and then we get a batch of 20 responses back all at the same time.

So you can break your request into multiple smaller requests and you won't have any loss in performance generally speaking. This time I added a 100 millisecond delay between each request, And you can see we get the responses back in different sized batches depending on when they're actually ready in Firebase. So the bottom line here is that you can send multiple request to Firebase without sacrificing much in terms of performance. That's it for Firebase database profiling. If this video helped you, please like and scribe.

And if you wanna get involved with the channel, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
Database profiling is critical for finding bottlenecks or other issues that might be degrading the user experience. In this episode, we're going to look at the built in Firebase Profiler tool which will give us a breakdown of the memory and speed performance of our database. This tutorial is done in the context of an Angular application, but can just as easily be applied to the Firebase JavaScript SDK.
databases
data management
data analysis
machine learning
If you're just getting started with Firebase, you'll need to install the Firebase tools command line interface and then initialize your project by running Firebase init.
To demonstrate this feature, we're going to read and write a bunch of weather data in the Firebase database, which I've acquired here from the Dark Sky API. So I went ahead and parsed this JSON into JavaScript, and then I'm importing it in an Angular component here. When we save the data to Firebase, it's going to look like this, a big object with its own nested objects and arrays.
climate science
Not something you would consider optimized for efficiency in a NoSQL database. Then back in the Angular component, I'm going to create an observable stopwatch, which will help us determine the actual latency the user sees on the front end. So we can start the stopwatch as soon as we make a request, and then as soon as Firebase returns us an actual object we'll stop the stopwatch and then I'll display that number in milliseconds on the front end. We can do this in RxJS by creating an observable interval that ticks every 1 millisecond, and to finish the stopwatch, we just call unsubscribe on it. Then going down into the Angular component, we can just create a new instance of the stopwatch and then inject the AngularFire database in the constructor.
Then the first thing we'll profile is the write speed to the real time database. First, I'll quickly show you the plain Firebase SDK code. Basically, we just make a reference to the database and then push new objects to it. Then back in Angular, we'll do the same thing but using the AngularFire 2 wrapper. And I want to push 20 objects to the database. So I use a for loop here, and then for each iteration, do db push.
databases
That's going to return a promise. So once we get to the very last iteration, we will wait for the promise to resolve, and at that point, we'll stop the stopwatch. Now to run the Firebase profiler tool, all we have to do is bring up the command line and then run firebase database colon profile.
This command will record everything that's happening in the database until we actually tell it to stop. Now we can go into our Angular app and then run the right method and that's gonna put 20 different items in the database and we can see we had a 119 milliseconds of latency on the front end.
databases
Then we can go back to the command line and click enter, and then we get the report back from Firebase. There's a bunch of different stuff to look at here, but for this operation, we wanna look at the write speed. So that'll give us the number of operations that occurred at this node and the average speed, and it will tell us whether or not permission was denied for that operation.
We can also get feedback on, uh, memory usage, and we can see each operation here required 29.87 kilobytes. You can see these figures for both the uploaded and downloaded memory. Okay. So now that we have some data in the database, we're gonna start looking at profiles for reading data. The first thing we're gonna do is read data as a list. And just to show you the regular Firebase code here, we just have a reference and then we'll get the snapshot of that reference.
data
databases
data management
data analysis
Then in Angular, we start the stopwatch, and then we make a query for a Firebase list. Then I add some query parameters here to sort the elements by the child property of latitude. At this point, we don't have an index built for latitude, so this is going to be a very efficient query, um, but in the next step, I'll show you how to set that up in Firebase. And lastly, we subscribe to the observable and then stop the stopwatch once it emits some data. So we'll start a new profile, and then once we run this query, we get a warning from Firebase that we don't have an index on the latitude property. So we can optimize performance by going into the Firebase database rules and then just adding index on with the property that we wanna index. And Firebase will automatically create an index to optimize sorting by that property. If we rerun the query, we get a slight increase in performance and we no longer see the warning, but this will be a huge increase in performance as your list gets bigger. The Profiler tool will also warn us if we're making any unindexed queries. So that's another nice feature of the Profiler. The next performance topic we're gonna look at is what happens when you make multiple queries at the same time. Intuitively, you might think making a whole bunch of queries at the same time is gonna be really slow and inefficient. But in reality, Firebase handles everything in a non blocking manner. So we can send multiple requests, and it can actually still be really fast. So here I have 20 push keys from the database as an array, and we're going to make a separate request for each one of these push keys. Then I'm going to console log the request and the response in different colors just to show you how Firebase actually handles these requests. And then like before, we'll stop the stopwatch once we get the last item back from Firebase. So if we run this code in the Angular app, notice we get 20 requests sent and then we get a batch of 20 responses back all at the same time. So you can break your request into multiple smaller requests and you won't have any loss in performance generally speaking. This time I added a 100 millisecond delay between each request, And you can see we get the responses back in different sized batches depending on when they're actually ready in Firebase. So the bottom line here is that you can send multiple request to Firebase without sacrificing much in terms of performance. That's it for Firebase database profiling.
If this video helped you, please like and scribe. And if you wanna get involved with the channel, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
youtube
Database profiling is critical for finding bottlenecks or other issues that might be degrading the user experience. In this episode, we're going to look at the built in Firebase Profiler tool which will give us a breakdown of the memory and speed performance of our database. This tutorial is done in the context of an Angular application, but can just as easily be applied to the Firebase JavaScript SDK. If you're just getting started with Firebase, you'll need to install the Firebase tools command line interface and then initialize your project by running Firebase init. To demonstrate this feature, we're going to read and write a bunch of weather data in the Firebase database, which I've acquired here from the Dark Sky API. So I went ahead and parsed this JSON into JavaScript, and then I'm importing it in an Angular component here. When we save the data to Firebase, it's going to look like this, a big object with its own nested objects and arrays. Not something you would consider optimized for efficiency in a NoSQL database. Then back in the Angular component, I'm going to create an observable stopwatch, which will help us determine the actual latency the user sees on the front end. So we can start the stopwatch as soon as we make a request, and then as soon as Firebase returns us an actual object we'll stop the stopwatch and then I'll display that number in milliseconds on the front end. We can do this in RxJS by creating an observable interval that ticks every 1 millisecond, and to finish the stopwatch, we just call unsubscribe on it. Then going down into the Angular component, we can just create a new instance of the stopwatch and then inject the AngularFire database in the constructor. Then the first thing we'll profile is the write speed to the real time database. First, I'll quickly show you the plain Firebase SDK code. Basically, we just make a reference to the database and then push new objects to it. Then back in Angular, we'll do the same thing but using the AngularFire 2 wrapper. And I want to push 20 objects to the database. So I use a for loop here, and then for each iteration, do db push. That's going to return a promise. So once we get to the very last iteration, we will wait for the promise to resolve, and at that point, we'll stop the stopwatch. Now to run the Firebase profiler tool, all we have to do is bring up the command line and then run firebase database colon profile. This command will record everything that's happening in the database until we actually tell it to stop. Now we can go into our Angular app and then run the right method and that's gonna put 20 different items in the database and we can see we had a 119 milliseconds of latency on the front end. Then we can go back to the command line and click enter, and then we get the report back from Firebase. There's a bunch of different stuff to look at here, but for this operation, we wanna look at the write speed. So that'll give us the number of operations that occurred at this node and the average speed, and it will tell us whether or not permission was denied for that operation. We can also get feedback on, uh, memory usage, and we can see each operation here required 29.87 kilobytes. You can see these figures for both the uploaded and downloaded memory. Okay. So now that we have some data in the database, we're gonna start looking at profiles for reading data. The first thing we're gonna do is read data as a list. And just to show you the regular Firebase code here, we just have a reference and then we'll get the snapshot of that reference. Then in Angular, we start the stopwatch, and then we make a query for a Firebase list. Then I add some query parameters here to sort the elements by the child property of latitude. At this point, we don't have an index built for latitude, so this is going to be a very efficient query, um, but in the next step, I'll show you how to set that up in Firebase. And lastly, we subscribe to the observable and then stop the stopwatch once it emits some data. So we'll start a new profile, and then once we run this query, we get a warning from Firebase that we don't have an index on the latitude property. So we can optimize performance by going into the Firebase database rules and then just adding index on with the property that we wanna index. And Firebase will automatically create an index to optimize sorting by that property. If we rerun the query, we get a slight increase in performance and we no longer see the warning, but this will be a huge increase in performance as your list gets bigger. The Profiler tool will also warn us if we're making any unindexed queries. So that's another nice feature of the Profiler. The next performance topic we're gonna look at is what happens when you make multiple queries at the same time. Intuitively, you might think making a whole bunch of queries at the same time is gonna be really slow and inefficient. But in reality, Firebase handles everything in a non blocking manner. So we can send multiple requests, and it can actually still be really fast. So here I have 20 push keys from the database as an array, and we're going to make a separate request for each one of these push keys. Then I'm going to console log the request and the response in different colors just to show you how Firebase actually handles these requests. And then like before, we'll stop the stopwatch once we get the last item back from Firebase. So if we run this code in the Angular app, notice we get 20 requests sent and then we get a batch of 20 responses back all at the same time. So you can break your request into multiple smaller requests and you won't have any loss in performance generally speaking. This time I added a 100 millisecond delay between each request, And you can see we get the responses back in different sized batches depending on when they're actually ready in Firebase. So the bottom line here is that you can send multiple request to Firebase without sacrificing much in terms of performance. That's it for Firebase database profiling. If this video helped you, please like and scribe. And if you wanna get involved with the channel, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
Database
database
profiling
profiling
is
is
critical
critical
for
for
finding
finding
bottlenecks
bottlenecks
or
or
other
other
issues
issues
that
that
might
might
be
be
degrading
degrading
the
the
user
user
experience.
experience
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
look
look
at
at
the
the
built
built
in
in
Firebase
firebase
Profiler
profiler
tool
tool
which
which
will
will
give
give
us
us
a
a
breakdown
breakdown
of
of
the
the
memory
memory
and
and
speed
speed
performance
performance
of
of
our
our
database.
database
This
this
tutorial
tutorial
is
is
done
done
in
in
the
the
context
context
of
of
an
an
Angular
angular
application,
application
but
but
can
can
just
just
as
as
easily
easily
be
be
applied
applied
to
to
the
the
Firebase
firebase
JavaScript
javascript
SDK.
sdk
If
if
you're
you're
just
just
getting
getting
started
started
with
with
Firebase,
firebase
you'll
you'll
need
need
to
to
install
install
the
the
Firebase
firebase
tools
tools
command
command
line
line
interface
interface
and
and
then
then
initialize
initialize
your
your
project
project
by
by
running
running
Firebase
firebase
init.
init
To
to
demonstrate
demonstrate
this
this
feature,
feature
we're
we're
going
going
to
to
read
read
and
and
write
write
a
a
bunch
bunch
of
of
weather
weather
data
data
in
in
the
the
Firebase
firebase
database,
database
which
which
I've
i've
acquired
acquired
here
here
from
from
the
the
Dark
dark
Sky
sky
API.
api
So
so
I
i
went
went
ahead
ahead
and
and
parsed
parsed
this
this
JSON
json
into
into
JavaScript,
javascript
and
and
then
then
I'm
i'm
importing
importing
it
it
in
in
an
an
Angular
angular
component
component
here.
here
When
when
we
we
save
save
the
the
data
data
to
to
Firebase,
firebase
it's
it's
going
going
to
to
look
look
like
like
this,
this
a
a
big
big
object
object
with
with
its
its
own
own
nested
nested
objects
objects
and
and
arrays.
arrays
Not
not
something
something
you
you
would
would
consider
consider
optimized
optimized
for
for
efficiency
efficiency
in
in
a
a
NoSQL
nosql
database.
database
Then
then
back
back
in
in
the
the
Angular
angular
component,
component
I'm
i'm
going
going
to
to
create
create
an
an
observable
observable
stopwatch,
stopwatch
which
which
will
will
help
help
us
us
determine
determine
the
the
actual
actual
latency
latency
the
the
user
user
sees
sees
on
on
the
the
front
front
end.
end
So
so
we
we
can
can
start
start
the
the
stopwatch
stopwatch
as
as
soon
soon
as
as
we
we
make
make
a
a
request,
request
and
and
then
then
as
as
soon
soon
as
as
Firebase
firebase
returns
returns
us
us
an
an
actual
actual
object
object
we'll
we'll
stop
stop
the
the
stopwatch
stopwatch
and
and
then
then
I'll
i'll
display
display
that
that
number
number
in
in
milliseconds
milliseconds
on
on
the
the
front
front
end.
end
We
we
can
can
do
do
this
this
in
in
RxJS
rxjs
by
by
creating
creating
an
an
observable
observable
interval
interval
that
that
ticks
ticks
every
every
1
1
millisecond,
millisecond
and
and
to
to
finish
finish
the
the
stopwatch,
stopwatch
we
we
just
just
call
call
unsubscribe
unsubscribe
on
on
it.
it
Then
then
going
going
down
down
into
into
the
the
Angular
angular
component,
component
we
we
can
can
just
just
create
create
a
a
new
new
instance
instance
of
of
the
the
stopwatch
stopwatch
and
and
then
then
inject
inject
the
the
AngularFire
angularfire
database
database
in
in
the
the
constructor.
constructor
Then
then
the
the
first
first
thing
thing
we'll
we'll
profile
profile
is
is
the
the
write
write
speed
speed
to
to
the
the
real
real
time
time
database.
database
First,
first
I'll
i'll
quickly
quickly
show
show
you
you
the
the
plain
plain
Firebase
firebase
SDK
sdk
code.
code
Basically,
basically
we
we
just
just
make
make
a
a
reference
reference
to
to
the
the
database
database
and
and
then
then
push
push
new
new
objects
objects
to
to
it.
it
Then
then
back
back
in
in
Angular,
angular
we'll
we'll
do
do
the
the
same
same
thing
thing
but
but
using
using
the
the
AngularFire
angularfire
2
2
wrapper.
wrapper
And
and
I
i
want
want
to
to
push
push
20
20
objects
objects
to
to
the
the
database.
database
So
so
I
i
use
use
a
a
for
for
loop
loop
here,
here
and
and
then
then
for
for
each
each
iteration,
iteration
do
do
db
db
push.
push
That's
that's
going
going
to
to
return
return
a
a
promise.
promise
So
so
once
once
we
we
get
get
to
to
the
the
very
very
last
last
iteration,
iteration
we
we
will
will
wait
wait
for
for
the
the
promise
promise
to
to
resolve,
resolve
and
and
at
at
that
that
point,
point
we'll
we'll
stop
stop
the
the
stopwatch.
stopwatch
Now
now
to
to
run
run
the
the
Firebase
firebase
profiler
profiler
tool,
tool
all
all
we
we
have
have
to
to
do
do
is
is
bring
bring
up
up
the
the
command
command
line
line
and
and
then
then
run
run
firebase
firebase
database
database
colon
colon
profile.
profile
This
this
command
command
will
will
record
record
everything
everything
that's
that's
happening
happening
in
in
the
the
database
database
until
until
we
we
actually
actually
tell
tell
it
it
to
to
stop.
stop
Now
now
we
we
can
can
go
go
into
into
our
our
Angular
angular
app
app
and
and
then
then
run
run
the
the
right
right
method
method
and
and
that's
that's
gonna
gonna
put
put
20
20
different
different
items
items
in
in
the
the
database
database
and
and
we
we
can
can
see
see
we
we
had
had
a
a
119
119
milliseconds
milliseconds
of
of
latency
latency
on
on
the
the
front
front
end.
end
Then
then
we
we
can
can
go
go
back
back
to
to
the
the
command
command
line
line
and
and
click
click
enter,
enter
and
and
then
then
we
we
get
get
the
the
report
report
back
back
from
from
Firebase.
firebase
There's
there's
a
a
bunch
bunch
of
of
different
different
stuff
stuff
to
to
look
look
at
at
here,
here
but
but
for
for
this
this
operation,
operation
we
we
wanna
wanna
look
look
at
at
the
the
write
write
speed.
speed
So
so
that'll
that'll
give
give
us
us
the
the
number
number
of
of
operations
operations
that
that
occurred
occurred
at
at
this
this
node
node
and
and
the
the
average
average
speed,
speed
and
and
it
it
will
will
tell
tell
us
us
whether
whether
or
or
not
not
permission
permission
was
was
denied
denied
for
for
that
that
operation.
operation
We
we
can
can
also
also
get
get
feedback
feedback
on,
on
uh,
uh
memory
memory
usage,
usage
and
and
we
we
can
can
see
see
each
each
operation
operation
here
here
required
required
29.87
29.87
kilobytes.
kilobytes
You
you
can
can
see
see
these
these
figures
figures
for
for
both
both
the
the
uploaded
uploaded
and
and
downloaded
downloaded
memory.
memory
Okay.
okay
So
so
now
now
that
that
we
we
have
have
some
some
data
data
in
in
the
the
database,
database
we're
we're
gonna
gonna
start
start
looking
looking
at
at
profiles
profiles
for
for
reading
reading
data.
data
The
the
first
first
thing
thing
we're
we're
gonna
gonna
do
do
is
is
read
read
data
data
as
as
a
a
list.
list
And
and
just
just
to
to
show
show
you
you
the
the
regular
regular
Firebase
firebase
code
code
here,
here
we
we
just
just
have
have
a
a
reference
reference
and
and
then
then
we'll
we'll
get
get
the
the
snapshot
snapshot
of
of
that
that
reference.
reference
Then
then
in
in
Angular,
angular
we
we
start
start
the
the
stopwatch,
stopwatch
and
and
then
then
we
we
make
make
a
a
query
query
for
for
a
a
Firebase
firebase
list.
list
Then
then
I
i
add
add
some
some
query
query
parameters
parameters
here
here
to
to
sort
sort
the
the
elements
elements
by
by
the
the
child
child
property
property
of
of
latitude.
latitude
At
at
this
this
point,
point
we
we
don't
don't
have
have
an
an
index
index
built
built
for
for
latitude,
latitude
so
so
this
this
is
is
going
going
to
to
be
be
a
a
very
very
efficient
efficient
query,
query
um,
um
but
but
in
in
the
the
next
next
step,
step
I'll
i'll
show
show
you
you
how
how
to
to
set
set
that
that
up
up
in
in
Firebase.
firebase
And
and
lastly,
lastly
we
we
subscribe
subscribe
to
to
the
the
observable
observable
and
and
then
then
stop
stop
the
the
stopwatch
stopwatch
once
once
it
it
emits
emits
some
some
data.
data
So
so
we'll
we'll
start
start
a
a
new
new
profile,
profile
and
and
then
then
once
once
we
we
run
run
this
this
query,
query
we
we
get
get
a
a
warning
warning
from
from
Firebase
firebase
that
that
we
we
don't
don't
have
have
an
an
index
index
on
on
the
the
latitude
latitude
property.
property
So
so
we
we
can
can
optimize
optimize
performance
performance
by
by
going
going
into
into
the
the
Firebase
firebase
database
database
rules
rules
and
and
then
then
just
just
adding
adding
index
index
on
on
with
with
the
the
property
property
that
that
we
we
wanna
wanna
index.
index
And
and
Firebase
firebase
will
will
automatically
automatically
create
create
an
an
index
index
to
to
optimize
optimize
sorting
sorting
by
by
that
that
property.
property
If
if
we
we
rerun
rerun
the
the
query,
query
we
we
get
get
a
a
slight
slight
increase
increase
in
in
performance
performance
and
and
we
we
no
no
longer
longer
see
see
the
the
warning,
warning
but
but
this
this
will
will
be
be
a
a
huge
huge
increase
increase
in
in
performance
performance
as
as
your
your
list
list
gets
gets
bigger.
bigger
The
the
Profiler
profiler
tool
tool
will
will
also
also
warn
warn
us
us
if
if
we're
we're
making
making
any
any
unindexed
unindexed
queries.
queries
So
so
that's
that's
another
another
nice
nice
feature
feature
of
of
the
the
Profiler.
profiler
The
the
next
next
performance
performance
topic
topic
we're
we're
gonna
gonna
look
look
at
at
is
is
what
what
happens
happens
when
when
you
you
make
make
multiple
multiple
queries
queries
at
at
the
the
same
same
time.
time
Intuitively,
intuitively
you
you
might
might
think
think
making
making
a
a
whole
whole
bunch
bunch
of
of
queries
queries
at
at
the
the
same
same
time
time
is
is
gonna
gonna
be
be
really
really
slow
slow
and
and
inefficient.
inefficient
But
but
in
in
reality,
reality
Firebase
firebase
handles
handles
everything
everything
in
in
a
a
non
non
blocking
blocking
manner.
manner
So
so
we
we
can
can
send
send
multiple
multiple
requests,
requests
and
and
it
it
can
can
actually
actually
still
still
be
be
really
really
fast.
fast
So
so
here
here
I
i
have
have
20
20
push
push
keys
keys
from
from
the
the
database
database
as
as
an
an
array,
array
and
and
we're
we're
going
going
to
to
make
make
a
a
separate
separate
request
request
for
for
each
each
one
one
of
of
these
these
push
push
keys.
keys
Then
then
I'm
i'm
going
going
to
to
console
console
log
log
the
the
request
request
and
and
the
the
response
response
in
in
different
different
colors
colors
just
just
to
to
show
show
you
you
how
how
Firebase
firebase
actually
actually
handles
handles
these
these
requests.
requests
And
and
then
then
like
like
before,
before
we'll
we'll
stop
stop
the
the
stopwatch
stopwatch
once
once
we
we
get
get
the
the
last
last
item
item
back
back
from
from
Firebase.
firebase
So
so
if
if
we
we
run
run
this
this
code
code
in
in
the
the
Angular
angular
app,
app
notice
notice
we
we
get
get
20
20
requests
requests
sent
sent
and
and
then
then
we
we
get
get
a
a
batch
batch
of
of
20
20
responses
responses
back
back
all
all
at
at
the
the
same
same
time.
time
So
so
you
you
can
can
break
break
your
your
request
request
into
into
multiple
multiple
smaller
smaller
requests
requests
and
and
you
you
won't
won't
have
have
any
any
loss
loss
in
in
performance
performance
generally
generally
speaking.
speaking
This
this
time
time
I
i
added
added
a
a
100
100
millisecond
millisecond
delay
delay
between
between
each
each
request,
request
And
and
you
you
can
can
see
see
we
we
get
get
the
the
responses
responses
back
back
in
in
different
different
sized
sized
batches
batches
depending
depending
on
on
when
when
they're
they're
actually
actually
ready
ready
in
in
Firebase.
firebase
So
so
the
the
bottom
bottom
line
line
here
here
is
is
that
that
you
you
can
can
send
send
multiple
multiple
request
request
to
to
Firebase
firebase
without
without
sacrificing
sacrificing
much
much
in
in
terms
terms
of
of
performance.
performance
That's
that's
it
it
for
for
Firebase
firebase
database
database
profiling.
profiling
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe.
scribe
And
and
if
if
you
you
wanna
wanna
get
get
involved
involved
with
with
the
the
channel,
channel
consider
consider
joining
joining
our
our
Slack
slack
team
team
or
or
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this tutorial, the speaker explains how the reminded stopwatch feature works in the Angular app and how it can be applied to theese JavaScript SDK. They also discuss the use of the ProGeneration tool and the use of the Proess tool to optimize performance and optimize memory usage. The speaker then explains how to use the reminded stopwatch feature in the Angular app and how it can be applied to the rest of the application.
Firebase Database Performance Profiling
Database profiling is critical for finding bottlenecks or other issues that might be degrading the user experience. In this episode, we're going to look at the built in Firebase Profiler tool which will give us a breakdown of the memory and speed performance of our database. This tutorial is done in the context of an Angular application, but can just as easily be applied to the Firebase JavaScript SDK. If you're just getting started with Firebase, you'll need to install the Firebase tools command line interface and then initialize your project by running Firebase init. To demonstrate this feature, we're going to read and write a bunch of weather data in the Firebase database, which I've acquired here from the Dark Sky API. So I went ahead and parsed this JSON into JavaScript, and then I'm importing it in an Angular component here. When we save the data to Firebase, it's going to look like this, a big object with its own nested objects and arrays. Not something you would consider optimized for efficiency in a NoSQL database. Then back in the Angular component, I'm going to create an observable stopwatch, which will help us determine the actual latency the user sees on the front end. So we can start the stopwatch as soon as we make a request, and then as soon as Firebase returns us an actual object we'll stop the stopwatch and then I'll display that number in milliseconds on the front end. We can do this in RxJS by creating an observable interval that ticks every 1 millisecond, and to finish the stopwatch, we just call unsubscribe on it. Then going down into the Angular component, we can just create a new instance of the stopwatch and then inject the AngularFire database in the constructor. Then the first thing we'll profile is the write speed to the real time database. First, I'll quickly show you the plain Firebase SDK code. Basically, we just make a reference to the database and then push new objects to it. Then back in Angular, we'll do the same thing but using the AngularFire 2 wrapper. And I want to push 20 objects to the database. So I use a for loop here, and then for each iteration, do db push. That's going to return a promise. So once we get to the very last iteration, we will wait for the promise to resolve, and at that point, we'll stop the stopwatch. Now to run the Firebase profiler tool, all we have to do is bring up the command line and then run firebase database colon profile. This command will record everything that's happening in the database until we actually tell it to stop. Now we can go into our Angular app and then run the right method and that's gonna put 20 different items in the database and we can see we had a 119 milliseconds of latency on the front end. Then we can go back to the command line and click enter, and then we get the report back from Firebase. There's a bunch of different stuff to look at here, but for this operation, we wanna look at the write speed. So that'll give us the number of operations that occurred at this node and the average speed, and it will tell us whether or not permission was denied for that operation. We can also get feedback on, uh, memory usage, and we can see each operation here required 29.87 kilobytes. You can see these figures for both the uploaded and downloaded memory. Okay. So now that we have some data in the database, we're gonna start looking at profiles for reading data. The first thing we're gonna do is read data as a list. And just to show you the regular Firebase code here, we just have a reference and then we'll get the snapshot of that reference. Then in Angular, we start the stopwatch, and then we make a query for a Firebase list. Then I add some query parameters here to sort the elements by the child property of latitude. At this point, we don't have an index built for latitude, so this is going to be a very efficient query, um, but in the next step, I'll show you how to set that up in Firebase. And lastly, we subscribe to the observable and then stop the stopwatch once it emits some data. So we'll start a new profile, and then once we run this query, we get a warning from Firebase that we don't have an index on the latitude property. So we can optimize performance by going into the Firebase database rules and then just adding index on with the property that we wanna index. And Firebase will automatically create an index to optimize sorting by that property. If we rerun the query, we get a slight increase in performance and we no longer see the warning, but this will be a huge increase in performance as your list gets bigger. The Profiler tool will also warn us if we're making any unindexed queries. So that's another nice feature of the Profiler. The next performance topic we're gonna look at is what happens when you make multiple queries at the same time. Intuitively, you might think making a whole bunch of queries at the same time is gonna be really slow and inefficient. But in reality, Firebase handles everything in a non blocking manner. So we can send multiple requests, and it can actually still be really fast. So here I have 20 push keys from the database as an array, and we're going to make a separate request for each one of these push keys. Then I'm going to console log the request and the response in different colors just to show you how Firebase actually handles these requests. And then like before, we'll stop the stopwatch once we get the last item back from Firebase. So if we run this code in the Angular app, notice we get 20 requests sent and then we get a batch of 20 responses back all at the same time. So you can break your request into multiple smaller requests and you won't have any loss in performance generally speaking. This time I added a 100 millisecond delay between each request, And you can see we get the responses back in different sized batches depending on when they're actually ready in Firebase. So the bottom line here is that you can send multiple request to Firebase without sacrificing much in terms of performance. That's it for Firebase database profiling. If this video helped you, please like and scribe. And if you wanna get involved with the channel, consider joining our Slack team or becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
In this tutorial, the speaker explains how the reminded stopwatch feature works in the Angular app and how it can be applied to theese JavaScript SDK. They also discuss the use of the ProGeneration tool and the use of the Proess tool to optimize performance and optimize memory usage. The speaker then explains how to use the reminded stopwatch feature in the Angular app and how it can be applied to the rest of the application.