Make your Apps Realtime with Firebase and Vue
Eduardo
Vue.js Core Team
Vue.js Meetup Paris
vue-mdc, vuexfire, vue-motion
Lead Teacher at Ironhack
Dataflow
Multi-user interaction
Multi-user interaction + Big dataset
Realtime usecases
How to realtime?
Short Polling
Is it ready?
Not yet
ready?
no
now?
no, plz stahp
Short polling vs Server
Long Polling
wait
Is it ready?
Now, it is
Thx
Server Sent Events
Hey, you need this
Thx
WebRTC
WebSockets
> 9
Declarative rendering
View
State
Render
User Input
Classic databases
Classic databases
Realtime database
State
View
Firebase is not just a Database
Firebase also has
Authentication
Cloud Functions
Hosting
Storage
Cloud Messaging
...
Data in Firebase
{
"todos": [
"Learn Vue",
"Learn Firebase",
"Build things 🔨"
]
}
Data in Firebase
{
"todos": {
"todo_1": "Learn Vue",
"todo_2": "Learn Firebase",
"todo_3": "Build things 🔨"
}
}
Firebase listeners
var todosRef = db.child('todos')
todosRef.on('child_added', s => ...)
todosRef.on('child_removed', s => ...)
todosRef.on('child_changed', s => ...)
todosRef.on('child_moved', s => ...)
Data driven UI
{
todos: [...]
}
{
todos: {...}
}
Data driven UI
{
cart: [...]
}
todosRef
new Vue({
firebase: {
todos: todosRef
}
})
const setTodosRef = firebaseAction(
({ bindFirebaseRef, state }, { ref }) => {
bindFirebaseRef('todos', ref)
}
)
The bad parts
Unfolding the truth
Limitations
→ Often retrieves the whole collection in client
Don’t use with
Easy to start with
Takes time to master
Good points