Revery - Cross-Platform Desktop Apps With Reason

K - Jan 13 '19 - - Dev Community

Cover image by Frank Brown, on Flickr

Currently, I'm researching my next project, a book about creating software MVPs and one big need that pops up rather often is the ability to build cross-platform applications with one code-base.

While I think that React-Native is the way to go, it's always a good idea to look at what other solutions are out there. Flutter, for example, got much hype lately — a framework to build cross-platform apps with the Dart programming language.

Today I want to look at another promising approach: Revery

What

"Revery is kind of like super-fast, native Electron - with a bundled React, Redux, and a fast build system - all ready to go!"

Revery is a (currently experimental) cross-platform desktop app framework build with the Reason programming language.

Reason is a new OCaml syntax that aims to be more accessible for JavaScript developers; it also features a JSX like syntax. While it's mainly used to compile to JavaScript, via a tool called BuckleScript, it can compile to native binaries too.

Reason offers a sound type system with non-nullable types and pattern-matching, which should address the most notorious bugs of JavaScript code-bases.

Revery doesn't render native widgets, but its own widgets with the help of GPU accelerated rendering.

Why

While Electron is undoubtedly the fastest way to build desktop apps at the moment, it comes at the cost of its size and with a few performance issues. Electron ships with a whole browser to allow developers to leverage the web-ecosystem.

Frameworks like React-Native have the approach of using native widgets, which leads to better performance and smaller applications, which is a massive win on mobile devices, but it also leads to inconsistencies, because iOS and Android don't offer 100% overlap in native widgets or even their behavior.

So why not Flutter?

I think the main reason is that Flutter currently focuses on mobile development.

Revery has mobile platforms as targets on its roadmap, but it focuses on the desktop first.

How

Let's see how we get the example project of Revery up and running.

First, we need to install esy which a package manager for native development with Reason. It's installed via npm.

$ npm install -g esy

Next, we need to clone the example project with git from Github and open the project.

$ git clone git@github.com:revery-ui/revery-quick-start.git
$ cd revery-quick-start

Now we need to install the dependencies and compile everything with esy.

$ esy install
$ esy build

The first build will take some time, but after that, we can run the compiled binary directly.

$ _build/install/default/bin/App

Which opens the app and shows a window with text and button.

screenshot

In App.re we find the source and can change it as we wish.

Conclusion

I think Revery is a nice addition to the cross-platform framework landscape and Reason/OCaml is certainly an interesting language, with many nice features that address problems I know from my day-to-day JavaScript work.

The fact that Revery borrows concepts from React makes it especially interesting for me.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .