What should I be learning in 2018?
January 25, 2018
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.
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 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.
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.
Onward: All the Things!
- 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.