X-periment: A React, Elm, and WebAssembly Story

X-Team recently held a round table discussion on the future of front-end web technologies, and one specific topic really stood out. With React.js being one of the current juggernauts of front-end development, can an up-and-coming technology like Elm hope to dethrone it? And what does WebAssembly have to do with all of this?

While readers are likely familiar with React at least on the surface, let us kick this off by giving you a short overview of what this "Elm" thing even is.

Elm

Elm is a purely functional programming language for declarative creation of web user interfaces. It first appeared in 2012 and is currently at version 0.18 (November 2016). It is a statically, strongly typed language with type inference.

Thanks to its functional origin, it places high value on value immutability, i.e. once created, a value cannot be changed. It uses a module system, which enables for cleaner composition with several files and thus also allows for only importing values, thereby hiding implementation details irrelevant for programmers just using a module.

It uses ports to communicate with Javascript, which allows for communication between Elm and Javascript. It also supports writing HTML and CSS directly within Elm and uses a Virtual DOM for efficient rendering of changes.

Future of React with Elm on the horizon

As a React discussion grows longer, the probability of a comparison involving jQuery approaches 1

Fortunately, nobody mentioned jQuery in our discussion, despite this nice Godwin's Law fork by Pawel, but X-Teamers nonetheless came to a consensus in the end. Despite several of them being highly interested in Elm, some of them having even done first pet projects in it, none believed that Elm could usurp the top spot in front-end web development in the near or medium future.

One major argument against that is that React is backed by a major player — Facebook — which pretty much renders it immune to being displaced by such a small contender. Even more importantly, however, since there are just so many different ways to do things in Javascript, especially with React + Redux working almost exactly like Elm, expecting that a large percentage of developers would choose to embrace a whole new language and even programming paradigm just to do what they can do equally efficiently in a language they already know, seems highly optimistic at best. Perhaps if Elm also expanded to mobile in the sense React did with React Native, but until then, it will likely remain a nice little language to play with and use for pet projects, but one should not expect many commercially viable endeavors to be based on it.

There is a game-changer incoming, however, and that is WebAssembly.

WebAssembly

WebAssembly is a low-level, bytecode format for client-side (in-browser) scripting, which is being designed as an open standard by a W3C Community Group. The intent is to have WebAssembly be a portable stack machine, which should be faster to parse and execute than Javascript. It is also to become viable as a cross-compilation target for other languages, so one could theoretically use any language for programming for the web, by compiling the code to WebAssembly.

Currently, WebAssembly is supported by Firefox >52, Chrome >57, Chrome for Android >57, Safari Technical Preview, Opera >44, and MS Edge as a preview release. You can check the levels of support at CanIUse.

Front-end takeover by Wasm?

While it is unlikely that React would lose a major part of its market share, it is to be expected that with the advent of WebAssembly, many new patterns for developing for the front-end will emerge, as several languages, which have hitherto been confined to servers, will suddenly find their way on the web. However, even with some parts of React staying the same, it is likely that these new developments would influence how it continues to develop, incorporating some of the best novelties itself.

In conclusion

X-Teamers are optimistic about the future of front-end development, with many interesting technological opportunities being just around the corner. Regardless of how Elm and WebAssembly turn out by the end of the year, there can be no doubt that we are all in for an interesting ride.

And, remember, whatever happens, we will be there, surfing on the cutting edge of tech!