History

I’ve been taking a break to do a number of things, one being to learn about modern Frontend. I haven’t properly done Frontend since doing LAMP gigs in college in 2005. This has been quite a journey. Backend experience helps, but the amount of solutions in the frontend space appears several times greater than in the backend (on any given language). And then multiply by some factor: whatever is a “good solution” at any given time, still requires some knowledge of the previous stack since the web hasn’t fully moved on and lots of content or solutions need to be adapted to be used in the new stack.

A long uninterrupted break was what I needed to go through breadth-first-search style across the long list of technologies used these days. To understand what did what, before investing further on a key list of minimal yet powerful enough technologies needed for web application development. And of course, to do the animation above as a cathartic experience.

Laundry list to learn Frontend in 2018

So this is what I recommend learning, fresh from the experience of (re)learning most myself.

Concepts:

I like to start at a high level. Some of these are overlapping (Flux and MVC) or historical, but worth knowing:

This leaves us with only a bazillion other Frontend technologies. But the above are the key ones to learn. Kamran open-sourced a beautiful roadmap that sheds some light on the taxonomy and relevance of all the JavaScript buzzwords you’ve read about Hacker News, I quote the Frontend bit:

First project

Ultimately you have to start somewhere and you want to be productive asap, without having to learn it all. The core technologies above suffice. In addition, in my case as I needed to make some mostly static sites I decided to adopt Gatsby.

Gatsby helps a developer to work with React and GraphQL to render the content on the server side pre-deployment, to ship static content to a CDN, resulting in super fast and cheap websites and luckily no servers if external services like Typeform or Disqus suffice for stateful logic. Rather than trying to adapt a specific static site generator (e.g. Jekyll, in Ruby) for these sites, I wanted to invest in JavaScript, React and GraphQL. As a one man shop I prefer to use powerful technologies that can be leveraged in many use cases.

Gatsby can also be a good choice for some types of dynamic applications, used together with a server-side API or cloud functions. Inside it, Gatsby manages a number of key technologies like Webpack for out-of-the box results, that I can defer to learn later. Additionally, it comes with a large number of plugins and starters to quickly adopt or learn by example.