This document discusses Firebase, a cloud-based real-time database. It provides an overview of Firebase and how to get started using it with Angular and JavaScript. Examples are given of how to write and read data from Firebase in real-time and how to do basic searches and sorting of data.

1. Firebase – cloud based
real time database
@glennbech (glenn.bech@inmeta.com)
+glennbech

2. Inmeta
• Consultancy company with “Senior profile”
• 150 employees in Oslo and Trondheim
• Strong focus on software development and services
– Java
– MS / .NET
– SharePoint
– Business Intelligence
– Project management, test management & advisory
– UX, interaction design, graphical design
• Proud sponsors of “Baksia” Meetup / Oslo Solr community

3. me

4. After the presentation I hope you will
• … Understand what Firebase is and what it can be used for
• … Know how to get started with Angular and Firebase
• … Be inspired to, hack and create cool real time apps

5. Cloud based
real time database

6. Database
• Dokumentbasert database
(JSON)

7. Real time

9. Skybasert

10. Example – San Fransisco Parking
• Firebase comes with a build in editor/dashboard for every
firebase
• It is just another client consuming data
• It is updated live- as the data in your firebase change
• Let us have a peek at a public dataset, and create our own
firebase
https://publicdata-parking.firebaseio.com/

11. Other REAL
WORLD
examples

12. Twitch
http://www.twitch.tv/twitchplayspokemon

13. Atlassian Stash
https://www.youtube.com/watch?v=yOWTlFKoNV8#t=16

15. How to create a new Firebase
• Register at firebase.com
• Create a new firebase through the dashboard
• Create some data manually

16. Firebase Data
• Up to 32 levels of nesting
• 10mb limit on one node – base64 encode binary data
• Can be read with client libraries or as JSON data over HTTP
• No native Array support (AngularFire helps)…

17. Getting started with pure JS – what we will
do
• Create the simplest possible Firebase application using
Javascript
• Write data
• Read real time data
• Do basic Search with selection and sorting

19. Summary – write
• Push – creates a new Node with a constructed increasing id
• Set – writes data
• Push with implicit Set is common
• Update
• Transaction

20. Summary of read operations
Ref.on()
– Value
– Child_added
– Child_changed
– Child_removed
– Child_moved
• Ref.once()
• Ref.off()

21. Summary - Queries and search
Sorting combined with Selection give basic data retrieval
functionality
• orderByKey() - default
• orderByChild()
• orderByPriority()
• limittoFirst()
• limitToLast()
• startAt()
• endAt()
• equalTo()

22. Getting started – Firebase hosting &
AngularFire
• Firebase will host your static web application for you
• Included in the cost of the firebase
• Command line tool
• Bootstrap for popular languages like Angular, react, backbone etc
• AngularFire is an Open Source Library maintained by the
Firebase Team

23. Firebase hosting – what we will do
• Create a brand new Firebase
• Use the Firebase command line tool to create a new hosted
application for our firebase
• Bootstrap the app using an Angular.js template

25. Angularfire – the simplest possible app –
What we will do
• Import interesting data into our firebase
• Use AngularFire to iterate over and filter a synchronized array

26. Data Import
- Fetch json data from New York times news API
- Pipe it to our Firebase
curl http://api.nytimes.com/svc/news/v3/content/all/all.json?api-key=
944c7ada3d8a94c65f416f923f1037e5%3A16%3A70241427 |
curl -X PUT -d @- https://thenewsdatabase.firebaseio.com/.json

28. Three way data binding with AngularFire
• Firebase object references can be bound to the $scope
• Data gets updated in the view- and on the server at the same
time
• Might NOT be what you actually want. Beware!

30. Architecture
considerations

31. Simple 2-tier Architecture

32. Server / Client share Firebase

33. Firebase handle Realtime, your server the
rest
*Twitch

34. Firebase with search engine
Read Real time updates
App-server
Writes
Query &
Writes
Read Real time updates
Indexes

35. Interesting links
• https://www.firebase.com/docs/web/libraries/angular/index.html
• https://www.firebase.com/blog
• https://chrome.google.com/webstore/detail/vulcan-by-firebase/
oippbnlmebalopjbkemajgfbglcjhnbl?utm_source=chrome
-ntp-icon
• https://www.firebase.com/blog/2014-10-03-major-updates-to-firebase-
user-auth.html