Whirlwind tour of Firebase. Talking about the concepts and offerings that make up the product. Code examples on Github and linked in presentation. Given to a GDG Belfast meetup in Jan 2018

1. Firebasics
Because talking isn’t just for experts

2. What today is about You : I want to learn some
Firebase
Me, an intellectual : I have an
intellectual yearning for
pyrofoundations

3. Patrick
@DundrumMuscles
I’ve been told I look like Billy
Bear Ham
I like Firebase because it
makes me feel not so lonely

4. Isn’t it just a
database?

5. A journey through
Firebase
Firebase does a lot of things
including
● Authorization and Authentication
● Data Storage
● Cloud Messaging
● Cloud Functions
● Machine Learning
● Advertising and monetization
● Analytics and Insights
● Hosting
● File Storage…
There’s a lot and it can feel a bit overwhelming so
let’s start to make it feel homely and adorable

6. G.O.A.T of goats It’s a MILLION DOLLAR IDEA
● STEP 1 : ALLOW PEOPLE TO RATE GOATS
● STEP 2: ????
● STEP 3 : PROFIT
This is huge it’s such a shame that it’s too big an
idea to just develop in Firebase so we’re ending
the talk here

7. THE END Questions?
WE’RE HIRING
HA I JUST JOKED YOUR FACES

8. Getting Started in
Firebase
Grab https://github.com/firebase/firebase-tools
This is going to be your friend and confidante on our
Firebase travels.
It can help you
- Scaffold your project
- Deploy it (with pre and post hooks available)
- Serve app locally (web app of course)
- Make Database calls
- Update Cloud Functions

9. Firebase Init Let’s do this <DO A DEMO THING HERE PLEASE>
Now pop a hello world react app in or something

10. Firebase Init -
Results
So we see a lot of config files. The firebase.json one is
the most important
You can see these in Github
https://github.com/PatrickWalker/g.o.a.t-of-goats

11. Add Firebase to
existing Projects -
Web
So you don’t need to use the firebase tools helper you
can use whichever CLI you love and adore.
https://firebase.google.com/docs/web/setup
- Get Config Code from Firebase Console
- Use CDN or package manager to fetch
dependencies
- Base some fire
Firebase Tools will however be needed for deploying
changes and hosting

12. Add Firebase to
existing Projects -
Android
You don’t have firebase tools here so yeah you
probably can’t use it
https://firebase.google.com/docs/android/setup
Contains links to FireCast on this as well

13. Firebase Serve Uses Firebase.json to get things going.
Firebase serve -- project <your project id or an alias>
Firebase use --add to create an alias. This is
worthwhile as the generated id of your project is
probably muddled, too long and annoying. Like this
section of the talk.

14. Firebase Deploy Things look good locally time to share the wealth of
your creative genius with the INTERNETS
This checks the syntax of your files (the firebase
management ones) to try and stop you breaking
everything and then uploads anything it needs to...
Once complete you’ll get a hosting URL like
https://gdgbelfast-cb650.firebaseapp.com
YOU can connect a domain btw and it’s made super
easy for you

15. Realtime Database For sticking data WAY UP THERE

16. Realtime Database This was how it started. A lovely and very flat
database.
JSON based so backups/imports/exports are pretty
easy. Complex relational models not so much.
Authorization made easy with awesome rules (oh man
2017 want their GDG firebase talk back)
Supports multiple instances (on premium tier)
Support for Offline access (not for you WEB PEOPLE)

17. Realtime Database

18. Realtime Database
Challenges
You use references to data through paths rather than
queries as much. There are some helpers for ordering
and filtering data though
https://firebase.google.com/docs/database/android/l
ists-of-data
Marshalling data in Android was a bit tricky for me as
my intellect is small
Authorization rules aren’t filters. It’s more an atomic
on or off so filtering with rules is not possible. The
answer to this...structuring your data in ways you
aren’t used to
https://firebase.google.com/docs/database/android/
structure-data

19. Firestore The dancing hot dog of the NoSQL World

20. Firestore Platform Support: IOS,Android, Node, Web, Java,
Python, Go
Docs: https://firebase.google.com/docs/firestore/
Tutorials:

21. Firestore Conor told you more about this. Please god let him
have shown up.
Document and collection based rather than being
totally flat.
Transactions, merged inserts and batched writes are
possible.
The focus here is improving sorting and filtering.
That’s the number 1 challenge people have with the
firebase realtime DB is working with result sets.
They are officially recommending it for new projects
(if you’re cool with Beta stuff) so this WILL BE
FIREBASE

22. Authentication

23. Authentication Supports: Web; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/auth/
Tutorials: Up There

24. Authentication Firebase auth provides different methods of signing in
through the console. These include Google, Facebook,
GitHub and even custom email/password accounts
You can customise the how the user logs in
- building own interface
- using the Firebase customisable UI

