Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ImJimmi/JIVE
The ultimate JUCE extension for building GUIs
https://github.com/ImJimmi/JIVE
cmake cpp17 declarative-ui gui juce no-dependencies reactive tdd ui
Last synced: about 1 month ago
JSON representation
The ultimate JUCE extension for building GUIs
- Host: GitHub
- URL: https://github.com/ImJimmi/JIVE
- Owner: ImJimmi
- License: mit
- Created: 2021-10-22T22:51:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T21:28:54.000Z (3 months ago)
- Last Synced: 2024-04-05T21:33:17.532Z (3 months ago)
- Topics: cmake, cpp17, declarative-ui, gui, juce, no-dependencies, reactive, tdd, ui
- Language: C++
- Homepage:
- Size: 2.57 MB
- Stars: 97
- Watchers: 2
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
Lists
- awesome-juce - JIVE
README
- [About](#about)
- [🧑💻 Improved Developer Experience](#-improved-developer-experience)
- [👷 Improved Architecture](#-improved-architecture)
- [Approach](#approach)
- [🧩 Layouts](#-layouts)
- [🎨 Style Sheets](#-style-sheets)
- [Integration](#integration)
- [CMake](#cmake)
- [Projucer](#projucer)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
## About
JIVE is a bundle of [JUCE](https://github.com/juce-framework/JUCE) modules centered around the desire to have a more modern approach to UI development.
This approach is inspired by web front-ends where we write declarative markup (HTML) to define what components we have, style those components using style sheets (CSS), and then dynamically update those components at runtime using imperitive code (JavaScript). With JIVE however, all three of these layers are done using tools already available in JUCE - [`juce::ValueTree`](https://docs.juce.com/master/classValueTree.html) for markup, [`juce::var`](https://docs.juce.com/master/classvar.html)/[`juce::DynamicObject`](https://docs.juce.com/master/classDynamicObject.html) for style sheets, and regular old C++ for dynamically updating.
### 🧑💻 Improved Developer Experience
- Write less UI code than in a typical JUCE project.
- Write _better_ UI code that's more declarative and uses common terminology with other UI frameworks.
- Build ideas faster, with much shorter iterations between one design to another.
- No additional dependencies - built purely from the tools provided by JUCE.
- Less boilerplate and therefore less time wasted (and maybe even fewer bugs) when developing UI features.
- Easier onboarding for any team members unfamiliar with the querks and complexities of developing GUIs in JUCE.
### 👷 Improved Architecture
- Encourages the separation of the UI from the business logic that controls it.
- Encapsulates the JUCE backend enabling applications to interact with the UI through common data structures like value-trees and JSON documents.
- Specifically built to fit the [Model-view-presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) pattern - although flexible enough to suit any architecture.
- Inspired by front-end web libraries to more easily build design systems and share components.
## Approach
There are two main constituents to JIVE - [`jive_layouts`](jive_layouts/) and [`jive_style_sheets`](jive_style_sheets/). When used together, these modules completely overhaul the experience of building GUIs in JUCE by removing the boilerplate involved in writing [`Component`](https://docs.juce.com/master/classComponent.html) classes.
### 🧩 Layouts
`jive_layouts` addresses the hierarchy and layout of GUIs by allowing developers to describe their UI using value-trees.
Unlike in a typical JUCE application where most of your UI code is spent describing _how_ components are shown on the screen, JIVE's approach is inspired by HTML where we simply describe _what_ is on the screen.
Example
Example XML file that could be parsed to a `juce::ValueTree`
_Note that `juce::ValueTree` doesn't support inline text elements so these will need to be converted to `text` properties before parsing to a `juce::ValueTree`._
```xml
Welcome to JIVE!
The ultimate JUCE extension for building GUIs.
Home
About
Contact
```
### 🎨 Style Sheets
`jive_style_sheets` addresses the styling of GUIs by allowing developers to apply common style properties using JSON documents.
Inspired by CSS, JIVE's style sheets allow common styling properties like background colours, text colours, and font size to be set on any UI element, removing the need to use [`juce::Graphics`](https://docs.juce.com/master/classGraphics.html) for the majority of components.
Example
Example JSON document that could be parsed to a `jive::Object` and set as the top-level window's `style` property.
```json
{
"background": "#202020",
"foreground": "#EEEEEE",
"font-family": "Helvetica",
"#title": {
"font-size": "45",
"font-style": "bold",
},
"#subtitle": {
"font-size": "25",
"font-style": "italic",
},
"Button": {
"background": "#303030",
"border": "#FF3077",
},
}
```
## Integration
The simplest way to intergrate JIVE with your JUCE project is with [CPM](https://github.com/cpm-cmake/CPM.cmake):
```cmake
CPMAddPackage("gh:ImJimmi/JIVE@main")
```
If not using CPM, you should add JIVE as a submodule to your git repository:
```bash
git submodule add [email protected]:ImJimmi/JIVE.git
```
Or simply clone JIVE to use across multiple projects:
```bash
git clone [email protected]:ImJimmi/JIVE.git
```
### CMake
```cmake
add_subdirectory(path/to/JUCE)
# Recommended
CPMAddPackage("gh:ImJimmi/JIVE@main")
# If not using CPM
add_subdirectory(path/to/JIVE)
target_link_libraries(my_juce_project
PRIVATE
jive::jive_layouts
jive::jive_style_sheets
)
# Recommended if using both jive_layouts and jive_style_sheets
target_compile_definitions(my_juce_project
PRIVATE
JIVE_GUI_ITEMS_HAVE_STYLE_SHEETS=1
)
```
### Projucer
Add modules to the project by clicking the "+" icon in the "Modules" panel and choosing "Add a module from a specified folder...".
## Getting Started
See [Getting Started](./docs/Getting%20Started.md) for a detailed guide on getting started with JIVE once you have it integrated in your project.
## Contributing
All contributions are welcome!
Please see the [Contribution Guidelines](./CONTRIBUTING.md) before submitting a PR. Be sure to check the [Issues Tab](https://github.com/ImJimmi/JIVE/issues) to avoid duplicates and to contribute to any ongoing conversation.