The Top JavaScript Trends to Watch in 2018

If you’ve been living under a rock or buried in projects throughout 2017, this is the article for you.

A lot happened in 2017 that we’ve been carefully watching at X-Team, setting up 2018 for a lot of action and innovation.

You can also use this as a guide to plan out your growth as a developer in 2018 to help you get on more innovative projects.

React vs. Vue.js

Let’s get straight to the good stuff: This time last year, not many had faith that Vue would ever become a big competitor to React when it comes to major companies adopting it, but it was impossible to ignore Vue this year, even sending Angular a bit into the shadows in terms of developer hype.

As we look ahead to 2018, we’re about to embark on an intense next 2 years filled with a lot of excitement for Vue.

But let’s not forget React still has the financial backing of one of the richest companies in the world, not to mention some incredibly talented maintainers. Both core teams also collaborate and inspire one another.

So what’s giving Vue the spotlight?

Vue is doing all the things that make developers really happy:

• Vue is lightweight, easy to learn, has incredible tooling, has great state management and routing built-in (!), etc.

Vue’s community certainly isn’t as large as React yet, but communities grow based on whether the core team has great ambassadors and listens to its community (both of which are in place).

When it comes to pleasing developers, let’s not forget Facebook’s epic fail this year with the BSD + Patents license snafu that went over really well with developers.

Sure, Twitter wars never killed a framework, but we’ve seen before how mismanagement (ex: Angular 2 delay) can create a window of opportunity to allow an alternative to step in and take the spotlight.

Here’s a great write-up on React vs. Vue vs. Angular from this year.

The likely end scenario? Facebook does what it does best: copy the innovators and the world continues to use React.

Every JS developer should still consider learning Vue.js, as it’s made a big enough splash to where we are starting to see the requests for Vue.js developers for hire come in, meaning you can create some value for yourself in the short-term at least.

Next.js

And then there’s Next.js, which we’ll call ‘insurance for React.’

React coupled with Next.js gets you much closer to the Vue experience in terms of tooling, code splitting, routing and state management, allowing you to also retain the massive React ecosystem and support.

Next is also especially useful for server-side rendered apps built in React, an increasing trend on its own.

Plus, add in Now.js (created by the same team) and you have a super fast way to deploy your React apps.

As the Vue vs. React debate continues among development teams and managers, expect to see more and more adoption of Next in tandem with React.

Angular

Despite Angular’s growing difficulties at pleasing developers, it will still continue to be a widely used framework in 2018.

Many major companies adopted Angular 1.0 years ago, and as they look to migrate to something better in 2018–19, they’ll be looking at React or Vue.js as potential alternatives to Angular 2.

Angular’s remaining advocates have taken the stance that Angular will be the JS framework of choice for the enterprise because big companies like OS projects backed by a big company (Google). But can’t the same argument be made about React and Facebook?

Here’s everything you need to know about what happened to Angular in 2017.

Reason

It’s always worth paying attention to anything that Facebook is using in production.

Facebook now uses Reason (their take on the already well-established OCaml) for the web version of Facebook Messenger, among other projects (WhatsApp, Instagram, Ads, etc.).

In 2017, they also released reason-react which creates bindings for React so you can actually write Reason code that compiles to idiomatic ReactJS.

So imagine not needing to install Babel (+ many plugins), Flow, etc. and only needing the power of OCaml + Reason (which now supports React bindings). That’s a big trend waiting to explode.

Reason gained far more attention this year in the JS realm than most other compile-to-js languages (sorry Elm, we still love you anyway), so it’s definitely one to keep watching and playing with in 2018.

GraphQL

GraphQL is a query language for APIs (think: a modern take on REST).

GraphQL lived up to the hype in 2017, as major companies like Yelp, Spotify, Github, Walmart, NYTimes, etc. all now have GraphQL-based APIs.

Some of these APIs are even exclusively GraphQL, with no REST option even available. Put simply: innovative companies are placing their bets on GraphQL.

RESTful APIs are certainly far from dead, but again, looking at the trends of where startups are moving, GraphQL is a popular option.

Alternatives like Falcor, on the other hand, are barely ever discussed anymore.

This is definitely the time to start learning GraphQL if you want to get jobs at innovative companies.

Redux, Relay Modern and Apollo

Redux is the ever-popular Dan Abramov/Andrew Clark project that quickly became the go-to solution for state management and data fetching in React.

But GraphQL really shook things up for Redux, primarily when it comes to data fetching.

We now have Relay Modern (created by Facebook) and Apollo, GraphQL client frameworks that let you fetch and pass GraphQL data into your React app more efficiently than Redux can.

But as one developer points out about Relay/Apollo/Redux:

These frameworks and their benefits do not have to be mutually exclusive. In fact, using them together can provide a nice separation of concerns that is so important in web development.

This means you can still use Redux in tandem with Relay, using Redux for local state and some complex non-server state and then Relay for fetching.

But the community is anxious for something to simplify this (and so far the only response is Vuex/Vue.js/Apollo or Cashay).

Storybook

Wow, Storybook really blew up in 2017.

Storybook is an environment for defining, developing, and testing UI components.

It went from practically dead at the start of the year, to massively popular in mid-2017 thanks to a huge community effort. It’s such an inspiring story of how open source work should evolve and worth reading about.

It’s so incredibly useful (and even fun to use), letting you build and test UI components in isolation. It’s like a living UI styleguide that actually provides real value to the developer.

You’ve likely come across an open source project using Storybook already, but to see it in action for yourself, check out the Storybook for Airbnb’s date picker.

If you want to stand out as a developer in 2018, then show up to an interview with a Storybook from your last project.

Bonus: Also check out react-bluekit, a Storybook alternative that the engineering team at Netflix is using for their components library.

Prettier

As the name suggests, Prettier is a code formatter that makes your code much more readable and, well, pretty.

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

becomes…

foo(reallyLongArg(),omgSoManyParameters(),IShouldRefactorThis(),isThereSeriouslyAnotherOne());

With more than 18,000 stars on Github, developers are loving this simple and valuable project.

It’s also used on a ton of other projects you likely already love, like Webpack, React, Next.js, Babel and more.

Then again, you could just become a Go developer and not even need to install this.

Jest and Enzyme

When it comes to JavaScript testing, Jest has certainly taken the lead, with Enzyme as an excellent complement when specifically building React apps.

As you’ll see here, Jest is now dominating Jasmine in downloads.

Jest’s Snapshots feature really took off in 2017, making it far less painful to deal with testing. Watch this talk from React Conf 2017 to learn all about it.

Enzyme, created by Airbnb’s engineering team, is a JavaScript library for testing React components. It’s exploded to 12,000 stars on Github since 2016.

Jest’s Snapshots + Enzyme’s super simple API for testing React components makes for a great testing combo that will continue to rise in popularity in 2018.

Webpack

Webpack has risen to become the most popular asset bundler. Webpack has also had an INCREDIBLE year.

This time last year, Webpack barely even had documentation and most developers had no idea how to get started with it.

Then, by the start of the year, I wrote about how incredible it was that Webpack had raised $15,000 in 3 months (and how happy we were to be one of its earliest sponsors) to support the project. They now have hundreds of thousands of dollars in funding.

Not only is Webpack paving the future of how open source projects can thrive, but the project’s development has maintained its massive momentum throughout the year.

And with Sean Larkin thankfully still leading the Webpack movement, there’s really no end in sight for what Webpack is capable of achieving next.

Because of how well supported this project it is (and how much they care about their community), it makes it the easiest trend to predict for 2018.

Parcel

But with every massive trend, there is a rising force of disgruntled developers.

Parcel, a competing bundler, is gaining momentum rather quickly with 12,000 Github stars out of the gate in 2017 and going directly after Webpack.

Parcel’s pitch is that all other bundlers have become too bloated, while Parcel works twice as fast at bundling as Webpack (10 times faster when using its cache).

It also goes after Webpack’s somewhat confusing configuration setup, as with Parcel, there is no configuration needed.

“Just point it at the entry point of your application, and it does the right thing.”

Although simplifying configuration and improving speed are both great improvements, I wouldn’t be surprised if Webpack doesn’t copy these improvements by the first half of 2018.

Similar to Vue vs. React, the little guy will always innovate faster, but it’s up to the big guy to be inspired by that innovation and improve their projects.

You can read the whole debate here.

UPDATE: Webpack v4 now comes with zero configuration out of the box.

Gatsby

Gatsby is a static site generator for React built by Kyle Mathews.

Ever since Kyle went full-time on Gatsby last year, it’s really started to pick up momentum.

There’s no better proof of that than the fact that the React website itself is built using Gatsby.

Gatsby is all about performance and delivering the fastest possible web experience in React.

This diagram from their website gives you an idea of how it works:

Gatsby also uses progressive web tech that prefetches resources for other pages, so browsing is lightning fast.

Although Gatsby isn’t going to dominate the industry by any means, it’s a fantastic solution for building fast static sites that will continue to rise in popularity.

For more on Gatsby, read this post.

We were also happy to sponsor Gatsby’s development this year.

Babel

Babel needs no introduction at this point and remains a trend essentially by default.

All in all, it was a good year again for Babel, primarily focused on building Babel 7 (hopefully launching early 2018). Most importantly, they wrote a song :)

Babel’s only concern currently (aside from its extraordinary maintainer taking an indefinite/vague break from the project), is something like Reason becoming mainstream.

But for now, Babel should continue strong throughout 2018.

We were also happy to sponsor Babel this year.

Flow & Typescript

Typescript and Flow are both great static type options for JavaScript developers to be using to improve their code quality.

We likely won’t see one overtake the other in 2018 in terms of popularity, as both have survived together, serving different use cases.

Flow, built by Facebook, is the preferred choice for React developers since it easily integrates with Babel, also commonly used in React projects.

TypeScript, built by Microsoft, is popular among Angular 2+ developers as it’s the primary language.

2018 will likely be dull in terms of advancements from these two, and the real question in the following years will become whether something like Reason replaces them both.

Immutable.js

I like the way one redditor described Immutable.js:

immutableJS ensures that developers on large teams don’t do something stupid.

Put simply: Immutable.js, another Facebook project, makes sure state isn’t mutated by using immutable (unchangeable) objects.

As our redditor friend pointed out, this can be incredibly useful in a large team of developers that can screw up state unintentionally.

Data encapsulated in an Immutable.JS object is never mutated. A new copy is always returned. This contrasts with JavaScript, in which some operations do not mutate your data (e.g. some Array methods, including map, filter, concat, forEach, etc.), but some do (Array’s pop, push, splice, etc.).

There are some pretty big limitations to using Immutable.JS, but limitations that might not matter depending on your needs. You can read more about them here.

With 20,000 stars on Github now, Immutable.js has risen in popularity in 2017 and can be expected to continue to rise in 2018 as developers start to take the time to understand the concept and the tradeoffs.

Popmotion

Popmotion is a JavaScript motion library quickly gaining stars on Github.

Think of it like Flash meets jQuery.

Now, I realize using those two words in the same sentence doesn’t help sell this increasingly popular library.

But the more you dive into this project, the more you discover a group of people who had serious gripes with both jQuery and Flash and simply needed to make things better.

And Popmotion is truly a better experience with a lot of innovation around web animation just starting to boil. This is one to watch in 2018 for sure.

Check out their site to start getting teased into trying it.

React Native & Electron

React Native allows you to build React apps for mobile devices, while Electron lets you build JavaScript apps for desktops.

Both became well-established frameworks in 2017 and both are great solutions for going from JavaScript to a native app.

Some notable apps built on Electron include: Slack, Atom, Github Desktop and Discord.

And popular apps built with React Native include: Facebook, Instagram, Airbnb and UberEATS.

You can also now build React Native apps for Windows.

Regardless, it’s a good time to be a JavaScript developer considering you can build apps for both desktop and mobile far more easily than in the past.

Bonus: Web Assembly

With all 4 browsers now supporting Web Assembly, we’re almost there. It’s still too early to call it a trend for 2018, so we’ll update you in 12 months.

But keep this on your radar, as everyone is looking very closely at this now.

2018 Study Materials

After looking at all of the trends ahead, here’s what we’d recommend you consider learning in 2018 to remain competitive as a remote developer and unleash your potential:

• Be daring, learn Vue.js
• Every React developer should learn Next.js
• Start learning Reason (and ReasonReact) and try it out on a side project.
• GraphQL is a must for your 2018 to-do list.
• Followed by learning Relay Modern, the go-to option for data fetching in React+GraphQL apps.
• Storybook! Storybook! Storybook!
• Install Prettier on a project and make your code more readable.
• Learn and use Jest snapshots in tandem with Enzyme on a React project.
• Learn Flow (React developers) or TypeScript (Everyone else).
• Consider Gatsby for building something from Markdown -> Static pages.
• Build a mobile app using React Native.
• Build a desktop app using Electron.
• Play around with Popmotion to create a smooth animation.

Import this list of resources as a Todoist project:

Ryan Chartrand is the CEO of X-Team, a global team of motivated remote JavaScript developers who can join your team and start executing today.

JavaScript Developers: Work from anywhere. Get great projects. Be supported to learn, grow and stay motivated. Join the X-Team community today.

Enjoy this post? Next read: How I overcame remote working’s great challenge.