25. Unity Hold up. DId you say Unity there a minute ago?
Yeah. Some FireBase products integrate with Unity
allowing you to focus on building a game not
infrastructure
We’ll highlight the features that have Unity support but
it’s actually a pretty solid list and they seem to be
getting some traction

26. Cloud Storage

27. Cloud Storage Supports: Web; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/storage/
Tutorials: Up There

28. Firebase File
Storage
Free static hosting is pretty cool and so is cloud
functions but what about ALL MY THINGS?
Good news. Firebase offers cloud storage where you
can dump anything that wouldn’t make sense in the
firebase DB. This is envisaged for User Generated
content so goat pictures to rate is “ON BRAND”
You get a default bucket for storage in your free app
but you can upgrade and get yourself some more.

29. Authorization You also get pretty nice authorization rules you can
put in which are similar to the ones for the database.
This allow you to build pretty nice access rules like
- Member only content
- Ability to manage own files
- Based on metadata of the files
- File validation before upload
You can even monitor the upload process and
pause/resume/cancel if you want. Might be good
news for big files but for GOATS we aight.
Let’s do it

30. The Code
// This makes a storage object available elsewhere
export const storage = firebaseApp.storage()
// This is our function to save the goats. It’s pretty stripped down but
should give you an idea
upload (file, meta) {
this.uploadTask = storage.ref('goats/' + file.name).put(file, meta)
this.uploadTask.then(snapshot => {
this.downloadURL = this.uploadTask.snapshot.downloadURL
this.$emit('url', this.downloadURL)
}) } },

31. Upload yo Goat Head to https://gdgbelfast-
cb650.firebaseapp.com/Home#/ and upload your
best goat

32. Cloud Functions

33. Cloud Functions Supports: Web; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/functions/
Tutorials: Up There

34. Cloud Functions -
What is their
purpose?
This allows you to add server side functionality to your
firebase app which is kind of cool. They act as triggers
and are similar to serverless technology.
Examples of Triggers
- On Storage changes
- On DB Changes
- On Authorization Changes (new users added
etc)
- Time based
- There’s even a pub/sub message bus for
custom events
- HTTP Triggers

35. Server Side
Rendering
Yes this also includes server side rendering if you’re
all about that SEO or page load time (fast first render)
Not sure what it is?
https://www.youtube.com/watch?v=GQzn7XRdzxY&li
st=PLl-K7zZEsYLkbvTj8AUUCfBO7DoEHJ-
ME&index=2
David East - https://github.com/davideast/react-ssr-
firebase-hosting
https://www.youtube.com/watch?v=nbTn1czE2L8 -
series on server rendering covering Angular, React,
Preact, Vue and more

36. Creating User
Profile
We’re going to step through an auth trigger
Adding functions to existing project - “firebase init
functions”
Creates a functions folder with seperate package.json
and index.js
Put your JS code right der

37. Couldn’t you just
do this on Client?
Well yeah for these examples we probably could but
- We would have to duplicate the logic in
IOS/Andriod and Web
- We might not want to deliver some of the
code/logic to the client if it’s sensitive or deals
with orders/billing
- It would also make demoing cloud functions
really dull

38. Functions Console The console gives the following views
Dashboard - your function names, the events they are
tied to, their executions and median run time
Logs - So you can see or trace any errors
Usage - Graphical representation of usage and link to
your Quota

39. WANT SOME
MORE?
Then go check out the series of videos by
@ThatJenPerson on youtube which are awesome
https://www.youtube.com/watch?v=EvV9Vk9iOCQ -
Getting Started
https://github.com/firebase/functions-samples - Code
Samples
LARGE DISCLAIMER - ITS IN BETA

40. Pricing It’s important to say every now and again that there is
a free tier but if you’re doing something big it’s going
to cost money
https://cloud.google.com/functions/pricing?hl=en_US
&_ga=2.152612537.-1887928721.1515079257
Free Tier -
2 million invocations ($0.40 per million after that)
400,000 GB-seconds, 200,000 GHz-seconds of
Compute Time
5gb of outbound data per month ($0.12 per gb after)

41. MONETIZATION
ACROSS THE
NATION

42. STEP 3 PROFIT -
a.k.a Admob
Admob - This is basically adwords for firebase. You
can reuse your existing account etc the hook here is
it’s for Mobile Apps
Containers are used as adwords would have worked.
It’s all pretty similar vibes.
Weirdly I don’t think it plays ball with PWA which is
weird due to Googles PDA for them… Adwords
however still works for that.

43. App Indexing

44. App Indexing Supports: IOS and Android*
Docs: https://firebase.google.com/docs/functions/
Tutorials: Up There
*Requires a website too

45. App Indexing Your app appears in google search results. If installed
there is a link to open it, if not can create a link to
install it. NICE.
This can help re-engage users.
You do need a website for this to work as well. Plays
quite well with dynamic links.
Reasonably involved process so didn’t get a chance.

46. Dynamic Links

47. Dynamic Links Supports: Web; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/dynamic-
links/
Tutorials: Up There

48. Dynamic Links Firebase Dynamic Links are links that work the way you
want, on multiple platforms, and whether or not your app is
already installed.
Use Cases -
● Link to content in your app that works for people
who have or haven’t it currently installed
● Converting Desktop users to app users
● User to User sharing (I think this is replacing the
former Firebase Invites product)
● QR Codes. Physical web.

49. Cloud Messaging

50. Cloud Messaging Supports: Web*; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/cloud-
messaging/
Tutorials: Up There and this one is for web
https://firebase.google.com/docs/cloud-
messaging/js/client
*https://caniuse.com/#feat=serviceworkers

51. Cloud Messaging Message Payload up to 4kb
Has to be over HTTPS (due to service workers)
Apps can receive messages too so instant messaging
or maybe support is possible. Or for gaming chats.
Messages can be sent to topics or defined groups
Permission driven…

52. Cloud Messaging Message Payload up to 4kb
Web to be over HTTPS (due to service workers)
Firebase Apps can receive messages too so instant
messaging or maybe support is possible. Or for
gaming chats.
Messages can be sent to topics or defined groups
Permission driven…

53. Cloud Messaging

54. Cloud Messaging -
Message Composer
Firebase Console contains a message composer for
marketing messages. Let’s look at it

55. A/B Testing Can A/B Test your notifications.
Checking engagement against goal and track success
of variants. A/B Testing is now in your reach and it’s
not just for your messaging….
https://firebase.google.com/docs/remote-
config/parameters
https://firebase.google.com/docs/remote-
config/abtest-config
https://firebase.google.com/docs/remote-
config/abtest-video

56. Remote Config

57. Remote Config Supports: ; IOS, C++, Unity and Android
Docs: https://firebase.google.com/docs/remote-
config/
Tutorials: Up There

58. Remote Config A/B testing, custom user functionality and roll-outs of
ephemeral app functionality without needing an
application install.
You fetch values from firebase that override values in
your app if present so you can have defaults in code.

59. Remote Config You can use loads of value types so it’s not just about
replacing strings. You can use booleans to toggle
element visibility or load different styles in
You can use a number of things to segment your
experiments
- App Version
- OS
- Gender
- Location
- Device
- Custom User Parameters

60. Predictions

61. Predictions - BETA Predictions uses Google Machine learning to try and
identify/predict user groups of interest for you to
target with remote confgi.
There are inbuilt groups including churn and non-
spend but you can ask for predictions on your own
conversion events (whatever they may be)
Case Study of a game company that used the
predictions and remote config to grow their 7 day
retention rate

62. Analytics and
Insights

63. Analytics and
Insights -
Dashboard ,
Audience, Events
and Attribution
Dashboard - Allows you to track your own key
metrics/conversions and have up to 10.
More detail in Events. 3 predefined conversion events
around new users and purchases
Allows you to see revenue, retention of users,
engagement and location of audience etc
You can drill deeper into your audience.
Attribution allows you to use last click or adwords to
identify what marketing options are working the best
for you
Out of the box there’s dozens of common events and
parameter types but if thats not enough….

64. Analytics and
Insights - Custom
Event
Custom Events and Custom Parameters are handy
enough to add for mobile apps.
However they oly show up when you have an audience
> 10
Description of custom parameters
https://support.google.com/firebase/answer/739730
4?hl=en&ref_topic=6317489

65. Analytics and
Insights - Funnels
and Cohorts
Funnels are an interesting one. Similar thing you may
find in GA. This is about mapping workflow and
tracking usage across flow to identify areas of churn
or where you may be losing customers. <- Ties in
nicely with Remote Config A/B Testing ->
Cohorts groups users together who started using app
at same time so you can see retention differences.
Streamview gives you a live view of who is using your
app and how

66. Other things we
didn’t talk about
but might still be
cool to think about
Crashlytics
Test Lab
How you never really know how you’re supposed to
life your life
Performance Monitoring

67. I can’t believe I ate
the whole thing
So it’s all free?
Errr kind of
https://firebase.google.com/pricing/

68. Why Firebase rocks
my world
The free tier actually gives you a lot
Hosting! Auth and other things which get in the way of
building your actual app and it’s easy to plug in to
For most things the RealTime DB works and the auth
rules are cool
Functions seem really nice for cross-platform apps.
Docs docs doc
The Firebase Team

69. What isn’t great
about Firebase
Functions language support could be better
Realtime database can feel unintuitive at times
because of SQL muscle memory
Quite a few of the cool features are still Beta and may
not have Web support which raises the cost of entry a
bit

70. You want More? Then hit these places
https://www.youtube.com/user/Firebase
https://firebase.google.com/docs/samples/
https://twitter.com/Firebase

71. Don’t forget ● More Meetups !
● About Dre
● To Go Home
● To never talk about this to anyone

72. Questions?