7,476 reads

Building cross-platform user interfaces in 2017

by John SlegersApril 20th, 2017

Too Long; Didn't Read

About a decade ago or so, it was fashionable to model a GUI in a cross-platform flavor of XML (like XUL) and then have a platform-specific rendering engine process that XML-file to display a layout. It is no longer fashionable to do this, however. Today, in 2017, the trend is to build your apps on platforms that allow you to write everything in HTML, CSS and/or JavaScript, no matter what environment your code is supposed to run in.

Companies Mentioned

featured image - Building cross-platform user interfaces in 2017

The “first generation” of this type of tools produced what are basically “hybrid” applications, where web applications run on top of browser-like & platform-specific WebViews. This technique is rather inefficient, however. Your apps don’t feel very “native”, are rather bloated and they tend to be rather lacking in performance. However, it’s relatively easy to have a consistent look-and-feel in different environments. Phonegap / Cordova is the most popular platform for mobile environments and NW.js for desktop environments.

The “second generation” is different : they compile everything to fully “native”, platform-specific binaries. Instead of relying on WebViews, “native” widgets are used when possible. This gives your app a more “native” look-and-feel, typically has less bloat and is much better for performance. However, you’ll have more differences between the different platforms. Examples are NativeScript, React Native & Tabris.js (all for mobile environments).

Unfortunately, there are no “second generation” tools for desktop just yet. So, right now, if you want to build a cross-platform desktop app, you’re stuck with “first generation” tools. NW.js has a longer track record than Electron and has support for various features not present in Electron, but it also comes with its drawbacks. AppJS is still older, but it’s not as mature — and not nearly as popular — as the other two.

Anyway, their reliance on WebViews means that your application will feel more like a web app than a desktop app. And bloat and performance drawbacks are inevitable with this kind of solution. This means you’ll never get the same performance as code you write directly in Java or C++ nor the same performance you’d get in “second generation” platforms, and it will never feel equally “native”. However, it can still be the best solution eg. when a consistent look-and-feel across different platforms is more important or when you have a background as a web developer.

If performance, lack of bloat and your application getting that “native” feel are important criteria, you might want to wait a little longer until the first “second generation” platforms appear for desktop. It’s really but a matter of time before platforms for desktop apps follow the same evolutionary path as platforms for mobile apps, although it might actually come in the form of “desktop extensions” to existing mobile platforms.

The way it’s currently looking, it looks like you’ll soon be able to write “native” apps for desktop & mobile alike with the exact same codebase. With React Native already having plugins that add support for Windows 10 and support for MacOS, I would personally go with React Native and give their dev team some time until they support all desktop environments I need to support and those extensions for desktop are mature enough for production environments.

If you can’t wait that long, you don’t want to bet on what’s to come in the future or if these criteria aren’t that important for whatever application you want to build today, you might want to try some of the “first generation” platforms currently available and see which is most suitable for you. Just be aware of the drawbacks!

As always, choose wisely…