Looking back on 2015: six exciting web technologies

[2016-01-01] book, esnext
(Ad, please don’t block)

In 2015, there was an amazing amount of innovation related to the web platform. The following sections describe six technologies that I find exciting:

  • Electron
  • React Native
  • Progressive web apps
  • Visual studio code
  • Rollup
  • Web Assembly

This blog post is a loose follow-up to “Web platform: five technologies to look forward to in 2014”, which I wrote in early 2014.

Electron  

Electron (by GitHub) lets you build cross-platform desktop apps with web technologies. Its features include:

  • Automatic updates
  • Crash reporting
  • Windows installers
  • Debugging and profiling
  • Native menus and notifications

Electron was initially created for GitHub’s editor Atom and is now used by various companies, including Microsoft (Visual Studio Code, see below), Slack and Docker.

Architecturally, Electron contains both a Node.js runtime and a minimal embedded Chromium browser. Electron apps run in several processes: A main process runs the main script specified by the app’s package.json file. To display a user interface, that script can open windows. Each of those windows runs in a separate process (a so-called renderer process), just like a tab in a web browser.

React Native  

With React Native, you can build native apps for iOS and Android via React. The virtual DOM is still there and you still use JSX to create it, but the actual UI is built with native components such as UITabBar on iOS and Drawer on Android. You lay out those native components via Flexbox.

On one hand that means that each of the following platforms has a slightly different UI layer now: the web, iOS, Android. On the other hand, you’ll be able to reuse much of your code, while having a native experience on each platform.

Usually I’m skeptical of solutions that try to transplant a language that is native on one platform to another one. But a few months ago, an iOS developer evaluated React Native and stated:

I may never write an iOS app in Objective-C or Swift again.

This is remarkable if you consider that he had to learn both JavaScript and React before he could be productive with React Native.

Another interesting quote, by Andy Matuschak (who “helped build iOS 4.1–8 on the UIKit team”):

I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.

Progressive web apps  

There are areas, where native apps have caught up with the web (deep linking, indexing). Progressive web apps are not really a technology, but rather an umbrella term for characteristics of modern web apps. These mean that web apps are catching up with native apps in some areas and moving ahead of them in others:

  • Progressive enhancement: The app runs in as many environments as possible. If it needs a service, it should use whatever is available and degrade gracefully if nothing is there.

  • Responsive user interface: The app adapts to various input methods (touch, speech, etc.) and output methods (different screen sizes, vibration, audio, braille displays, etc.).

  • Connectivity-independence: The app works well offline and with intermittent or low-bandwith connectivity.

  • App-like UI: The app adopts UI elements of native platforms, including a fast-loading user interface (which can be achieved by caching important assets via service workers).

  • Continuous updates (“freshness”): The service worker API defines a process for automatically updating apps to new versions.

  • Secure communication: The app is served and communicates via HTTPS, to prevent snooping and attacks.

  • App discovery: Meta-data such as W3C web app manfests enables search engines to find web apps.

  • Push interaction (“re-engagement”): Features such as push notifications actively keep users up-to-date.

  • Natively installable: On some platforms, you can install a web app so that it feels like a native app (icon on home screen, separate entry in app switcher, browser chrome optional). All without going through a native app store.

  • Linkability: Easily share apps via URLs and run them without installation.

I’m mentioning progressive web apps here, because I like all of the aforementioned techniques and technologies. But I’m not sure how much “progressive web apps” are different from simply “modern web apps”. One idea I oppose is giving web apps install banners (their killer feature is, after all, that they don’t need those).

Further reading:

Visual Studio Code  

Visual Studio Code is a JavaScript code editor for whom the goal is to exist in the space between full IDEs and text editors. And, in my opinion, it succeeds nicely. A plus is that it’s written in JavaScript and based on Electron. In 2015, VSC became open source and gained extensions (an API for extending it via plugins).

Rollup  

Rollup is a module bundler: it converts multiple ES6 modules into a single bundle, a module in either one of serveral formats (ES6, CommonJS, …). Rollup brings two innovations to the world of JavaScript modules:

  • The bundle it outputs only includes those exports that are actually used, via a technique called “tree-shaking”. Three-shaking crucially depends on the static structure of ES6 modules. “Static structure” means that they are analyzable at compile time, without executing any of their code. Having this kind of dead code elimination is great, because we are now free to make modules as big or as tiny as makes sense, without having to worry about the sizes of bundles.

  • It demonstrates that ES6 modules are a viable bundle format for ES6 modules (obviating the need for any kind of custom loading).

Further reading:

Web Assembly  

Web Assembly is a binary format for a static formal language (derived from asm.js) that can be fed into JavaScript engines (that support it) to create fast executables. The formal language is higher-level than bytecode and therefore easier to evolve. The output lives inside the universe of JavaScript and therefore integrates well with it. Given how fast asm.js is, C++ compiled to Web Assembly will run roughly 70% as fast as when you compile it to native code.

Web Assembly will probably eventually get support for JavaScript OOP. At that point, it will truly be a universal virtual machine for the web.

Further reading: