Top JavaScript Tech to Learn in 2018

WRITTEN BY GARETH DUNNE @DUNNEDEV

As the end of January is fast approaching, I thought it would useful to highlight some of the latest features in JavaScript to keep your eye on in 2018. This is not a comprehensive list by any means, but here are 5 things I think will see another surge in popularity over the next 11 months.

React Native is already an incredibly popular JavaScript native app development library. But its newly released feature will really bring it into the forefront this year.

I am of course talking about the release of React Fiber. This is where React Native truly stands out.

React Native’s performance was always considered to be fast and has even been compared to native developed apps.

However, with the release of React Fiber, areas like animation, layout and gestures are now signficantly more responsive. It now has the ability to split rendering between chunks and spread it out between multiple frames.

This is not the only crowd-please; Fiber also assigns different priorities to different types of UI updates. The more important ones take priority when React re-renders.

For a more detailed guide to React Fiber I recommend this explanation here on the React Fiber Architecture.

To summarize, React Fiber works smarter, not necessarily faster. Prioritisation of tasks makes it a faster application. Very exciting stuff for those interested in fine-tuning performance.

The concept of Styled Components stems from the idea of components being reusable and modular. This is usually associated with best practices in the latest of JavaScript technologies.

As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that can exist in isolation. For example, a button or a menu.

In other words, this component can be migrated from project to project, needing little customisation to be fully functional. A component like this opens up many opportunities to inject different styles into it in various situations.

A library called Styled Components is using the idea of module styled React web components and I encourage you to check it out here.

While my personal preferences for styling are still SASS and partials, there is no denying that styled components are the inevitable evolution of modular UI components.

This a very useful one to know in 2018 as it injects scale-ability and modular practices into the styling of your individual project components. This ethos will not be going away any time soon as more technologies adapt the same behavior.

If Styled Components perk your interest and your not familiar with the ways of React.js you might find it useful to get started with this learning resource.

CSS Grid is a relatively new layout system available in CSS. Unlike Flexbox, you work with a grid layout by applying CSS to a grid container (parent) and also the grid children which become grid items.

And although its not directly JavaScript related, I feel compelled to mention it here. It is a great addition to the layout of any web application or any JavaScript framework.

The basic premise seems solid, but why is this necessary? Well for one thing, it is the first proper layout system available from the browser. Flexbox was quite a one dimensional system in this regard.

It is also a cleaner way to create your responsive layout. This is because there are no additional untidy classes to add to your markup. In addition to this, there are no extra divs used to define something like a row. Instead, there only is a parent and a child.

And while it will be over a year before CSS Gris is implemented in production environments, its trajectory is really on a upward scale for 2018. There has been nothing but positivity for it and because of that I think it will really come to fruition this year.

I have started to change the grid system in my beer name finder application (built with Angular 5) from foundation to CSS Grid which you can see below:

I intend on doing a full post to CSS Grid but in the meantime this is a great comparison of CSS Grid to Bootstrap.

While this video from Coding Tech originally introduced me to CSS Grid:

GraphQL has been rapidly gaining popularity. When I first heard about it, I was really intrigued at the prospect of using a new query language for my API calls.

It makes sense to me that I should dictate what kind of query I want to send over to my API endpoint. Using GraphQL I can just define what format my requests and responses should be using a Type face query language which I would describe as hybrid between JSON and TypeScript.

There are plenty of examples on the site but I’ll give you a brief overview of one here.

You define your request Type like so:

type Project {
  name: String
  tagline: String
  contributors: [User]
}

You then use this Project Type in your GraphQL request;

 {
  project(name: "GraphQL") {
    tagline
  }
}

And the data returned is logical and what you would expect from what you described in your request.

{
  "project": {
    "tagline": "A query language for APIs"
  }
}

Makes sense right? I encourage you to play around with it here.

While I don’t have all that much experience with GraphQL, I can attest to it being a great service that can really streamline how you interact with data. This will make any frontend developers life that much more straightforward and is a tool to learn in 2018.

Hybrid desktop applications built with JavaScript are becoming less taboo among the web development community. Electron has seen particular success.

I have written a full post here about hybrid desktop applications and Electron.

Electron allows a developer to build a desktop application where the same codebase for the application is used to create iOS, Windows and Linux versions.

The mantra write once, use everywhere springs to mind here. And although there has been some concern for performance, this has been eased somewhat by big names in the industry creating applications that we all love and use.

Applications like:

• Slack Desktop
• Whatsapp Desktop
• Visual Studio Code

Chances are high that you’ve used one of these in your daily life and haven’t noticed anything unusual in performance.

In 2018, I can see more popular applications adapting Electron for their desktop versions. Not only does it look like it will become even more popular but it also reinforces the unique flexibility that JavaScript has as a programming language.

Once again, there doesn’t seem to be any slowdown for JavaScript while it progresses further into a wide variety of technologies and services. These are only some of my picks to watch out for and learn in 2018. Please let me know what your looking out for this year.