After getting inspired by my “Learning Golang in 24 hours” exercise, I decided to broaden my developer toolkit further by learning the React UI framework. Of course I had to keep the same theme, so this was going to be a “Learn React in 24 hours” binge and would result in a simple CRUD UI on top of the CRUD service that I had built using Go.

---

There were a few things different, of course. I have been a backend engineer for almost all of my career. The last time I did any meaningful frontend work was about five years ago when I coded the user interface of my now defunct book and travel review website using Backbone js. Even that had been an attempt to learn new technologies by building something – I learnt Play! framework, ElasticSearch, basics of Akka actors, and Backbone.js to build it. Since then, however, I have gone deeper into the backend stack and not touched UI stuff at all. Hence the learning experience comprised not just of learning React, but also of learning the frontend domain.

Moreover, in the last 6-7 years, the frontend world has moved away from tools like Backbone, Angular, JQuery and YUI. These are all powerful tools, but they derive their power from being very good at facilitating an older paradigm of user interface development. The next generation of tools like React and Vue increasingly look to blur the line between user interface development for web, mobile, wearables etc. Then there are PWAs, native technologies, and so on, all of which represent what can easily be called an architectural revolution in frontend technology. I had to cover a lot of ground to even see the starting line.

To add further complexity, I don’t know Javascript either. So the learning experience had yet another dimension – I struggled with the basics of Javascript, while also learning React at the same time. I thought of sitting down to learn the language first, but realized that it was not going to work – I had to build something, and why build something in “pure” javascript and then figure out React on top of that. So for better or for worse, I would tackle all of these thing at once.

I had been warned repeatedly of the elaborate tool-chain in the React world, so I was very cautious to stick to the absolute basics. I used absolutely no frameworks other than what the official react beginner’s tutorial used. I started with create-react-app and did not add any further modules beyond that. The IDE of choice was Atom.

All the code is available on Github. Check it out – I’m always happy to get my code reviewed!

Here are my take-aways from the experience.

---

---

TL;DR

All in all, I would say that while I managed to get a semblance of handle on basic React, I couldn’t get as accustomed to Javascript as I would have liked.

The Good

Use what you learn to not regress

The experience of building a basic screen felt very similar to what it had felt like building the website. I had forgotten all Javascript syntax that I picked up then, and was essentially starting afresh this time too.

React is friendly to Backend-ers

Learning React was actually a very nice experience. Foe the first time, moving around in Javascript code felt like familiar ground to me – the code is far better structured than I remembered from my JQuery/Backbone days. Object-oriented instincts find good footing here – there are classes and the state represents instance variables nicely. The syntax was a little more free-form, but close enough that I could grok the code with reasonable ease. In fact, defining classes and variables to directly back UI elements reminded me of working in JSF with backing data fields and re-rendering UI on changes to them.

The things I learnt : Javascript lists and maps, if switch and for loop, basics of React components, event handler, state management and updating UI dynamically based on user interaction or other events, calling REST API and rendering the result, code organization and local builds.

React is a vast ecosystem

The learning mentioned above represents a miniscule part of the overall power of both Javascript and React. Although I did not cover much of the React toolkit, I feel that I can explore it more easily than I had with the older generation of frameworks. The huge amount still left to explore means that while learning by building is effective, one will have to build a lot to be get exposed to even a respectable part of the dictionary of these technologies. I have not yet delved into the build and deploy side of React – ‘npm start’ doesn’t qualify 🙂

The Bad

While the functional syntax and constructs that Java has been adding make it easier (for me) to understand Javascript code with its function passing and handlers, weak typing remains a huge hurdle in understanding what is going on. As code grows larger, I find myself struggling more and more about what the different variables are.

The Ugly

The lack of auto-complete in Atom just completely, utterly sucks. I had to Google a LOT because there was no way to explore the methods being exposed by any object.

What now?

Many people have told me that I should explore Typescript if I want typed Javascript, but for the moment I am not enthused enough by the prospect. I’m going to pause here and call this a lukewarm experience and stop.

My next project was going to be to build a mind-mapping software for organizing my notes and ideas, but since discovering Roam Research that need has been temporarily addressed and I have no real project in my sight for putting my newfound React skills to the test.

When I finally get around to building the admin UI for Rulette, I will see how much of this can be put to use, or if I’ll have forgotten everything (yet again).