Serverless Web Applications with React and Firebase

Let's take a quick look at the preceding methods.

constructor(props) {
 super(props);
 this.state = {
 value: props.initialValue
 };
 }

<section>
<h2>My First Example</h2>
</section>
<script>
 var root = document.querySelector('section').createShadowRoot();
 root.innerHTML = '<style>h2{ color: red; }</style>' +'<h2>Hello World!</h2>';
</script>

var sectionStyle = {
 color: 'red'
};
var MyFirstExample = React.createClass({
render: function() {
 return (<section><h2 style={sectionStyle}>
 Hello World!</h2></section>
 )}
})
ReactDOM.render(<MyFirstExample />, renderedNode);

Firebase database rules are the only way to secure the data. Firebase provides flexibility and expression-based rules language with JavaScript-like syntax to developers to define how your data should be structured, how it should be indexed, and when the user can read and write the data. You can also combine authentication services with this to define who has access to what data and protect your users from unauthorized access. To validate the data, we need to add a rule separately using .validate in the rules.

Consider this example:

{
"rules": {
".write": true,
"ticket": {
// a valid ticket must have attributes "email" and "status"
".validate": "newData.hasChildren(['email', 'status'])",
"status": {
// the value of "status" must be a string and length greater then 0 and less then 10
".validate": "newData.isString() && newData.val().length > 0 && newData.val().length < 10"
},
"email": {
// the value of "email" must valid with "@"
".validate": "newData.val().contains('@')"
}
}
}
}

Here are some other sample blocks of code for applying rules in the Rules tab:

Default: Rule configuration for authentication:

{
 "rules": {
 ".read": "auth != null",
 ".write": "auth != null"
 }}

Public: These rules give full access to everyone, even people who are not users of your app. They give read and write access to your database:

{
 "rules": {
 ".read": true,
 ".write": true
 }}

User: These rules authorize access to a node matching the user's ID from the Firebase authentication token:

{
 "rules": {
   "users": {
       "$uid": {
             ".read": "$uid === auth.uid",
             ".write": "$uid === auth.uid"
         }
       }
    }
}

Private: These rule configs don't allow anyone to read and write to a database:

{
 "rules": {
    ".read": false,
    ".write": false
  }
}

Firebase allows us to save the daily backup of our database, but that is only available in the Blaze plan. It also applies the security rules automatically to secure your data.

Firebase allows seeing the usage of the database with the help of an analytical chart. It shows us the connections, storage, downloads, and load in Realtime on our firebase database:

Before creating a database and collection in Cloud Firestore, it prompts you to apply the security rules for our database.

Take a look at the following screenshot:

Here are some code example of Firestore rules:

Public:

service cloud.firestore {
    match /databases/{database}/documents {
           match /{document=**} {
           allow read, write;
        }
    }
}

Users:

service cloud.firestore {
    match /databases/{database}/documents {
        match /users/{userId} {
           allow read, write: if request.auth.uid == userId;
        }
    }
}

Private:

service cloud.firestore {
    match /databases/{database}/documents {
       match /{document=**} {
          allow read, write: if false;
       }
    }
}

Both databases are cloud-hosted, NoSQL databases, but the data model of both databases is different:

Both have mobile-first, Realtime SDKs, and both support local data storage for offline-ready apps:

Retrieve, sort, and filter data from either database through queries:

When we choose the database for our project, then reliability and performance are the most important parts that come to our mind:

When we develop a large-scale application, we must know how much we can scale our database:

As per the security concern, every database has a different way of securing data from unauthorized users:

Source: https://firebase.google.com/docs/firestore/rtdb-vs-firestore?authuser=0.

Firebase UI is completely open source and easily customizes to fit in with your app that includes some set of libraries. It allows you to quickly connect UI elements to the Firebase database for data storage, allowing views to be updated in Realtime, and it also provides the simple interfaces for common tasks such as displaying lists or collections of items.

FirebaseUI Auth is a recommended way to add authentication in Firebase app, or we can do it manually with Firebase Authentication SDK. It allows users to add a complete UI flow for signing in with email and passwords, phone numbers, and with most popular identity providers, including Google and Facebook Login.

FirebaseUI is available at https://opensource.google.com/projects/firebaseui.

We will explore more about Authentication in detail in the upcoming chapters.

Once you write and deploy a function, Google's servers start listening to those functions immediately, that is listening for events and running the function when it gets triggered. As the load of your app increases or decreases, it responds by rapidly scaling the number of virtual server instances needed to run your function faster. If the function is deleted, idle, or updated by you, then instances are cleaned up and replaced by new instances. In the case of deletion, it also removes the connection between functions and the event provider.

Given here are the events that are supported by Cloud Functions:

Here's a code sample of the cloud function makeUppercase:

exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
 .onWrite(event => {
 // Grab the current value of what was written to the Realtime Database.
 const original = event.data.val();
 console.log('Uppercasing', event.params.pushId, original);
 const uppercase = original.toUpperCase();
 // You must return a Promise when performing asynchronous tasks inside a Functions such as
 // writing to the Firebase Realtime Database.
 // Setting an "uppercase" sibling in the Realtime Database returns a Promise.
 return event.data.ref.parent.child('uppercase').set(uppercase);
 });

