36

Revery – Native, high-performance, cross-platform desktop apps

 5 years ago
source link: https://www.tuicool.com/articles/hit/uUfqMrv
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Revery

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

:construction: NOTE: Revery is a work-in-progress and in active development! :construction:

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

For Ubuntu you may need these additional packages 

libpng-dev
libbz2-dev
m4

For Windows native

No additional dependencies needed.

NOTE: esy requires building from an Administrator prompt (either cmd.exe or Powershell ).

For Windows Subsystem for Linux ( WSL )

  • sudo apt install libpng-dev libbz2-dev m4 xorg-dev libglu1-mesa-dev

NOTE:Hardware acceleration is not enabled by default in WSL (instead, WSL will fall-back to a software renderer). This is problematic for performance - for that reason, we recommend building and running Revery natively on Windows instead of with WSL. For more info see: ( https://github.com/Microsoft/WSL/issues/637 and a potential workaround )

Running

After building, you can run the example app by running:

  • esy x Examples

Check out our examples to see how they work!

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:

/**
 * 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

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:

Special Thanks

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

revery was inspired by some awesome projects:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK