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

Recommended talks

Lightning Talk: Rebinding Selenium.
Tom Christie
4 juin 2012 · 6:08 après-midi