What should I be learning in 2018?

I'm into my second year of my transition from Drupal and PHP to full-stack JavaScript. Things are generally pretty good. I have been having a lot of fun with my projects this year.

This post is a summary of things I have been learning that have all turned into things I have been doing for work as a freelancer. Want to know what type of things are on my desk at the start of 2018? This is it.

"Front End" React & Vue ("web applications")

Transitioning between technologies is especially hard for a consultant who already has established business in another area but I have fumbled my way through:

• I started with a Vue.js project for an agency where my friend worked. They didn't care what the underlying techonlogy was, so long as we could build a kiosk with it. Vue.js was very fun to work with, and I will use it again. We packaged the project with Electron. Prior to this project I had made a little hello-world in Vue.js.
• Next up was a React project. I like to call this one a "pants-less drupal" project because "headless drupal" is all the rage in that community, but in this case we were making the editing - not display - side headless (don't do this, do the front-end with React too, and use Node.js or Go as the back-end). It was a complicated and big project. I learned a lot about using JS promises. I can see where React is more flexible than Vue.js, but I found them remarkably similar.

Prior to these two projects I had done an ES6 JavaScript course by Wes Bos, which was a great top-up for someone like myself who always "knew" a bit of JS but spent more time doing back-end programming in other languages.

I was introduced to Vue.js with Laracasts "Learn Vue 2: Step By Step" which is a great (not to mention, free) introduction to programming with Vue. For React I got going by watching a few videos on YouTube as many of the concepts were familiar from Vue. Eventually I paid up for another Wes Bos React course, "React for Beginners" and used that as a guide to audit our code before going live.

If you are thinking of taking on "front-end" JavaScript projects in 2018 I would focus my efforts on React (where the money is) or Vue. Angular is a good option as well. All of these make use of a "virtual dom" that makes things faster for users and more pleasant for developers.

If you just wrote-off that previous comment because you're not a "front-end" developer I have news for you: coding in React and Vue.js is more like application programming and at the end of the day you are still going to hand it over to your CSS specialist to fine-tune it. So don't avoid these technologies just because you are a so-called "back-end" dev.

There is also an entire category of "front-end" JS work that is powered by back-end node.js pacakages like webpack are great too. I am using metalsmith.js to generate this static blog site. You can find more about that in my previous blog post.

How JavaScript Has Changed

I have often mentioned that JavaScript has undergone a bit of a renaissance with the transition from "ES5" to "ES6" (otherwise known as ECMAScript6 or ECMA Script 2015). The language added many new features that make lives better for developers. It has continued to improve since then.

Since I had not been "focused" on JS for many years I struggled with a few points that look obvious now:

• import vs. require vs. script tag. This should be easy, but add in npm and bower (not to mention now we also have yarn), I found this difficult to differentiate which context and when I should use each. For now I'm using node.js' require because import is still too new when used in browsers. If using node.js to render static sites, require is used but then the final rendered output might get attached to a page using a script tag. Now that I understand it... It is obvious. Less has changed here than I had imagined.
• transpiling vs. polyfilling. One converts your beautiful new code into grotesque old-timey code with the potential for new bugs, the other loads a bunch of code in old browsers to make them capable of understanding your new code. I had not separated these ideas out in my head. They didn't really matter to me before though.
• legacy JS. Learning ES6 was great. Using ES6 is even better. Until you inherit an old project and start having to mix the old and new paradigms. If I never see another ES5 slideshow with jQuery and three other libraries it will be too soon. Plain ES6 will get you much further in less time and with less debugging.
• never click the link to "w3 schools", there are much better docs at "mdn" now.

Another worthy note about how JavaScript has changed: I feel like it is much simpler to manage code in a way that is not a memory-leaking disaster. Maybe I've just grown older and wiser in this department though.

Onward: All the Things!

As 2018 begins JavaScript has started to take over other parts of my developer life:

• I'm using JS to perform content migration work and audit those migrations. Most of these are currently in-house node.js scripts but they are starting to take shape as potential npm packages.
• I am working on a node.js API service in my spare time. Finding this to be valuable as a dojo experience, but I have plans to release it to the public at some point. It will replace some of my most complex projects when it is ready.
• End-to-end integration testing and QA work has started to hit my desk more often. This caught me by surprise... but "Headless Chrome" is fantastic and lets you code your tests in ES6/7/8 syntax. I'm using puppeteer and mocha with chai as my test running solution for now.

The neat thing about that last point... well, actually many of these points is that these tasks situate me in such a way that I can keep working "around" Drupal and PHP communities where my existing clients are as I learn new things and take on new JavaScript projects.