React, redux, redis, material-UI and firebase


For my Ephemeral Exchange project I needed to integrate a whole bunch of technologies, many of which were quite new to me. I thought it might be useful to document stuff I've learned along the way, especially those that were a little tricky to figure out. I'll be padding this out over time, but the intention is to keep the articles in the form of snippets, rather than monolithic projects.

React

It's a difficult concept at first. Created by Facebook, react is a JavaScript library for creating a UI. Normally you design your view with HTML and CSS, and add a little JavaScript. React turns that idea on its head. You write JavaScript code, with the associated HTML specified in JSX (a kind of XML) embedded right in the JavaScript. Of course what you are writing is not valid JavaScript, so it has to be first be transpiled (usually with Babel). The main concept with React is that it creates its own DOM, and only changes are rendered to the real DOM. This makes it very fast, although quite hard to understand if you have a  linear mind.

Redux

Once you've committed to React, you find yourself without a very good way of managing a single source of truth for your application data. One of the challenges of front end development is the binding of data to UI elements and keeping everything in sync, especially if you are doing a lot of async things. Redux is about managing the state of an application - in other words the data that is being consumed or created by the UI. The key point here is that the Redux store is immutable - you can't just change stuff in it. Instead you dispatch 'actions' which are handled by 'reducers'  which in turn create a new version of the store's contents at every change. Your UI subscribes to changes in the store and updates itself in response to changes. In fact it updates everything, all the time, but React's model of working its own in memory DOM, means that the real DOM only gets involved if something really changes. If this sounds complicated, it is, and you feel that you are going crazy the first few actions you create. However, after a little while, you do come to appreciate the advantages. 

Redis

Put simply, redis is a persistent cache but with zillions of great features. In the Ephemeral Exchange project, I use this to store the APIS back end data and to manage push notifications.

Firebase

Of course I had already used Firebase in a number of projects, but I decided to use it for authentication and user management for subscribers to the Ephemeral Exchange project, although the data itself is stored in Redis, and Firebase plays no part in the back end API.

Material-UI

I usually use mui-css for Material Design helpers, but Material-UI has some really good React components, so it was a no brainer to move to this for this project. The only downside I've found is that styles are all inline without the usual kind of predefined classes you'd expect to find in an MD helper library. Everything is React is pretty much counterintuitive though, and the idea of defining styles as part of the components they apply to, rather than centralizing them in gigantic style sheets, actually works out just fine.

Express

When developing server side apps to run on Node, it's common to use the Express.js framework to handle routing to your app. Ephemeral exchange API runs on Node and uses Express.js




Redis

Express

React

Recharts

Firebase