The top rising JavaScript trends to watch in 2017
First, kudos to Dan Abramov for asking his followers this question:
The JS community didn’t hesitate to chime in with a ton of new tech that you should be watching for in 2017. I’ve made everyone’s lives easier and compiled an easy-to-digest list (with context) here.
TLDR: Functional programming is no longer just for the hipsters. Is it time to roll out the red carpet?
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. Noundefinedis 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.
Vue.js
It’s been a lot of fun watching Vue.js rise in popularity over 2016, and it’s sure to be a big player in 2017.
Evan You, Vue.js’ fearless leader/creator, also inspired the hell out of me in 2016, so make sure to read about that here.
Vue is a competitor to React, so naturally 2017 will consist of endless debates about React vs. Vue vs. Elm (read the debate already going here), but ultimately it will come down to which community provides the most support for larger projects, and Evan You knows what it takes to build an epic community.
Vue also just released its 2.0 which is faster and slimmer, making it even an even more attractive option now.
Check out why some companies are switching to Vue.
babili (babel-minify)
Babili came out in August 2016 and is an ES6+ aware minifier based on the Babel toolchain.
So, why another minifier?
Henry Zhu explains it best why Babili came to be, but here’s the important piece:
“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.
Typescript
TypeScript is a superset of JavaScript and is all about improving code quality and understandability. It also makes your IDE experience far better, spotting errors as you type (!). And yes, Atom supports TypeScript.
Anders explains TypeScript more in-depth here.
Webpack-blocks
A sane way to configure Webpack. Here’s the only endorsement you need:
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
I put heart into every post I write. I’m incredibly grateful to anyone who returns the favor by clicking 💚 :)
Ryan Chartrand is the CEO of X-Team, a global team of extraordinary remote developers who can join your team and start executing today.
Check out and subscribe to X-Team’s blog at http://x-team.com/blog
