Redux creator Dan Abramov asked his massive audience of JS devs on Twitter what the most interesting trends in the JavaScript world are. I condensed the huge list of responses to the most popular ones here. It's a very interesting look into the future of JS over the next year.
TLDR: Functional programming is no longer just for the hipsters. Is it time to roll out the red carpet?
We've since written about the 2018, 2019, and 2020 JavaScript trends. Go read those to see how the JavaScript ecosystem has evolved!
Here are some of the highlights in order of popularity (most popular to least):
WebAssembly
Ah, where to begin in explaining WebAssembly? Think low-level code, but for the web. Its real intention is to make it easy to code in any language (get excited functional/reactive programmers!) and compile for the web.
This gets a lot of people excited because a lot of devs still have a love-hate relationship with JS, and a love-love relationship with a lot of other languages (as you’ll see in the rest of this list).
JS has significant momentum still, so no one is expecting it to fade away quite yet.
And WebAssembly is still quite young. It just went into a preview and is far from being released. That said, you’ll want it to be on your radar as it does put a rather large question mark on the future of JS.
Read way more on Web Assembly here in Eric Elliott’s post.
Elm
A lot of devs fell in love with Elm in 2016. Elm’s a programming language and is an option for anyone interested in getting into functional programming.
From Elm’s “Introduction to Elm” page, Elm is about:
- No runtime errors in practice. No null. No undefined is not a function.
- Friendly error messages that help you add features more quickly.
- Well-architected code that stays well-architected as your app grows.
- Automatically enforced semantic versioning for all Elm packages.
So basically great tooling combined with clean, simplified and smaller code.
Elm, of course, compiles to JS, which has brought it on the radar of many JS devs.
babili (babel-minify)
Babili came out in August 2016 and is an ES6+ aware minifier based on the Babel toolchain.
So, why another minifier?
Here's what Henry Zhu said about it:
“Babili can accept ES2015+ input, while current minifiers are mostly limited to ES5, requiring code to be transpiled before minification. This is becoming unncessary as people begin to ship ES2015 to clients. Babili is also modular/flexible (being a Babel preset means it supports user plugins) and can be used as a preset or CLI tool. Babili will also be able to make ES2015+ specific optimizations.”
OCaml
OCaml on its own isn’t quite JS-related, but for the next two trends on the list, you’ll need to quickly understand OCaml.
If you’ve been following the growing Functional Programming resurgence over the last few years, you may have heard of Haskell. OCaml is quickly becoming more favored over Haskell, primarily because there are some great compilers to go from OCaml → JS.
Facebook devs, for example, are big fans of OCaml, as it helped them build Hack, Flow and Infer.
BuckleScript
BuckleScript is a backend for OCaml, created by the team at Bloomberg (yes, _that _Bloomberg).
As explained by Duane Johnson:
“BuckleScript, or
bsc for short, is a relatively new Javascript backend to the OCaml compiler. In other words, you can use the functional, typed OCaml language to transpile to Javascript. The cool part is that BuckleScript is both readable (so if you're familiar with JS, it makes sense and is easier to debug), and it ties in to the
npm package ecosystem. So you get the best of both worlds: a powerful, functional, typed language that ties in to the latest and greatest web development libraries.”
ReasonML
Built by the same team that built React at Facebook, Reason is a language on top of OCaml with super friendly syntax, deep editor integration, and great build tooling.
Sean Grove explains Reason nicely (and quickly) in his talk here: https://youtu.be/QWfHrbSqnB0?t=29m34s
Purescript
You guessed it…another strongly typed, efficient programming language that compiles to JavaScript.
This one is especially popular with “Team Haskell.” Consider it a competitor to Elm.
It touts:
- No burdensome runtime.
- Strict, Javascript-like evaluation.
- Support for Javascript object literal notation.
- A type system that is arguably more powerful and/or more convenient than Haskell’s.
- A dead simple FFI that makes Javascript library interop relatively painless.
Webpack-blocks
A sane way to configure Webpack. Here’s the only endorsement you need:
Webpack clearly wants to stay low-level. So it makes total sense to outsource configuring it to well designed blocks instead of copypaste.— Dan Abramov (@dan_abramov) December 6, 2016
If you use webpack, chances are you’ll find great use in webpack-blocks.
GraphQL
GraphQL looks to be the replacement to REST, especially for companies with massive amounts of data to process. This case study should give you an idea why. TLDR: Efficient to the max.
I imagine we’ll continue to see GraphQL’s rise in 2017. Whether it will truly replace REST, let’s chat in 2018.
React Storybook
A UI dev environment for React/React Native. With it, you can visualize different states of your UI components and develop them interactively.
You’ll get the idea pretty quickly with this sweet GIF:
Get it here.
jQuery 3.0
Grandfather jQuery is still around! They released a slimmer, faster version in June 2016 and you probably didn’t even hear about it while you were taking all those Egghead React courses.
Get caught up: https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
Pixi.js
Freakin’ awesome if you’re into making epic 2D experiences in the browser, especially for game development using WebGL.
Check out their gallery of examples: http://www.pixijs.com/gallery
Even if just for fun, just get into this. Now. :)
Preact
Fast
3kb alternative to React with the same ES6 API.
More: https://preactjs.com/
inferno
The alternative to Preact, Inferno is a fast,
8kb React-like library for building high-performance user interfaces on both the client and server.
Offers more out of the box than Preact.
Rust
Another fast language that now compiles to JavaScript (via emscripten). Is it obvious yet how many devs don’t want to code in JS anymore? :)
https://www.rust-lang.org/en-US/
Custom Elements v1
Custom Elements (combined with Shadow DOM) have had trouble getting adopted by a lot of devs (primarily due to it being hard to sort of grasp the concept), but it might continue to rise in popularity in 2017.
The key will be browser support, which is growing as you’ll see here.
Personally, I think it’s an awesome way to give more power to devs while also reducing code.
Check out SmashingMag or Google’s explanations on how to use Custom Elements.
WebRTC
Hard to believe WebRTC is already five years old. Facebook, Slack, Snapchat, and WhatsApp all now utilize it in their services. It’s inevitable that WebRTC will continue to rise in adoption from more and more companies doing any form of voice or video comms.
Let’s just hope the innovation on WebRTC’s end keeps getting better, too.
Next.js
Next.js is a small framework that is built on top of React, Webpack and Babel. It helps you build and deploy server-rendered React apps more easily.
The guys behind it at ZEIT are really active in the React community, so it’s worth following at the least.
Or give it a shot here: https://zeit.co/blog/next
Don't forget to read our 2018, 2019, and 2020 JavaScript trends articles too!
