Embed code
Note: this content has been automatically generated.
00:00:00
they're gonna have a good have a volume so my name's chris snoring i. m. a. go developer expert as he said i'm here
00:00:07
from london so but it's also to be here is very beautiful country my first place and you guys how many are using
00:00:13
and it too many are using fire base okay few hands good good
00:00:21
so that's prior probably wire here on a sunday at four
00:00:23
p. m. right or or some let's begin fire base with anger
00:00:28
too so let's talk about this history another potato at
00:00:32
ten o'clock today covered uh what what used to be fire base but
00:00:37
let's talk about it once more so five i started in
00:00:40
twenty eleven with the and really and james template so uh at
00:00:46
at first they only had the real time data bases so
00:00:49
and that that database had an a. p. i. and of course they were acquired by google in twenty fourteen and the rest is basically
00:00:56
history because after that a lot of products were added to fire base
00:01:00
a lot of things you could do besides the database part
00:01:04
today i will however cover mostly the database with anger to get you started so it's now a full
00:01:12
sweet looking like this so i think you've seen this picture before today uh the error there
00:01:19
points out the realtime database that was our focus more on but the gist of it is that
00:01:24
we have a database in the cloud which means that you can consider your fire base at
00:01:29
as having a back in the service so the only thing you need
00:01:33
to focus on is the javascript part let's first talk about three
00:01:38
way binding so to cover three way binding let's first talk about what to a binding is i uh i suspect they already
00:01:45
know what that is but let's cover the basics doughnut away binding without the view of the model we got the one case where
00:01:52
the user changes the view uh which leads to the model being changed and we got the opposite case where the uh
00:01:59
model is being changed but h. t. t. p. call which leads to the view being updated
00:02:04
no this is very simple we understand this as for the three way
00:02:08
binding it's more than one application so suddenly here we got
00:02:12
x. number of application instances each instance has a view and model we have the user in
00:02:20
what application that changed the view that changes the model that leads to synchronisation to
00:02:27
this synchronisation to a database in the clout will lead to a synchronisation that application one
00:02:34
we'll see which leads to its model being updated and it's view being updated
00:02:39
so effectively we're used to the whole to a binding from anger
00:02:43
and in this case we got three way binding happening let's talk about lists and the
00:02:50
problem of uh apparently so normal list would look like so it would have
00:02:55
three different items one of the items is being deleted and we also see that
00:03:01
the effect of deleting such item is that we get to items left
00:03:05
but we see that the index is being reassigned so the two is no more
00:03:10
but a calculation needs to happen for this list to a keep it structure
00:03:16
so in real time we got suddenly user on that tries to delete item
00:03:21
to here and we got the second user trying to delete item three
00:03:25
it's only we have a recalculation of indexes there's a problem with doing it this
00:03:30
way we have a great chance of this being or problem that a
00:03:35
in item will be reassigned the wrong index so there is a better way
00:03:40
to sol that's the solution is that we don't consider a list a
00:03:46
list anymore but we consider it a dictionary with entries in this case we got
00:03:51
unique i. d.'s instead so we never have to think about re calculating
00:03:55
the index so this is really how fire base deals with lists they are
00:04:00
in reality objects instead everything is an object in fire based database
00:04:07
so we got something called angular fire i mean is sort of anger fire okay
00:04:15
good that's why you're right so i'm gonna fire here is for anger
00:04:20
one uh the one that's for anger to is called angle of fire to
00:04:25
you'll be given the slides later but if you wanna read more about
00:04:27
what this framework and do it's in does get public so let's see we
00:04:36
got the for all the fire base features here on the blue circles
00:04:39
and all the fire base sorry amplifier features being implemented in the red circle
00:04:44
as you say it's not a perfect match for each other yet
00:04:47
which means that for anger fires a porsche around seventy to eighty percent of all
00:04:52
the things that are possible in the fire basic yeah but we still have a very good experience
00:04:57
dealing with anger fire so that shortly cover what anger fire one is able to do
00:05:05
so we got angry fire itself and we got the service call dollar five is both
00:05:10
which deals with authentication we got the uh fire based object that deals with a crowd operations with the object
00:05:18
and lastly we got the fire base rainy which deals with lists looking at langley fire to
00:05:26
we got pretty much the same thing with it but it of course changes name
00:05:30
so for angular too and anger fire to we got the amplifier authentication class we got the
00:05:36
fire base object observables studies with objects and we got the fire base list observable that works
00:05:43
with list you have any questions while i'm talking please uh asked them don't be
00:05:51
shy so to deal with the fire based applications we of course has some admin tools
00:05:57
that's gonna make make it easy for us to work with our five s. application
00:06:00
after all the databases in the clouds we get the the good way to configure that so what can the
00:06:07
admin tools do for us they can set up our product of course uh that we can configure
00:06:13
authentication and authorisation and we can do a lot more things and that so the first thing you need
00:06:20
to do when you just want to greater first fire based database so you can actually use it
00:06:25
is you go to a fire base google dot com and you go to a console link at the uh very right
00:06:31
once you do that you are shown this image so here all the of your fire base
00:06:37
projects besides and as you can see you can either create a new fire base
00:06:41
project or you can import an existing good product so in
00:06:45
this case i haven't existing five this project which is
00:06:49
my database and all the services i have configured with it so the first thing we probably
00:06:57
want to do is to create our fire base so the first thing we do is
00:07:00
we go into the console we click the database on the left here and
00:07:07
we are presented with a lot of tabs but we selected data
00:07:10
tab and once we have the data tab we had the database instance
00:07:14
and a bunch of collections here that have already recreated but
00:07:18
the first time you've greater project this would be completely empty of course so what you need to do is basically just use the
00:07:25
losses and the axes to a greater collections where you need them so how
00:07:31
hard is it to get started with anger to win fire base how
00:07:35
hard is it to actually add it to your application is actually very easy so the first thing we need to do is we need to
00:07:43
find if you a configuration data about our wrap so we go
00:07:47
to the very top we click that and we say that
00:07:50
we want to add fire base to our web that and we are presented this configuration window with a lot of complex
00:07:57
of the stroke and those out because those would be very specific for my up of course you just
00:08:02
take his config you copy pasted and uh you assign it a variable here so once you
00:08:11
get your and the two application you have a is a co so called endure module a route
00:08:17
um so once you have that you had the config to the right here sorry the left
00:08:22
uh and the only thing you need to do is to call the and the fire module
00:08:25
initialise at with the proper convict that's it that's all you need to be configured
00:08:31
langley to and fire base so when you come to this point you have the working
00:08:35
connection okay that's great so i have a working connection what do i do
00:08:40
that well we need to inject or instance and the if we're used to anger
00:08:48
to applications what we need to do is just injected in the constructor
00:08:52
like we're kind of used tuning it to um once we have the amplifier instance we can do is
00:08:58
things with it so first inject and then depending on what we wanna do we can call the
00:09:04
a if instance database or either lister object depending of if we're gonna talk
00:09:09
to list or an object and of course lastly if we want to
00:09:14
log in or log all to do something that's uh has to do with authentication we call b. both uh property
00:09:22
that's very simple it's a very simple a. p. i. that's not a lot of things that we need to
00:09:26
keep track up any questions so far good so you're either with me or sleep one question uh you can
00:09:56
actually create collections by uh out what what you would
00:10:00
effectively do is that you would connect with parents
00:10:03
and on that parent would create a child and the child would be
00:10:06
your collections so pro e. it is possible to programmatically greater
00:10:10
connection that was your question right yes it's yeah exactly you you can absolutely do that but yeah i would say that
00:10:32
normally when you start out with the fibres project you do a bit of you why creating collections
00:10:37
but also some programmatic depending on your situation but yes you can use both ways thank you
00:10:44
so of course we are talking about the database in the cloud and one of the things we
00:10:48
need to care about immediately is security i mean at this point our act at this
00:10:54
yeah the database in a cloud is completely unprotected we don't want that
00:10:57
right you don't want anyone to mess around with things so our
00:11:02
client would be on the safe by definition it is javascript is probably readable by anyone even if you modify it you can
00:11:09
probably you know read the code anyway if you try to the minutes right so what do we do we protect it our data
00:11:15
as best as we can we can protected through authentication we can
00:11:20
use authorisation and lastly we can use validation on a structure
00:11:26
to ensure that no bad data enters our collections let me show you all of these
00:11:31
three things so for authentication there are different ways we can authenticate our users
00:11:37
you can use anonymous which is no with educational we can use custom oh all with
00:11:42
user name password there are i think four or five different ways that we can authenticate our user
00:11:47
so you'll definitely find a good way for you is very simple to do so what you do is you click the authentication
00:11:56
and you are given all of these choices that are available for you anonymous gets out whether
00:12:01
they spoke goodwill and also email password so slogans basically so what we do
00:12:09
is we try to enable one of these guys but for actually
00:12:12
for for us to be able to enable it we need to give it a lot of data out to be a and make
00:12:17
it probably set up so what we do is on the right here we have our fire based console on on the left we have
00:12:25
get up so i've effectively take took in a print screen from the console underpin screen from get up so you can see
00:12:31
so we start with the fire based console we obtain the call back u. r. l. and on
00:12:36
the left we enter that in our get up and we just press register application is will
00:12:41
give us a client so you couldn't clyde id that we can paste into the fire based
00:12:46
console and we're actually ready to go easy three simple steps and we have enabled so
00:12:52
slogan for fibres that application very simple of course once we do that we were not quite done
00:12:59
right because we still need to log in regard to users so we still need to
00:13:02
do that porting code so as we see here are of object can do logging can do
00:13:09
log out and uh get authentication to get the current status of our logon session
00:13:15
and we can also create uses programmatically to don't have the setup everything the user we can also
00:13:20
do that gold when you log in you it can either specify an email password or
00:13:27
you can give it the provider and the available providers would be to interface book get up
00:13:32
and go to see is very very simple to log in your user just need to
00:13:37
do the setup that i talked about and specify a provider and your users
00:13:41
log in and they're ready to see your data of course this is
00:13:45
only authentication without authorisation i would say is even more important of course
00:13:50
you let the user in but is also very important to protect
00:13:53
user i mean imagine that your administrator you don't want people to see admin data right so first off
00:14:05
we have the database type again and we go into the rules that and the rules tab
00:14:09
on a high application level can actually say what are the rules for
00:14:12
read or write in this case when i say that authentication
00:14:16
because now is the same thing is saying there's no with education happening at all we will just let the user go straight
00:14:22
straight into our happen show him all the data possible once i say authentication is not able to non
00:14:29
effectively saying i'm gonna use an authentication method so remember in the bard you would use authentication
00:14:36
it was now but introduction you would set the lower one and of course if i do read
00:14:43
like this uh i would have read access and i would have write access by using the
00:14:47
don't read or the dot right sorry spurs yeah that's great okay so of course that was on a
00:14:55
high level that was for the entire application we want to be more specific than that probably
00:14:59
won't want to set different kind of authorisation rooms power collection so in this case we have a
00:15:04
collection called through it has read or write properties in this case we say that through
00:15:10
we can read all the data from full but we cannot write rehearse rule but that that's the
00:15:15
way but of course we need to understand the rule evaluation completely because what we did
00:15:22
right now is very simple case but we need to understand how the rules apply so in
00:15:28
this case we got the full collection and under the full collection we got the bar
00:15:32
and the bar has specified that reduce true and right is false and it also has a child property you would think
00:15:38
by just looking at this that well you should be fine right well it's not so fine i'll show you
00:15:43
walk so we actually get an access denied if we try to read so that's surprising a bit so the reason
00:15:55
for that is that we have not specified any rule info we we do have specified room for bar
00:16:00
we had all the that read is okay but full has no room whatsoever which means we have the full deny so so
00:16:09
bar would be allowed to do read and flew child here would
00:16:12
or a sorry uh i'm from bar chart of course
00:16:17
would be a have access granted which means that as soon as we have room it's
00:16:21
inherited from its parent but if the parent doesn't have a rule in the
00:16:24
first place we have nothing to inherit right which means that our rules are cascaded
00:16:30
are inherited from our parents about their atomic so we need to remember
00:16:34
if you don't have to rule is the same thing as default deny so with authorisation will
00:16:42
let's try to sum that up you can set rewrite rules on the whole database
00:16:47
or collection and rules are applied ultimately as i said and they're cascading darn
00:16:52
inherited from the parent and if you wanna read more what's possible
00:16:58
uh here's a link as i said before you get be given the slides so validation this is also a very interesting
00:17:05
and very powerful thing that's uh it can protect your collections so you can validate
00:17:11
or structure we can actually stop erroneous data from entering our database but
00:17:16
before and say this is what a valid structure would look like so in
00:17:21
this case we can set validation rooms so we have the rules collection
00:17:26
sorry we have the rules and we haven't ordered collection and under that order
00:17:30
we have this specify clearly that name and quantity they must be there
00:17:35
if we try to do any kind of insert or update name in quantity
00:17:39
must always be there so in this case we try to replace
00:17:44
the whole data set and say well i'll only give your name right is is with this
00:17:49
will actually not work because it must have quantity so we can actually defined what the
00:17:55
approve structure looks like there's more we can validate input data so in this case we can
00:18:05
not only say that name in quantity needs to be there we can say that
00:18:08
quantity needs to be a specific number in this case we say you need to be a
00:18:13
number you need to be larger or equal to zero or you need to be equal
00:18:17
or less than ninety nine which means this set with a is trying to insert one o.
00:18:25
one like one hundred them well because it needs to be zero tonight not so
00:18:31
is very powerful we can actually say that incoming data needs to you know validates structure wise but
00:18:36
also that you once of course working with data as first look at how we can
00:18:46
uh establish a connection to the object in the first place so we can do that with
00:18:49
either a relative path or an absolute path if we have set up are configured correctly
00:18:55
we sell the need to use the absolute path but we'd rather be talking to
00:18:58
a relative path but there are you know both these options available for you
00:19:05
as for retrieving data uh it's important to note that when we're dealing with
00:19:08
anger to dealing with the sink data straight away without using gas think
00:19:14
pipe will actually break because because the data won't be that right because the first
00:19:18
thing you do in an application is to for performing get and if
00:19:22
your object is not there the template will actually crash is is a big
00:19:26
difference from angular to to anger one in anger one it was like
00:19:30
silent fatally didn't show last ever intended to is like you haven't set this
00:19:34
data i don't know what this is you say that you have a
00:19:37
item property with the name property on it i don't know what item is item is not this is
00:19:44
a big difference and it too so this is the reason why be using this in texas s.
00:19:48
if item has been set properly and it has a ride and it has a name property then all is
00:19:54
fine so the question mark here is the conditional that says have i been fetched and also the i
00:20:00
think five says that we're dealing with observables rather than dealing with the actual data that's an important thing
00:20:06
to to uh to say so this is a very simple piece of code but i really want
00:20:12
to reinforce that when we deal with fire base we need this kind of construct to make sure that we
00:20:17
display the data in the safeway without it crashing the template as for changing data there are two
00:20:25
different ways that we can change data one is using the set method and if we used to set
00:20:30
method this is called to does a destructive behaviour because what we try to do is effectively replace
00:20:37
a. b. c. one two three with the proper well so this is destructive this destroys the
00:20:42
data the other more safer approach is the non destructive way with the update method
00:20:48
the update will just and then the the data to the existing
00:20:51
data to remember destructive non destructive learn the difference or your
00:20:57
database we look very funny or so for lists of course we got the relative path we get the absolute path but
00:21:08
lists of course they can be millions of lines of rose so
00:21:11
for that reason it is giving you an optional query and
00:21:14
that query can be specified to limit the number of rows but also you can specify different kind of queries saying
00:21:21
where h. equals a eighteen or bigger than hundred and so on so don't try to fetch all
00:21:27
the items at once butts try to impose a good queries so your result set that
00:21:32
comes back is very limited in size but remember the query is uh optional but i really
00:21:39
recommend to specify something so as for changing data we got the push method we
00:21:45
got the update with a key we got items remove also with the key i will explain
00:21:51
what the key is and we got the items remove which which will effectively delete the
00:21:56
entire list 'cause it will take away everything like that so what is this key when
00:22:04
you fetch the whole list and you repeat every single item out on your view
00:22:08
you got to be a dollar key so the dollar t. is actually the
00:22:12
unique id that exist inside of the fire based database so as long as you referred to that one when you attempt they
00:22:18
update or delete it will know which i tend to remove or
00:22:21
object to remember that um so here we got an update
00:22:26
item f. that we got the item dougherty so we send that in for example and we perform an update and
00:22:31
it knows which i tend to target this is probably the most
00:22:39
important aspect i mean our bayes databases or fibres projects
00:22:43
as a whole are really made for collaboration applications you know a imagine that you build something like a a
00:22:49
movie booking or you try to book i'm washing times you don't want the neighbour to you know take your time and
00:22:55
then you try to take the same on and you have no knowledge of that so you end up both
00:22:59
showing up to the you know try to wash your clothes and you you know you start fights you
00:23:03
don't want that right so you want some way for the c. says to tell you that this
00:23:07
it's not time slot was taken i better take another time slot regardless if it's trying to
00:23:12
wash your clothes are trying to do look a movie ticket we need to know when
00:23:15
to change happens in the database so how do we do that under fire is very simple
00:23:21
in this matter it's dealing with observables when we're talking to for example slash items
00:23:26
and if we try to perform a crowd it's gonna give us a promise back or show
00:23:31
you what i mean so in this case we have established a connection to the item
00:23:35
so imagine that this item was instead available times there for a year would
00:23:39
be uh to to to wash your clothes so these are all
00:23:43
the available times and suddenly your neighbour is gonna booked time in your
00:23:46
supper subscribe method is when it's actually gonna tell you well
00:23:50
twelve o'clock was taken so you know the only available times or four
00:23:53
o'clock and so well in the subscribe is where you see that
00:23:57
the data is being and change somehow but of course if we got other kind of issues for example we try to perform a
00:24:05
delete or crate or something and we don't have the proper low authorisation to
00:24:09
do that then we have a crowd method so here we're trying to
00:24:12
do the set and that's something uh is aaron as an comes back to us and say this is not allowed for some reason so
00:24:19
you use that promise to um indicate whether your operation uh succeeded or not
00:24:27
so remember observables versus promises they're used for different things data design
00:24:35
this is a tricky one because we are dealing with jason database we're
00:24:39
dealing with a tree like structure so normally we would be
00:24:43
dealing with an sequel database we would be normalising the database right we
00:24:47
would uh had the data being constructed in certain way that
00:24:50
was nice is is a bit different because if your data starts looking like this you can imagine the number of levels
00:24:58
our bayes allows you to do thirty two levels but for god's sake don't do it so why why should an idea that why should
00:25:06
now i have a very deep three well imagine yourself you try to get through here right you've got thirty two levels of data
00:25:13
imagine how massive that data can actually be when you do a gift that's not all imagine that you have to keep track of access on
00:25:20
thirty two different levels i mean you have to say that while this item is okay for you to fetch but not for you
00:25:27
to try to make it very shallow shallow trees so what it as a shallow to me it means basically
00:25:35
try to only when possible in this case stored mete data don't store the entire
00:25:39
order in here try to store and order widower that title in the
00:25:44
time stamp and make sure that there's different collection for the rest of the word so in this case we got order items that points to
00:25:51
the order id and you see that in the order items we kind
00:25:54
of try to group every single order item under an order id
00:25:58
this is a way for us to allow for shallow trees rather than the trees so it's two different way to
00:26:04
think about how your data they should look so this is actually my last slide so i thought i'd just
00:26:14
summary yeah everything that i've said so far so fire base
00:26:19
is a back and as a service it's a anger
00:26:24
fire is a wrapper around if a fire basically i think the fire is for anyone under fire to
00:26:31
is the one used frankie to uh it's very simple a. p. i. s. you saw we used list we used
00:26:36
object we used both three things to keep backup also
00:26:42
that references to a point in the database or
00:26:44
observables the actions that we perform the crowd actions such as great delete and so one or promises and your
00:26:53
data can be protected by authentication authorisation and validation and
00:26:59
it is a platform is not just the database
00:27:01
but i guess you heard that from a t. already it's very big right our bases not that thing

