5 things I learned building a React and Node app

← back to the blog

A blog post over at Treehouse listed seven web development trends for 2015. At least five of them touched on React, so perhaps the article could be summarized as:

React, React, React, React, baked beans, React, and React.

JavaScript is hot right now. I am far from an expert on building big stuff with JavaScript, but I thought with the recent release of Monocle that I could give a little perspective on what I learned from a early release of my first fully-JS project.

For in-depth tutorials on getting a Node or React app running, I would point you to Chris Buecheler, Scotch.io, or CodeMentor.

  1. Build tools should be a time saver, not a time sink. Monocle is a hobby project, and I quickly found that I was spending more time tweaking my gulpfile than writing actual code that would end up in the app. Not everything has to be perfect at the early stages. Get something that works and move forward. When you get annoyed enough by typing npm start and refreshing the browser, then figure out the next steps.

  2. There a lot of ways to organize JavaScript code. Firstly, JS has a lot of ways to create objects and a lot of different ways to implement inheritance. This is largely because the language has a classical syntax masking a distinctly non-classical mechanism. You can go read about this elsewhere, I won't get into it. Later, Node introduced require (and we have browserify on the front-end) so you can have as many or as few files as you like to organize all those non-classical class declarations. The choices on how to organize code can be overwhelming, especially for inexperienced developers. Again, this was something I just had to decide I had a "good enough" handle on at a certain point and move on with.

  3. Getting user accounts working with Express is hard. This is probably why so many Node tutorials revolve around building things like real-time Twitter streams where sign-in wouldn't be a requirement. In the really world, most everything on the web that a) has a back-end and b) needs something like Node as opposed to something like WordPress, is going to require accounts. Express leaves the choice of session management and login management tools up to the developer. While I loved the freedom express gives you in most instances, this was one thing that I wished worked out of the box. For a hobby project, I strongly recommend getting familiar with the database tools early before trying to tackle this.

  4. Embrace JSX. Like every developer before me who has encountered this bizarre mix of HTML and JavaScript, I had my reservations. But trust me: it does work, and it lets you envision front-end components as a unified whole where form fits function. (As a onetime biologist, this didn't take long to feel natural.)

    The first time you see JSX code The first time you see JSX code.

  5. NPM Installs can go horribly wrong. Monocle is running on a tiny Digital Ocean droplet also hosting this blog and powered by a hamster running on a little wheel (I assume). When I went to deploy it, I could not for the life of me figure out why npm install kept terminating without completing. Eventually I figured out that, considering the piddly amount of traffic I was expecting, this was probably the most memory intensive operation that would ever be run here. Eventually I found a tutorial on using swap files and the rest of install went smoothly.

The best thing about being a developer is getting try out new things. This is also its biggest challenge. Even this tiny app uses Express, gulp, React, flux, browserify. It was the most fun I've had building for a while.