Building cross-platform user interfaces in 2017

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. 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 . 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. is the most popular platform for mobile environments and for desktop environments. WebViews Phonegap / Cordova NW.js 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 , & (all for mobile environments). NativeScript React Native Tabris.js 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 . AppJS is still older, but it’s not as mature — and not nearly as popular — as the other two. it also comes with its drawbacks Anyway, their reliance on WebViews means that your application will feel more like a web app than a desktop app. And . 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. bloat and performance drawbacks are inevitable with this kind of solution 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 and , 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. support for Windows 10 support for MacOS 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… Popular platforms (iOS & Android) First generation platforms for mobile environments (built on top of Cordova) Meteor (built on top of Cordova) Ionic (iOS & Android) Second generation platforms for mobile environments ( eco-system). NativeScript AngularJS ( eco-system) React Native React Tabris.js (Windows, Linux or MacOS) Platforms for desktop environments Electron NW.js AppJS Platforms for smart home and IoT devices iViewer Iridium mobile