Javascript Development and trends in 2017

While 2017 will not probably be a “year of JavaScript”, it’s close enough. There is a lot of stuff to look forward to, and we can probably make a prognosis or two without being totally wrong.

Shift to functional

More and more tools and accessibility for a wide audience: that’s what makes JavaScript so popular among the functional programing community.

With tools like Redux or ImmutableJS, completely stateless components driven by immutable data have been possible for some time now, with no indications that this trend will change.

The advantages are obvious: better testability, simpler application structure, performance improvements. The greatest disadvantage is that it requires some non-trivial effort for established OOP programmers to move to functional programming. Not surprisingly, as we have observed ourselves, junior developers without much experience are quicker to adopt functional ways and use them actively from project start.

React + Redux is still a great way to structure and build a web application from the grounds up using FP principles. And it will continue to be in 2017, that’s for sure.

React offers stateless components that are defined via pure function from version 0.14. Redux, among its unchanged core principles, has a lot of more recent tools like redux-saga or redux actions.

Figure 1: React and Redux bolted together

And there are even functional trends not reliant on JavaScript as a language:

Elm is a purely functional language that compiles to JS, and might be a nice way to compete with the above. It thrives in code cleanness, user friendly attitude, and a complete set of development tools. Note: It’s not a framework or library which you use in ES6 - it’s a brand new language.

Surprisingly, it's not just Elm out there. There are plenty of other FP language implementations that compile to JavaScript. From the more recent, PureScript or OCaml (powered by, say, BuckleScript) might be of interest for you.

If you like functional programming and want to use it actively in web development, it should be really easy nowadays. Choosing the solution you are most comfortable with is the hardest part, it seems.

Frameworks: is there a real choice?

Of course there is, one might tend to say when looking at pages like TodoMVC.

But that playground aside, let’s ask: is it really a valid argument to search for a new framework just now, in 2017?

It looks as if there are two biggest contenders out there: React and Angular. No other framework comes even close.

React is and will be there for a long time, undeniably because of Facebook’s influence on the rest of the web. Although it was released for public just a few years ago, the sheer size of the community and code spread is huge. You simply cannot fail choosing it today.

Of course, there are important issues regarding React that you need to answer before you proceed:

React with… what? React is not a complete MV* framework. It is mostly concerned about the view and partially about the controller responsibilities - with the right components. So you still need some other library to be plugged in to do the business logic stuff. As above, your primary choice would be probably Redux, or MobX (more on it below).

React is still Facebook’s property and as such has some surprising terms and conditions that you need to meet. Did you know you cannot use it if you sue Facebook in the future? Or that you cannot make a product in React that would compete with said company's activities?

React needs quite a lot of tooling to work comfortably. But you probably will use Babel/WebPack to power all the transpiling and modules… so no biggie there.

AngularJS is the second contender. Actually, according to many sources, it’s number one through usage. Currently, you need to be aware if you are planning to use Angular 1 (probably due to backward compatibility) or 2 (recommended if you are starting a project), as they are completely different.

There are good reasons why you would choose Angular 2 over React:

If your project is composed of a lot of “standard” MVC pages - CRUD templates,

if your project is huge, but relatively trivial and repetitive,

If you want a lot of the “common” web application bells and whistles to be in place already, compared to React.

MobX, Vue.js: watch them carefully

MobX caught the attention last year as a nice replacement for the beginner-demanding Redux on data management. It is really simple and follows nice structural logic. MobX integrates very well with React and there are many strong proponents arguing that it’s a much better fit for most cases than Redux.

MobX adds observable features to existing data structures and is based on what can be called “functional reactive programming (TFRP)”.

It is much easier for complete beginners - last year our junior dev completely coded a non-trivial school project in it without prior MobX / React knowledge, delivering the resulting app quickly.

It is however often argued by many Redux proponents that MobX makes it easier to write bad code. The final choice is probably a question of which style is more acceptable to your style.

Vue.js directly competes with React and is chosen by many, not only because of Facebook’s terms. It’s unlikely it will ever be more widely adopted than Angular or React, but it’s still an interesting solution.

Tooling

Code Editors

Starting with JavaScript code editors, there are a couple of tips:

Atom – a full-featured hackable editor, as its tagline implies, grew to wider adoption in just two years. Built in Electron, which in turn translates into JS and HTML, many people love it for the level it allows itself to be changed prior to the needs of the developer.

VSCode is growing popular, being also not even 2 years old. Based on the same technology as Atom and built by Microsoft, it is strangely not related to Visual Studio as you would expect it to - but exists in a stand-alone version as a source code editor, for many platforms.

JetBrains WebStorm - compared to the above 2 choices, Webstorm is a heavyweight. Focused to be a complete IDE, it has very nice JavaScript support and allows for a large number of tasks (deploy, testing) to be easily integrated and turned on, without much effort. The only disadvantage is its price and the fact that it’s built on Java (worse performance on weaker machines).

Project setup

Yarn. Replaces npm in speed, reliability and security. You probably already migrated to it in your project, so explaining makes no sense, right?

Webpack-blocks. Ever tried to make sense of webpack setup? While it’s a brilliant tool, its config is an issue, often many days’ worth one. Blocks tend to ease this pain by providing a nice, functional, JavaScript-based interface to configure it tirelessly.

Browser

WebAssembly is the most interesting concept you would probably hear of nowadays. We can imagine right now how you shake your head: Web and Assembly? But it’s actually a pretty good idea, as it turns out:

WebAssembly is a portable stack machine, which is processed in the browser by a much faster rate compared to JavaScript. So in theory, you could write a language compiler in WebAssembly and have your language parsed very effectively.

This is a great advantage in times when most languages or tools compile to pure ES5 JavaScript.

Of course the adoption of this W3C standard is another question entirely. But, because Chrome, Edge, Firefox and WebKit have reached a consensus recently, this technology is going to be there, soon.

Service Workers offer complete control of your browser file fetching, which is a great tool for offline control. When AppCache is considered obsolete as of right now (thank God), this should have been there, like, yesterday. But, apparently, the only problem today is the current browser support: only Chrome and FF have it ready. Edge at least in development. And Safari has “brief positive signals in a 5-year plan”… let’s hope all the browsers have it in production by 2018.