A few days ago, while learning...
FRONTEND IN 2018
The Framework Wars
The technologies listed are now outdated by the time you read this
I’ll talk about my experience of learning Frontend in 2018 and give some pointers to those interested in the same.
- Node is taking over the backend for most use-cases
- Adoption is growing on the desktop (e.g. Spotify, VSCode and Slack via Electron)
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.
I like to start at a high level. Some of these are overlapping (Flux and MVC) or historical, but worth knowing:
- MEAN - when the stack is Node.js, Express.js, Angular.js and MongoDB. Alternatives include MERN (React.js), MEVN (Vue.js), or MEN with Vanilla JS.
- Progressive Web Apps
- Immutable Web Apps
I’m ruling out other important areas for now, like SEO and design related ones (e.g. UX, typography).
You’ll obviously need to learn CSS. See the MDN: Introduction to CSS. It’s not a problem:
CSS is easy. It’s like riding a bike, which is on fire and the ground is on fire and everything is on fire because it is hell.— I Am Devloper (@iamdevloper) July 14, 2016
I assume you know basic HTML already?
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 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.
Since the only interesting bits in this post aren’t mine, I should credit them:
- The Star Wars CSS library used above is from Polarnotion. This other one seems even better but more work to adapt and probably not CSS only.
- The Web Developer Roadmap is from Kamran
And obviously Disney. Please don’t sue me.