the-cc-dev/revery

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!

Revery

Build native, high-performance, cross-platform desktop apps with reason!

Building & Installing

Install esy

esy is like npm for native code. If you don't have it already, install it by running:

npm install -g esy

Building

• esy install
• esy build

For macOS users

If your build takes too much time then you can pre-install some libraries:

• brew install cmake
• brew install libpng ragel

For Linux users

Install the following packages with your package manager of choice:

• cmake
• ragel

Running

After building, you can run the 'Hello World' example via:

• esy x Hello

Check out our examples for more to try!

Tests

Tests can be run with:

• esy b dune runtest

Motivation

Today, Electron is one of the most popular tools for building desktop apps - using an HTML, JS, CSS stack. However, it has a heavy footprint in terms of both RAM and CPU - essentially packing an entire browser into the app. Even with that tradeoff, it has a lot of great aspects - it's the quickest way to build a cross-platform app & it provides a great development experience - as can be testified by its usage in popular apps like VSCode, Discord, and Slack.

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 built with reasonml, which is a javascript-like syntax on top of OCaml This means that the language is accessible to JS developers.

Your apps are compiled to native code with the Reason / OCaml toolchain - with instant startup and performance comparable to native C code. Revery also features GPU-accelerated rendering. The compiler itself is fast, too!

Revery is an experiment - can we provide a great developer experience and help teams be productive, without making sacrifices on performance?

Design Decisions

• Consistent cross-platform behavior

A major value prop of Electron is that you can build for all platforms at once. You have great confidence as a developer that your app will look and work the same across different platforms. Revery is the same - aside from platform-specific behavior, if your app looks or behaves differently on another platform, that's a bug! As a consequence, Revery is like flutter in that it does not use native widgets. This means more work for us, but also that we have more predictable functionality cross-platform!

NOTE: If you're looking for something that does leverage native widgets, check out briskml. Another alternative is the cuite OCaml binding for Qt.

• High performance

Performance should be at the forefront, and not a compromise - we need to develop and build benchmarks that help ensure top-notch performance and start-up time.

• Type-safe, functional code

We might have some dirty mutable objects for performance - but our high-level API should be purely functional. You should be able to follow the React model of modelling your UI as a pure function of application state -> UI.

Quickstart

Check out revery-quick-start to get up and running with your own Revery app!

API Example

Here's a super simple Revery app, demonstrating the basic API surface:

open Revery;
open Revery.Core;
open Revery.UI;

/* The 'main' function for our app */
let init = app => {

  /* Create a window! */
  let win = App.createWindow(app, "test");

  /* Set up some styles */
  let textHeaderStyle = Style.make(~backgroundColor=Colors.black, ~color=Colors.white, ~fontFamily="Roboto-Regular.ttf", ~fontSize=24, ());

  /* Set up render function */
  let render = () => {
      <view style=(Style.make(~position=LayoutTypes.Absolute, ~bottom=10, ~top=10, ~left=10, ~right=10, ~backgroundColor=Colors.blue, ()))>
          <view style=(Style.make(~position=LayoutTypes.Absolute, ~bottom=0, ~width=10, ~height=10, ~backgroundColor=Colors.red, ())) />
          <image src="logo.png" style=(Style.make(~width=128, ~height=64, ())) />
          <text style=(textHeaderStyle)>"Hello World!"</text>
          <view style=(Style.make(~width=25, ~height=25, ~backgroundColor=Colors.green, ())) />
      </view>
   };

  /* Start the UI */
  UI.start(win, render);
};

/* Let's get this party started! */
App.start(init);

Custom Components

TODO

Roadmap

It's early days for revery and we still have a lot of work ahead!

Some tentative work we need to do, in no particular order:

• UI Infrastructure
  • Styles
  • State management / Redux-like layer
  • Focus Management
  • Input handling
  • Animations
  • Gestures
  • Transforms
  • Compositing / Container
  • zIndex / layers
• UI Components
  • View
  • Image
  • Text
  • Input
  • Button
  • Slider
  • Checkbox
  • ScrollView
• Platform support
  • Windows
  • OSX
  • Linux
  • Web (JS + Wasm)
• Mobile support
  • Compilation to iOS
  • Compilation to Android
• Developer Experience
  • Hot reloading
  • 'Time travel' debugging across states
  • Integrated debugger
  • Integrated performance profiler
• Audio Support
  • Wav file playback
  • MP3 file playback
• Example apps
  • Quickstart / Hello World
  • Calculator
  • Todo List

License

Revery is provided under the MIT License.

Contributing

We'd love your help, and welcome PRs and contributions. Join us on Discord!

Some ideas for getting started:

• Help us build example apps,
• Help us implement missing features,
• Help us log bugs and open issues.

Special Thanks

revery would not be possible without a bunch of cool tech:

• ocaml made these tools possible - thanks Inria & OCaml Labs!
• reasonml made revery possible - thanks @jordwalke!
• flex by @jordwalke
• reason-reactify
  • Didact's DUI React tutorial
  • ReactMini
• reason-glfw
  • GLFW -
  • stb-image
• reason-fontkit
  • freetype2
  • harfbuzz
• reason-gl-matrix
  • gl-matrix
  • glm

revery was inspired by some awesome projects:

• react-native
• briskml
• elm
• cuite
• wall