Fozzie is Just Eat's UI Component Framework, built to help modularise and share the UI code we write across all of our teams at Just Eat.
Fozzie encompasses a number of modules developed by our UI team, which can be split roughly into four categories:
Fozzie was created to facilitate developers at Just Eat to build and share a common set of UI components across all of our projects.
Previously, there was a lot of wasted development effort going on across the company. For instance, the Just Eat main site header could be found duplicated by a number of different projects. This work to create these components had been done multiple times by different developers working independently. This meant that when a design update or performance improvement was made to one of these separate components, there was no way to roll this out across all of our sites without copying and pasting the new code.
Fozzie components fix this issue by providing shared SCSS and JS that can be consumed by any project. Components are versioned and released using NPM, meaning that projects consuming the components can upgrade at their own pace in line with their own release schedule.
Fozzie itself has been created to be fairly technology agnostic. At its core, it's simply a UI framework built on Sass and Vanilla JS.
Therefore teams at Just Eat are using Fozzie on projects built in React, Vue.js and Vanilla JS, using WebPack and Gulp as their task runner. Fozzie components can be used on any stack using Sass and Vanilla JS (including CMS platforms such as WordPress).
As a first iteration to provide HTML sharing, we have been using Handlebars for defining markup. We are currently looking at moving away from this, investigating how we can move our components over to using a framework such as Vue.js or React.
To see the current list of public Fozzie modules, take a look on our public Github account.
To find out more information on how to import Fozzie's SCSS, check out the 'Fozzie & Sass' section of the documentation.