Recently, we have used this valuable event to read the data from Realtime Database. This event type will be triggered every time the data changes, and the callback function will retrieve all the data including children.

This event type will be triggered once when we need to retrieve the list of items object and every time when a new object is added to our data as given path. Unlike value, which returns the entire object of that location, this event callback is passed as a snapshot that contains two arguments, which include the new child and previous child data.

The child_changed event is triggered when any child object is changed.

The child_removed event is triggered when an immediate child is removed. It is typically used in combination with child_added and child_changed. This event callback contains the data for the removed child.

The child_moved event is triggered when you're working with ordered data like drag and drop in list items.

Now, let's take quick look at our full code:

<!doctype html>
<htmlclass="no-js"lang="">
<head>
<metacharset="utf-8">
<title>Chapter 1</title><scriptsrc="</span>https://www.gstatic.com/firebasejs/4.6.1/firebase.js"></script>
</head>
<body><!--[if lt IE 8]>
<p class="browserupgrade">You are using an<strong>outdated</strong> browser.Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve yourexperience.
</p>
<![endif]-->
<!-- Add your site or application content here -->
<pid="message">Hello world! This is HTML5 Boilerplate.</p>
<script>
// Initialize Firebase
varconfig={
 apiKey: "<PROJECT API KEY>",
 authDomain: "<PROJECT AUTH DOMAIN>",
 databaseURL: "<PROJECT DATABASE AUTH URL>",
 projectId: "<PROJECT ID>",
 storageBucket: "",
 messagingSenderId: "<MESSANGING ID>"
};
firebase.initializeApp(config);
varmessageLabel=document.getElementById('message');
vardb=firebase.database();
db.ref().on("value",function(snapshot){
 console.log(snapshot.val());
 var object=snapshot.val();
 messageLabel.innerHTML=object.chapter1.example;
});</script>
</body>
</html>

Now, open index.html in your browser, and let's look at the result:

In the preceding screen excerpt, we can see the database value on MessageLabel and JavaScript data representation in the browser console.

Let's extend this example further by taking the input value from the user and save those values in the database. Then, using the events, we will display that messages in the browser in Realtime:

As shown here, I have added a child node messages in the database. Now, we will add the form input in our HTML with the Save button and at the bottom, we will display those messages list in Realtime when the user submits.

Here's the HTML Code:

<input type="text" id="messageInput" />
 <button type="button" onclick="addData()">Send message</button>
<h2>Messages</h2>
 <p id="list">sdfdf</p>

Now, we will create the addData()function to get and save the data to Firebase:

 // Save data to firebase
 function addData() {
 var message = messageInput.value;
   db.ref().child('users').push({
    field: message
  });
  messageInput.value = '';
 }

In the next screenshot, I have added some messages to the input text:

Now, we need to display those messages into HTML at the bottom of the messages title:

// Update list of messages when data is added
db.ref().on('child_added', function(snapshot) {
var data = snapshot.val();
console.log("New Message Added", data);
  snapshot.forEach(function(childSnap) {
    console.log(childSnap.val());
    var message = childSnap.val();
    messages.innerHTML = '\n' + message.field;
  });
});

We have used the child_added event, which means whenever any child is added in the messages on node, we need to take that value and update the messages list.

Now, open your browser and note the output:

That looks great. We are now be able to see the message that users have submitted and our data is also getting updated with the new message in Realtime.

Now, let's take a quick look at how our code looks:

<!doctype html>
<html class="no-js" lang="">
<head>
 <meta charset="utf-8">
 <title>Chapter 1</title>
 <script src="https://www.gstatic.com/firebasejs/4.6.1/firebase.js"></script>
</head>
<body>
 <!-- Add your site or application content here -->
 <p id="message">Hello world! This is HTML5 Boilerplate.</p>
 <input type="text" id="messageInput" />
 <button type="button" onclick="addData()">Send message</button> 
 <h2>Messages</h2>
 <p id="list"></p>
<script>
 // Initialize Firebase
 var config = {
   apiKey: "<PROJECT API KEY>",
   authDomain: "<PROJECT AUTH DOMAIN>",
   databaseURL: "<PROJECT DATABASE AUTH URL>",
   projectId: "<PROJECT ID>",
   storageBucket: "",
   messagingSenderId: "<MESSANGING ID>"
 };
 firebase.initializeApp(config);

 var messageLabel = document.getElementById('message');
 var messageInput = document.getElementById('messageInput');
 var messages = document.getElementById('list'); 
 var db = firebase.database();
 db.ref().on("value", function(snapshot) {
     var object = snapshot.val();
     messageLabel.innerHTML = object.chapter1.example;
    //console.log(object);
 });
// Save data to firebase
 function addData() {
   var message = messageInput.value;
   db.ref().child('messages').push({
   field: message
 });
   messageInput.value = '';
 }
// Update results when data is added
 db.ref().on('child_added', function(snapshot) {
   var data = snapshot.val();
   console.log("New Message Added", data);
   snapshot.forEach(function(childSnap) {
   console.log(childSnap.val());
   var message = childSnap.val();
   messages.innerHTML = '\n' + message.field;
  });
 });
 </script>
</body>
</html>