What Web Developers Should Focus On In 2018

In this post, you will learn about the tools and technologies web developers should start learning in 2018. I'm not going to tell you which framework you should learn, but, rather, how to stay relevant in web development. This article assumes you have a familiarly with JavaScript and/or web development at any level.

If you aren't already working primarily with ES2015+, stop everything and start learning! Having a fundamental grasp of JavaScript can increase your chances of getting hired and possibly help you get a high paying job.

WebAssembly

In late 2017, support for WebAssembly shipped on all the major evergreen browsers. WebAssembly is the biggest game changer for web development in recent memory.

WebAssembly (wasm) lets engineers run binary code in the browser. Web developers can now write code that is more secure, because WebAssembly executes within the browser's sandbox.

The wasm format is extremely compact, meaning code can be transferred over the wire faster than similar JavaScript. WebAssembly code is executed at near native performance. Other languages, like C++ and C#, can be compiled down to WebAssembly, making it possible to port native applications to the browser.

Web developers now have a viable alternative for coding web applications that is potentially more secure and performant than JavaScript. WebAssembly will probably be first used for processor intensive operations like machine learning and computer graphics, but could see greater adoption in the future. With the growing number of cyberattacks, running a web application in a sandbox may become a requirement for some corporations to keep users secure.

Security best practices

It is really not a matter of "if" but "when" the next cyberattack will take place. Don't let it happen on your watch. It's up to web engineers to keep users safe from malicious attacks. There is no better time than now to learn how to protect your users from cross-site scripting attacks (XSS) and cross-site request forgeries (XSRF).

If you are using a JavaScript framework, it is worth taking some time to read how it provides safeguards against attacks. Another good exercise is to audit your codebase and any third party code your web application consumes for vulnerabilities or exploits.

Browsers are starting to take more drastic measures to warn users if your website is not already running on HTTPS. It's easy to get a free SSL certificate these days. There is really no excuse for leaving users vulnerable to cyberattacks.

Use async/await instead of Promises

It's always a good time to learn new ES2017 methods now that ECMAScript is being updated on a yearly schedule. In 2017, the new ES2017 async/await pattern landed on all the major evergreen browsers and nodejs. Async/await offers a more concise API than Promises for handling asyncronous programming.

Take a look at this example of a function that returns a Promise. This code fetches an Array of posts and returns the first post's title.

function getFirstPostTitle() {
    return getPosts().then(function(posts) {
        return posts[0].title;
    });
}

With the callback pattern offered by Promises, you can end up with a lot of callbacks that return something. Using async/await, you can trim down the amount of source code needed to do the same thing.

async function getFirstPostTitle() {
    let posts = await getPosts();
    return posts[0].title;
}

Under the hood, async and await work the same way as Promises. Think of async as the declaration of a new Promise() and the await is the then() callback. The async/await pattern is essentially Promises without the callbacks.

Start using CSS variables

The role of CSS preprocessors like SASS and LESS are continuing to thin out in 2018. In 2017, CSS variables became available in all of the evergreen browsers. What is the huge advantage over SASS or LESS variables? CSS variables are accessible via JavaScript. Below is an example of what CSS variables look like.

Let's say we have an Element that displays a button.

<div class="button">My Button</div>

Use the :root pseudo class to select the document to give the CSS variables a global scope. Then, use the variable in the context of the styling for the button.

:root {
  --button-bg-color: #FF00FF;
}

.button {
  color: white;
  background-color: var(--button-bg-color);
  display: inline-block;
  padding: 4px;
  width: auto;
  height: 24px;
}

Get the value of the variable used to style the background-color with JavaScript by selecting the Element and then calling getComputedStyle with the element — pass in the variable name as a String to the getPropertyValue method.

let element = document.querySelector('.button');
getComputedStyle(element).getPropertyValue("--button-bg-color") // returns #FF00FF

CSS variables are a useful tool for standardizing styles across a project. Web developers should start using CSS variables in 2018 now that they are supported in all evergreen browsers.

Shadow DOM

2018 will most likely be the year Web Components land in all the evergreen browsers. 2018 has just begun and Shadow DOM v1 already has support in Chrome with partial support available in Safari and Firefox.

Shadow DOM solves a long standing problem in front-end web development where the DOM only has a single scope. Web Components use what is called the Shadow DOM to encapsulate a chunk of code. Shadow DOM allows you to encapsulate an Element so JavaScript and CSS are scoped only to the instance of that Element.

For years, developers had to come up with ways JavaScript could solve this problem. React and Vue use an opinioned Virtual DOM that is similar in concept. Angular emulates Shadow DOM with it's ViewEncapsulation and in the future will allow engineers to flip the switch that turns Angular Components into Web Components.

The Polymer library pioneered the spec years ago. With all the talk of Functional programming in recent years, it's nice to see encapsulation, the hallmark of Object Oriented Programming, come to the DOM.

Parcel

Webpack is currently a very popular tool for bundling web applications, but in 2018 the bundler may see some fierce competition from Parcel. Parcel offers a "blazing fast, zero configuration web application bundler." Parcel achieves faster build times over Webpack by caching and using multiple cores of your processor.

Parcel offers zero configuration, as opposed to Webpack, which can require lots of config. Parcel prefers code over configuration, but the only time you will write code is when developing a parcel plugin.

Parcel's learning curve is easier than Webpack's. Just install the parcel plugins your project requires via Yarn or npm and run parcel index.html. Parcel offers a more seamless experience than Webpack, allowing you to concentrate on app development. Parcel launched in late 2017. As the ecosystem grows in 2018, you may find yourself looking at Parcel for bundling your next web application.

Upgrade WebSockets to RTCDataChannel

With the launch of Safari 11 in 2017, the RTCPeerConnection and RTCDataChannel API became available in all evergreen browsers. Web developers can now reliably provide peer to peer communication in the browser over WebRTC. You may have used WebRTC before in a Google Hangout without even knowing it, as the spec was first introduced a few years ago in Chrome.

Once users have established a connection with RTCPeerConnection they can communicate with the RTCDataChannel API. Users can transmit String, Blob, JSON, and ArrayBuffer over an encrypted RTCDataChannel connection browser to browser, cutting out the need for a back-end server for messaging. If you rely on WebSocket for P2P, 2018 is the year to migrate users to WebRTC for a better experience.

Update your nodejs scripts to ES2015+

In 2017, node LTS provided support for ES2015+ methods, with the exception of ES2015 Modules, which landed experimental status in node 9.3.0. 2018 will most likely be the year you can finally migrate all of those require statements to use import in your Node.js projects. If you haven't already, update all of your Node.js projects to use ES2015+ syntax.

Pick a JavaScript framework and learn it

You can increase your chances of getting hired if you know at least one JavaScript framework. React has been the most popular fraemwork in the past couple of years, but a lot of companies still rely on Angular.

Already invested in either Angular or React? Learn the counterpart and maybe you will like it more. Knowing more than one framework can help you feel confident applying for more job opportunities. Vue is an awesome alternative to React for UI development. If you've run out of frameworks to learn, start learning WebAssembly!

I hope this list is helpful for anyone trying to stay ahead of the curve in web development. Do you have any other ideas for what engineers should be concentrating on in 2018? Drop a comment below.