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.
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.
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.
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.
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.
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
- Firebase authentication with react and redux
- Firebase service accounts on Node.js
- Use firebase instead of socket.io
- Using a snackbar with react and redux
- Maintaining the selected row in a Material-UI table
- Dealing with Appbars and drawers in React and Material-ui
For more like this, see
Why not join our forum, follow the blog or follow me on Twitter to ensure you get updates when they are available.