React and Firebase, sittin’ in a tree

  1. React. It’s the simplified mental model that makes all the difference. Whenever I feel like I’m starting to take React for granted I go and read this page again.
  2. Firebase. My love affair with Firebase is nascent but vigorous. It’s just so fast to work with and, as we will see, once you realise how it fits with React, that simple mental model spreads from the front end to the back end and all the bits in between.

Application architecture

In a lopsided triangle for no reason.
  1. A user clicks on ‘show help’. The component dispatches an action with the type SHOW_MODAL and a value of help (the action is created by actionCreators.js).
  2. The dispatched action updates the store.
  3. Elsewhere, a HelpModal component has been waiting patiently. The help modal’s spidey sense tingles when the store is updated and it runs its render method and sees that the value of visibleModal is now help. It gets all excited that it doesn’t have to return null any more so it renders some DOM and boom, user sees help modal.
  4. Our user reads the help (because users do that), then clicks close. That click event dispatches SHOW_MODAL again, this time passing null. That sets visibleModal to null, and poor HelpModal once more has nothing to offer us and recedes into the shadows.

So, what’s a Firebase?

Do people still tell people they can click to enlarge images on websites?
  1. The user clicks on a button called ‘add student’ and the component calls a function called addStudent.
  2. The addStudent function sends a message to Firebase telling it to add a student to the list of students.
  3. Firebase updates the data and emits a change event.
  4. A listener for ‘student added’ responds to the Firebase change and sends the details of the new student to the store.
  5. The store updates and emits a change.
  6. A component re-renders and the new student is rendered to the screen.
  • firebaseWatcher.js See, it’s all ass-about, I have to start at the bottom right! When the app first loads, I set up a bunch of listeners. If anything is added or changed in the database, that individual object will trigger a change event, and the appropriate action will be dispatched to the store.
  • Store All of those listeners in firebaseWatcher.js fire when there’s a change, but also when they’re first bound, so this populates our store when the page loads (or when a user signs in).
  • Component The fare usual here. Lots of stateless components just turnin’ store into pixels and waiting for the user to do something. Finally a user decides to add a new student to the system and the component jumps to the ready and calls an action…
  • actions.js An “action”, in this case, is just a function that does something with the data it’s passed. Usually tracking an event for analytics and passing the data on to…
  • firebaseActions.js This handles all the communications to Firebase. And apparently a lot like me, doesn’t pay attention to any response.
    The data in Firebase is normalized (as is the store), so this file plays the role of ORM which means it’s mildly complex, but it has only one job: send data to Firebase.
    Another kind of magical thing about Firebase: to remove a student from the database, and any references to that student in courses and schools all in one operation is easy. Easy I tell you.
  • And we’re back at the start. Firebase will emit an event, firebaseWatcher.js will send an action to the store which in turn emits a change event, and the components react and re-render themselves.

SHOW ME SOME CODE!

  • We remove his record in the list of students.
  • And the reference to them that the user has.
  • And the reference that the school object has.
  • And we must look up each of the courses Bobby was enrolled in and remove the reference to him from there.

--

--

--

I like web stuff.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Gilbertson

David Gilbertson

I like web stuff.

More from Medium

Auto select Option with Lable and Value in React JS using React Select

React Forms and How To Control Them

How to Prevent Scroll (& Touch Move) On Mobile Web Parent Elements — while allowing it on children

Polyfill CSS using styled-components mixins in React