Share this talk: 


Conference program

Keynote
Jean-Baptiste Clion, Coordinator DevFest Switzerland
26 Nov. 2016 · 9:40 a.m.
How to convince organization to adopt a new technology
Daria Mühlethaler, Swisscom / Zürich, Switzerland
26 Nov. 2016 · 10:14 a.m.
Q&A - How to convince organization to adopt a new technology
Daria Mühlethaler, Swisscom / Zürich, Switzerland
26 Nov. 2016 · 10:38 a.m.
Animations for a better user experience
Lorica Claesson, Nordic Usability / Zürich, Switzerland
26 Nov. 2016 · 11:01 a.m.
Q&A - Animations for a better user experience
Lorica Claesson, Nordic Usability / Zürich, Switzerland
26 Nov. 2016 · 11:27 a.m.
Artificial Intelligence at Swisscom
Andreea Hossmann, Swisscom / Bern, Switzerland
26 Nov. 2016 · 1:01 p.m.
Q&A - Artificial Intelligence at Swisscom
Andreea Hossmann, Swisscom / Bern, Switzerland
26 Nov. 2016 · 1:29 p.m.
An introduction to TensorFlow
Mihaela Rosca, Google / London, England
26 Nov. 2016 · 2:01 p.m.
Q&A - An introduction to TensorFlow
Mihaela Rosca, Google
26 Nov. 2016 · 2:35 p.m.
Limbic system using Tensorflow
Gema Parreño Piqueras, Tetuan Valley / Madrid, Spain
26 Nov. 2016 · 3:31 p.m.
Q&A - Limbic system using Tensorflow
Gema Parreño Piqueras, Tetuan Valley / Madrid, Spain
26 Nov. 2016 · 4:04 p.m.
How Docker revolutionized the IT landscape
Vadim Bauer, 8gears AG / Zürich, Switzerland
26 Nov. 2016 · 4:32 p.m.
Closing Remarks
Jacques Supcik, Professeur, Filière Télécommunications, Institut iSIS, HEFr
26 Nov. 2016 · 5:11 p.m.
Rosie: clean use case framework
Jorge Barroso, Karumi / Madrid, Spain
27 Nov. 2016 · 10:05 a.m.
Q&A - Rosie: clean use case framework
Jorge Barroso, Karumi / Madrid, Spain
27 Nov. 2016 · 10:39 a.m.
The Firebase tier for your app
Matteo Bonifazi, Technogym / Cesena, Italy
27 Nov. 2016 · 10:49 a.m.
Q&A - The Firebase tier for your app
Matteo Bonifazi, Technogym / Cesena, Italy
27 Nov. 2016 · 11:32 a.m.
PERFMATTERS for Android
Hasan Hosgel, ImmobilienScout24 / Berlin, Germany
27 Nov. 2016 · 11:45 a.m.
Q&A - PERFMATTERS for Android
Hasan Hosgel, ImmobilienScout24 / Berlin, Germany
27 Nov. 2016 · 12:22 p.m.
Managing your online presence on Google Search
John Mueller, Google / Zürich, Switzerland
27 Nov. 2016 · 1:29 p.m.
Q&A - Managing your online presence on Google Search
John Mueller, Google / Zürich, Switzerland
27 Nov. 2016 · 2:02 p.m.
Design for Conversation
Henrik Vendelbo, The Digital Gap / Zurich, Switzerland
27 Nov. 2016 · 2:30 p.m.
Q&A - Design for Conversation
Henrik Vendelbo, The Digital Gap / Zurich, Switzerland
27 Nov. 2016 · 3:09 p.m.
Firebase with Angular 2 - the perfect match
Christoffer Noring, OVO Energy / London, England
27 Nov. 2016 · 4:05 p.m.
Q&A - Firebase with Angular 2 - the perfect match
Christoffer Noring, OVO Energy / London, England
27 Nov. 2016 · 4:33 p.m.
Wanna more fire? - Let's try polymerfire!
Sofiya Huts, JustAnswer / Lviv, Ukraine
27 Nov. 2016 · 5 p.m.
Q&A - Wanna more fire? - Let's try polymerfire!
Sofiya Huts, JustAnswer / Lviv, Ukraine
27 Nov. 2016 · 5:38 p.m.
Closing Remarks
Panel
27 Nov. 2016 · 5:44 p.m.

Recommended talks