Writing Money Transfers in React — Part 1
I’m the front-end developer for a webservice that forms part of .GOV.UK and have been working on this particular service for some months now. The service is primarily form based, and is designed to allow users to provide annual financial and welfare information to the Office of the Public Guardian.
Most of the site is simple forms that rely on good typography and sensible layout to make the service as simple and clear to use as possible, and thus far has not really needed too much Javascript, with the exception of expanding sections and ‘Autosave’.
Enter, Money Transfers
Recently a requirement came up for a new section to be added, ‘Money Transfers’, and this time it wasn’t a plain form and would need much more Javascript than previously used.
I’ve written plenty of plain Javascript components before and one thing that bugged me on a previous components was having to traverse the DOM, make sure you changed the correct element and be aware of what other changes were out there.
Lots of state
I had previously used a little bit of react and forced myself to learn angular. When I looked at the requirements for this screen I could see that, although the layout looks quite simple, there are alot of different states and some complexity to be aware of:
- No transfers entered so offer option to say no transfers
- Left/right account not selected
- Left/right account list open, none currently selected
- Left/right account list open with an account currently selected
- Left/right account selected
- No amount
- Valid amount
- Invalid amount
- Current transfer being edited/not edited
- Saving indicator — saving
- Saving indicator — saved
- Saving indicator — error
- Saving indicator — none
Now this is by no means a very complex component, but to keep track of all this and make sure the right stuff is on the screen soon gets messy. I wanted to try and have some good structure and make things easy to maintain.
React/Redux
I tried Angular and a few thing bug me:
- The code feels kind of messy and over complex
- Angualar 2 syntax. HAHAHAHAHAHAHAHAHAHAHA
- I get the feeling the code will not be logical and clear
The big appeal of react is it’s actually very simple, it’s not an entire framework. React does one thing and does it well, it just renders state. It feels like halfway between handlebars and Angular.
The other part of the equation is Redux. I did start off with Flux, as that is what was around when I last looked but found Redux. The Redux site is … not great, their description of Redux gives no real clue as to what it does, what is should say is Redux is Flux, but better.
Next Steps
These blog posts walk through the building up of ‘Money Transfers’ and how it goes from a simple react list to a full blown react/redux screen with saving to the server. The aim of this is to understand how the app was built, why it was built like this and see what lessons were learned.
