Top JavaScript Tech to Learn in 2018

WRITTEN BY GARETH DUNNE @DUNNEDEV

JavaScript 2018

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

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.

Styled Components

Styled Components
Styled Components

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

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:

Beer Name finder

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: