GitHub - revery-ui/revery: Native, high-performance, cross-platform desktop apps...
source link: https://github.com/revery-ui/revery
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.
README.md
Revery
Build native, high-performance, cross-platform desktop apps with reason!
?NOTE: Revery is a work-in-progress and in active development! ?
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 (eithercmd.exe
orPowershell
).
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
- 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
- briskml
- brisk-reconciler - the "native React" implementation.
- reason-glfw
- reason-fontkit
- reason-gl-matrix
revery
was inspired by some awesome projects:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK