Wheelroom
Modelberry is the successor of Wheelroom. The original Wheelroom repository is still online as is an archived copy.
Evolving models
Wheelroom was founded in 2018 with the idea that content models evolve as a code base evolves and that models should be kept in the same repository as the code base.
React UI library
Early 2020 a React UI library was developed around the Wheelroom command line utility. The Wheelroom boilerplate based on GatsbyJs combined content from Contentful with the React UI library into a marketing website on Netlify in a matter of minutes.
Success
Setting up a new site in a matter of minutes together with easy customization and universal UI library made a marketing site based on Wheelroom an easy sell.
Where the Wheelroom command line utility was solid, the UI library had a number of drawbacks.
UI library drawbacks
The UI library was build around a React clone of styled system. This design system served well for a while but eventually evolved into the Any Element.
The biggest problem with the way styled system was used were the style trees. A style tree was a Wheelroom concept which allowed styling a tree of components.
First of all it was hard to maintain the tree typings. Extending them with new functionality was too complicated. The second problem was that the trees were not as intuitive as they could be. Over time it became hard to remember which style was defined where.
New UI library
In 2021 a new UI library was developed with the lessons learned. This library uses clear React component names and a Typescript component interface that prevents breaking changes. The library was separated from the command line utility.
- Jacco Meijer
- |
- Jan 17, 2022
Naming React components
What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.
- Jacco Meijer
- |
- Jan 18, 2022
Typescript interface for React UI components
How to define an interface for React UI components that prevents breaking changes.
Command line utility
The Wheelroom command line utility uses a javascript object for defining the content models. The content models could be pushed to Contentful and were used to generate typescript definitions and graphql queries.
This worked well (as it still does), but there was a better way.
Modelberry factory
Instead of generating typescript from a javascript object that defined the content models, typescript now is at the core.
A new command line utility was born and was named 'Modelberry factory'.
Content models are defined in typescript. TSDoc annotations are used to add additional details to the models. This way models can be pushed to Contentful. The other way around appeared easy as well. Pushing and pulling content was an obvious next step.
