Girders Elements is an architectural framework that assists building data-driven apps with React or React Native. It is extremely well-suited for creating highly dynamic UIs, that are driven from back-end systems (like Content Management Systems).
It uses redux for managing the state of the application. All great tools around the redux eco-system can be leveraged, because
girders-elements is built on top of it.
Immutable data structures are used for redux's single store and also when using
girders-elements core features.
npm install --save girders-elements
yarn add girders-elements
;// equivalent with;;// what's insideelementsuielementsreadelementsupdateelementsboot// uiuiregisteruiforElementuiforElements// updateupdateregister// readreadregister// bootbootengine
The idea behind the Girders Elements framework is to have elements that can be driven by the back-end. An element is represented in JSON format
"kind": "teaser" "default""imageUrl": """title": "Sherlock Holmes"
The element is identified by its kind. We can register the UI of the element for a certain kind, which then makes this element available for representing in the app.
The UI of an element can be any React component that takes two props:
elementis an immutable.js structure representing the data model (sub-tree) of the specific element in the application state
dispatchis the standard redux dispatcher for dispatching actions
We register the UI for an element by using:
Rendering an element is done via the ui.forElement or ui.forElements methods. Lets say that the model that drives your UI is in the store represented like the example above. In case we do:
Then this will return us the registered component with kind
We can also do the following:
Notice that the element kind is more specific,
['teaser', 'default', 'red']. If we haven't registered such an element, its still not a problem, because canonical resolution is done. There is already a element registered for
['teaser', 'default'], and this element will be rendered. In case we implement a new element, with the more specific kind
['teaser', 'default', 'red'], and register it, then, of course that element will be returned. This canonical resolution is very useful, in case you introduce new features, but don't want to break clients that are still using older version of registered elements.
Any element can render a sub-element like so:
A list of children can be rendered using:
An action is just a string identifying what needs to be performed on the state. When one triggers an action, one can also supply additional parameters (payload) to the action that will be provided later on to the update.
The dispatch prop is used to dispatch an action. Actions can be
Global actions are identified by starting dot in the action type (for now, might change in near future)
Updates are registered in a similar way ui is registered, by using the element kind.
Here is an example:
In this example, for the
article element we register two updates:
TOGGLE_BOOKMARKis dispatch only from the
articleelement, we change the
.LOADis dispatch from the
articleelement or any of its children