Learning JavaScript in 2018

December 24, 2018

A few days ago, while learning...

FRONTEND IN 2018
The Framework Wars


JAVASCRIPT reigns. Having decimated the peaceful reign of backend only languages, JavaScript now deploys its merciless node modules to seize control of the styling from CSS with CSS-in-JSS, HTML with JSX, desktop applications with Electron and native mobile development with React Native.


The powerful node that was made to generate backend servers in JavaScript came with npm which is now used to install Frontend packages if that makes sense. Yarn, once prophesied to bring order to the packaging realm and the node_module wasteland, has been exposed as just another npm installer.


Legions that learned older JavaScript and gladly forgotten it must now learn the ways of ES2016 that are not yet browser compatible but are forced to by the mighty Babel. But chaos is unleashed in the JavaScript order. React and Vue fight for control after countless framework deaths, with no end in sight. React joins with Gatsby and Netlify under the JAMStack alliance to seize JavaScript leadership in the web but SEO says computer says no, since websites with fast changing content cannot be pre-rendered and need Server Side rendering with non-lazy and SEO relevant content easily available to the Google bots.


The author refuses to master all JavaScript as a futile quest, and imports a powerful foreign CSS to do this video and is not quite sure if a virus just entered your browser, or if alignment is right on mobile. Perhaps a new framework will arise that will light a spark of hope to the fight. The learning and desperate experimentation continues...


GALACTIC DISCLAIMER
The technologies listed are now outdated by the time you read this

TL;DR

I’ll talk about my experience of learning Frontend in 2018 and give some pointers to those interested in the same.

Why JavaScript

JavaScript is everywhere now, the reason for me starting this work.

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:

I’m ruling out other important areas for now, like SEO and design related ones (e.g. UX, typography).

JavaScript

Other

You’ll obviously need to learn CSS. See the MDN: Introduction to CSS. It’s not a problem:

I assume you know basic HTML already?

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:

Web Developer Roadmap 2018 - Frontend by Kamran.

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.

Credit

Since the only interesting bits in this post aren’t mine, I should credit them:

And obviously Disney. Please don’t sue me.

Automated local environments

IntroThis post is about automating the provisioning of your local machines via code. That could be your {work, personal} {laptop, deskto...… Continue reading

Bots - a review

Published on July 22, 2017

Flask, SQLAlchemy and testing

Published on July 09, 2017
comments powered by Disqus