What the Firebase

firebase.google.com

Who Am I?

Alex Kyriakidis

• Member of the Vue.js team
• Web developer and consultant
• Technical writer, author of The Majesty of Vue.js
• Teacher @ vueschool.io

@hootlex

What is Firebase?

Firebase allows you to store, sync and manage your data.

It provides a nice API that easily integrates into your project.

Services

⏱ Real Time Database

🔑 Authentication

⛅️ Cloud Functions

🌍 Hosting

🗄 Storage

    ...

Firebase Real Time Database

The Firebase Realtime Database is a cloud-hosted database.

Data is stored as JSON and synchronized in realtime to every connected client.

JSON DB

Get Started

1. go to firebase.google.com​
2. click "Add project"
3. pick a name and click "Create Project"
4. good to go 🙂

Use it in web

Write data

  // get an id for the new entry
  const userId = firebase.database().child('users').push().key

  // set entry
  firebase.database().ref('users/' + userId).set({
    username: 'hootlex',
    email: 'alex@vueschool.io',
    profile_picture : '...'
  });

Read data

• once
• value
• child_added
• child_removed

// listen to 'child_added'    
var messagesRef = firebase.database().ref('messages')
messagesRef.on('child_added', (snapshot) => {
  this.messages.push(snapshot.val())
});

Dummy chat with Vue and Firebase

HTML

<div id="app">

  <h1>Firebase Real Time DB</h1>
  <div v-for="message in messages">
      {{ message.text }}
  </div>
  
  <br>
  <textarea v-model="newMessage"></textarea>
  <button @click="send">Send</button>

</div>

JavaScript

new Vue({
  el: '#app',
  
  data: {
    messages: [],
    newMessage: null
  },
  
  methods: {
    send () {
      // Get a key for a new Message.
      var newMsgKey = firebase.database().ref().child('messages').push().key
      firebase.database().ref().child(`messages/${newMsgKey}`).set({
        text: this.newMessage
      })
      
      // reset new message text
    	this.newMessage = null
    }
  },
  
  mounted () {
    var config = {
      apiKey: "AIzaSyCDbzBcYN2fbLo6Bn1CT0ohjbPhnxh7rIc",
      authDomain: "skg-chat.firebaseapp.com",
      databaseURL: "https://skg-chat.firebaseio.com",
      projectId: "skg-chat",
      storageBucket: "skg-chat.appspot.com",
      messagingSenderId: "198257086299"
    };
    firebase.initializeApp(config);
    
    var messagesRef = firebase.database().ref('messages')
    messagesRef.on('child_added', (snapshot) => {
      this.messages.push(snapshot.val())
    });
  }
})

In action

JSFiddle 🐠

When Firebase can't help you

• Heavy relational models

• Huge datasets + heavy filtering

That's all folks!

@hootlex

VueSchool.io