ImJimmi / JIVE

The ultimate JUCE extension for building GUIs

• About
  • 🧑‍💻 Improved Developer Experience
  • 👷 Improved Architecture
• Approach
  • 🧩 Layouts
  • 🎨 Style Sheets
• Integration
  • CMake
  • Projucer
• Getting Started
• Contributing

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.

<Window width="640" height="400" align-items="centre">
    <Component id="header" align-items="centre">
        <Text id="title">Welcome to JIVE!</Text>
        <Text id="subtitle">The ultimate JUCE extension for building GUIs.</Text>
    </Component>

    <Component id="nav" display="grid" template-columns="1fr 1fr 1fr" template-rows="1fr">
        <Button>
            <Text>Home</Text>
        </Button>

        <Button>
            <Text>About</Text>
        </Button>

        <Button>
            <Text>Contact</Text>
        </Button>
    </Component>
</Window>

🎨 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.

{
    "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 [e-mail]:ImJimmi/JIVE.git

Or simply clone JIVE to use across multiple projects:

git clone [e-mail]:ImJimmi/JIVE.git

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 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.