Modlets and what are they?
Well, you can think of modlets as modules, it’s simply an organized way to structure your files. Each folder is a modlet and will contain all the parts involved with using and testing that component. The default structure for a modlet is to contain:
- Demo page
- Component documentation
This is a bit different to how
Vue projects tend to be structured, where components are either grouped by type within the
components folder or all just placed at the root of the
Having a demo page and being able to develop a component in isolation has been extremely helpful when working on large projects with lots of components. The demo page allows you to mock any props for the component so you can pass data into the component as it would be when used in the app.
You are able to interact with and use the component to ensure everything is working as you expect it to. Running the demo page is as simple as starting a
http-server and loading the components
The DoneJS cli allows you to scaffold an app quickly and can be used to create the component in the modlet pattern.
I have put together a very basic
CanJS app which you can see here:
Thanks for reading