Matt Chaffe

CanJS modlet pattern


I have recently started working at Bitovi which created and continually develop CanJS which is a modern Javascript framework. I have previously been using Vue for projects, so in my efforts in learning a new framework, I am making articles to aid in my learning and sharing what I learn.

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:

  • ViewModel
  • Template
  • Tests
  • Styles
  • 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 components folder.

Demo page

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

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:


CanJS 5.0

Thanks for reading!

Published 17 October 2018

Dad, Husband, Software Developer