About
JIVE is a bundle of 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 for markup, juce::var/juce::DynamicObject 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 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 and 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 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🎨 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 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:
CPMAddPackage("gh:ImJimmi/JIVE@main")If not using CPM, you should add JIVE as a submodule to your git repository:
git submodule add git@github.com:ImJimmi/JIVE.gitOr simply clone JIVE to use across multiple projects:
git clone git@github.com:ImJimmi/JIVE.gitCMake
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 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 before submitting a PR. Be sure to check the Issues Tab to avoid duplicates and to contribute to any ongoing conversation.