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):
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.
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
undefinedis 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.
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.
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 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.
BuckleScript is a backend for OCaml, created by the team at Bloomberg (yes, that Bloomberg).
As explained by Duane Johnson:
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.”
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
This one is especially popular with “Team Haskell.” Consider it a competitor to Elm.
- No burdensome runtime.
- A type system that is arguably more powerful and/or more convenient than Haskell’s.
Anders explains TypeScript more in-depth here.
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 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.
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.
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.
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. :)
3kb alternative to React with the same ES6 API.
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.
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.
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 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 💚 :)