Update Nov 2017 I'm no longer running Ephemeral exchange on these platforms - instead it's now serverless, based on Firebase cloud functions. 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. ReactIt'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. ReduxOnce 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. RedisPut 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. FirebaseOf 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-UII 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. ExpressWhen 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 RedisExpressReactRechartsFirebase
Redux lifecycleMaterial-UI Components and redux interactions
For more like this, see Google Apps Scripts snippets. Why not join our forum, follow the blog or follow me on twitter to ensure you get updates when they are available. |
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation >
React, redux, redis, material-UI and firebase
Subpages (16):
Creating promise actions in redux
Dealing with Appbars and drawers in React and Material-ui
Enabling clipboard copy in React
Firebase authentication with react and redux
Firebase service accounts on Node.js
Fixing out of sync server times
Local variables in Redis Lua scripts
Maintaining the selected row in a Material-UI table
My server times are out of sync!
Nice axis labels for React recharts using D3
Preserving TTL for redis item update
Promise routing in Express
Redis and Lua scripting
sslcert
Use firebase instead of socket.io
Using a snackbar with react and redux
Comments