You should use Firebase as the backend for your first app.

Alex Adamov — Sat, 19 Mar 2022 14:48:33 +0000

The backend is an essential part of an application. It is where you save your data, execute some business logic on it and send it back to your frontend to display to the user.

When building your first app, if you set up a backend that is too complex, you may encounter problems that are difficult to solve and you may lose motivation to finish it. Firebase is a great choice to avoid this. Here is why and what I have learned using it this week.

I’m building 121convo, a tool to help online community managers or online course managers automatically match and schedule one-to-one conversations between the members who wish to do so.

Firebase has an easy-to-use database called Firestore. It is a NoSQL database. This means your data is not stored in tables with columns and rows but are simply a collection of documents with a simple structure of label of data: data item(s). This gives the flexibility to tailor the data structure how you want and change it later on in the project if you want.

Connecting your app to Firebase and its database

Working with Firestore in your application is dead simple. To connect your application to your firebase backend, in ReactJS you simply need to install a firebase package and add a few lines of code with parameters specific to your project in a separate file in your application.

These few lines connect your app to Firebase and you have access to services like authentication and database functionality such as write, update and delete. He is an example in ReactJS where I import my database, db, and the functions I need. Then I simply collect a database reference for the document (here the document identifier is ‘userId’) in the collection of documents called ‘users’.

import { db } from "../firebase.config"
import { doc, getDoc, updateDoc } from "firebase/firestore"

// Get community ID of user
const userDocRef = doc(db, 'users', userId)
const userDocSnap = await getDoc(userDocRef)
const communityId = userDocSnap.data().communityId

Firebase Cloud Functions

For data manipulation that is more complex than database interaction, for example interacting with a third-party API, you would use a Firebase Cloud Function.

This is backend code that is saved in the cloud and triggered in response to events (e.g. new record in your database) or an HTTP request (a request you can send from your frontend, for example when a user clicks on a button).

I used a cloud function to trigger sending opt-in emails to community members. For now, I have it linked to a button that the community manager who signed up to 121convo can control.

The cloud function connects to the SendGrid API, a popular batch email sending service, passes some variables such as who the email should be sent to, which email template to use (previously created and saved in SendGrid), and some variables to fill placeholders in the email template such as the name of the community to which the member belongs.

This page provides the code to do this step in 3 different ways. I picked Option 1: Cloud email service. It is very simple to use the function once it is deployed.

It is basically a URL to which you send a Get HTTP request from your application. The request includes in the body the parameters which you wish to pass to the function. In the example below I am using axios, a JS package to send the request.

const triggerEmail = async () => {

    const URL = 
    "https://us-central1-<projectid>    
    .cloudfunctions.net/<yourfunctionname>"

    const res = await axios.get(URL, {
      params: {
        to: 'recepient@email.com',
        subject: 'test email from React app',
        first_name: 'Bob',
      }
    })

In summary, Firebase is a backend solution that is approachable for beginner builders like me with clear documentation and plenty of online resources to copy or get pointers from.

Getting comfortable with promises in JavaScript

Alex Adamov — Fri, 11 Mar 2022 09:04:29 +0000

Promises are difficult to understand for people coming from Python.

I am currently building an application that will have users upload a CSV file containing a list of emails of members of an online community. I used a popular library, Papa parse, to parse the CSV data.

However, I got stuck for a couple of hours.

While I could read the file and output it in the console, I could not assign the data to a variable and transfer it to a database. The trick happened in understanding that the library uses asynchronous functions.

Asynchronous functions

These are functions that do not execute completely in the sequence of the code. Instead, they return a promise that will do something. This promise may take time to complete and in JavaScript the rest of the code that is not dependent on it continues to execute.

This means that any value that is returned by a promise can only be accessed after the code in the scope has finished running.

console.log('beginning')
myPromise.then(value => {console.log('Value inside promise:', value)})
console.log('finish')

/* Output logs:
beginning
finish
Value inside promise: myValue
*/

Another pitfall is that you cannot assign 'value' to a variable and hope to use that value in the rest of your code that is in the same scope of execution as the promise declaration.

let globalVariable
myPromise.then(value => {
  globalVariable = value
})

useValue(globalVariable) // incorrect: does not work

This is because the function useValue is being executed before value is returned by myPromise and assigned to globalVariable.

How to handle promises

You basically have to wait for the promise to execute. Include the code that uses the result of the promise inside the .then syntax.

myPromise.then(value => {
  useValue(value) // works! waits for value
})

You can also use an async function with the await keyword.

async function getValue () {
  // ...
  return value
}

async function main () {
  const value = await getValue() // works! waits for value
  useValue(value)
}

main()

Or finally, you can assign to a variable but only use the value in code that runs after. For example, code that runs after an event is triggered.

let globalVariable

myPromise.then(value => {
  globalVariable = value
})


myButton.addEventListener('click', event => {
  if (globalVariable) {
    useValue(globalVariable) 
   // correct but only when click happens after then()
  } else {
    console.log('globalVariable is not yet available')
  }
})