React Speedrun — entry 2

No code today — did a retrospective of yesterday and I can do better

If I had one bit of advice for anyone else working on the speedrun:

Right off, right now, day 1 — create a git repository and make the simplest backend project you can, with a minimal frontend — and then do yourself the biggest of all favors, configure Travis-CI to deploy your MVP to Heroku (or wherever else you want) whenever you git push. Even on a small practice project, having automated builds will save you a ton of time, countless headaches, and help you deploy a better product.

No code today, but a LOT of thought. This morning I got up and looked at the code I wrote yesterday and thought “wow, I actually got a fair bit done” and then I started browsing through the repo and thought “this is kind of a mess, I can do better”. So, long story short, I’m scrapping most of what I did yesterday and starting fresh on Saturday.

Opportunities for improvement:

• I’m coding the whole thing as a React/Express fullstack app, there’s no reason for the client to be hitting offsite APIs, it would be far cleaner to have the client call the backend and then have the backend hit offsite APIs and cache results. The potential benefits: consistent experience for all users (no “that API isn’t available from my location” — thanks eddyw from the Chingu cohorts for identifying that the random quotes API I was using isn’t universally available). Plus, if I pull the quotes on the server, I can cache them and limit requests to the offsite API.
• I love material design, but the material-ui components are really bulking up the jsx, plus Francesco Agnoletto is writing his own Sass framework for the speedrun, and it’s got me thinking that would be an awesome challenge — so I want to explore creating my own grid system and a consistent UI experience with my own styles.
• I want to spend a day reading the React docs, my code looks messy to me, I want to delve a bit deeper into the docs and identify opportunities for streamlining my code.
• Create-react-app — I used it to bootstrap the first version, I’d rather build everything up from scratch, I don’t like how it hides everything from me, I’d rather be able to see and tweak everything that’s happening. Case in point: it hides which eslint rules are in use, and I didn’t notice until after I pushed my changes that some simple things like using double instead of single quotes weren’t caught by the built in lint rules.
• TypeScript — I love TypeScript, I’d like to include it in the server-side API and build process, I’d like to see how it can contribute to making the Express side of things a bit more robust.

What I want to keep:

• Modular Express app on the backend — I love this, it’s easily extensible and will allow me to plug in new projects as modules. Nice, clean, tidy, I love it.
• Build process that rebuilds both front and backend on any change and re-renders the app during the development process, and auto-deploys to Heroku via Travis-CI on any git push. Setting up the build process on day 1 is going to be a huge boost to the rest of the speedrun.
• Eslint — setting that up straightaway was perfect.
• Integrated app from the start — one full stack app, plugging in projects as modules is a much more interesting challenge and makes the simpler of the projects an opportunity to explore implementing modules in a larger application efficiently.

Ideas floating around the back of my mind:

• Next speedrun, I’d like to explore implementing the API as a series of microservices on AWS Lambda, I’ve already used Lambda on a number of occasions but it was typically just a few microservices for a client, I’d like to build out something truly slick. Note to self: check what languages Lambda is supporting these days, it’d be pretty sweet to build it out in something more performant like Rust or Go.
• It might be fun to have css-framework wars with Francesco Agnoletto during this speedrun and then collaborate after it’s over to build something rock solid for use by the other Chingus.
• Figure out Enzyme — seems straightforward, should be using it.
• React is still not my favorite library — but after a day working with it, I looked at what I wrote and thought “I could have done that better” and am actually a bit excited to give it another go on Saturday. It hasn’t won me over — but my mind isn’t closed to the possibility.

For anyone interested in learning to automate your build process:

Travis CI - Test and Deploy Your Code with Confidence

Hit the Travis-CI site — your projects will be better, across the board, for you having done so.