--- title: Modlet Workflows description: Learn how to organize your app's files into image: https://www.bitovi.com/hubfs/workflow.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com May 5, 2015 # Modlet Workflows Learn how to organize your app's files into "modlets". A modlet is a folder that contains a module, its tests, documentation, demo page and other resources. ![Justin Meyer](https://www.bitovi.com/hubfs/justin.jpeg) Justin Meyer Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) One of Bitovi's earliest, and most important, development strategies was the introduction of the "modlet" workflow. It's a very simple concept - every module should be developed as its own application. In practice, this means that instead of a folder structure where files are grouped by type like: ``` project/ js/ moduleA.js moduleB.js templates/ moduleA.handlebars moduleB.handlebars css/ moduleA.css moduleB.less test/ moduleA_test.js moduleB_test.js docs/ moduleA.markdown moduleB.markdown ``` Bitovi groups files by the module they belong to: ``` project/ moduleA/ moduleA.js moduleA.handlebars moduleA.css moduleA_test.js moduleA.markdown moduleA.html test.html moduleB/ moduleB.js moduleB.handlebars moduleB.css moduleB_test.js moduleB.markdown moduleB.html test.html ``` Each module has a folder with all of its supporting files, tests, and documentation. Additionally, we add: - A demo page (`moduleA.html`) that shows off the modules functionality if the module has a visual representation. - A test page (`test.html`) that runs just the module's tests. ## Benefits In my experience, this workflow / folder structure provides the following benefits: 1. It enforces good API design and separation of concerns. By writing a demo page, you might discover that it's difficult to setup your module without a lot of bootstrapping. This might be an indication that something is wrong. 2. Developers are more likely to update tests and documentation if they are sitting right next to the module they are editing. The test is not hidden away in some `tests` folder that is more easily ignored. 3. It is easy to identify missing tests or documentation. If the test or documentation file is missing altogether, it's very easy to identify when they are in the same folder. 4. You can develop the application without having to load the entire application and all of its tests on every change. ## An Old Example An old, but great example of the modlet workflow is the [Srchr app](https://github.com/bitovi/srchr). For example, the [ui/tabs folder](https://github.com/bitovi/srchr/tree/master/ui/tabs) had a [test](http://bitovi.github.io/srchr/ui/tabs/test.html) and [demo](http://bitovi.github.io/srchr/ui/tabs/tabs.html) page. We're in the process of updating the Srchr app with the latest CanJS, StealJS, DocumentJS and creating another demo application that highlights the modlet technique. [![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development) Previous Post ![stealbkg.png](https://www.bitovi.com/hs-fs/hubfs/stealbkg.png?height=117&name=stealbkg.png) [ Hot module replacement comes to StealJS ](https://www.bitovi.com/blog/hot-module-replacement-comes-to-stealjs)   Next Post ![background-code-screen.jpg](https://www.bitovi.com/hs-fs/hubfs/background-code-screen.jpg?height=117&name=background-code-screen.jpg) [ Getting Started with Cordova in 15 Minutes or Less ](https://www.bitovi.com/blog/getting-started-with-cordova-in-15-minutes-or-less) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/blog/modlet-workflows", "description": "Learn how to organize your app's files into "modlets". A modlet is a folder that contains a module, its tests, documentation, demo page and other resources." }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ``` ```json { "@context": "http://schema.org", "@type": "BlogPosting", "headline": "Modlet Workflows", "image": { "@type": "ImageObject", "url": "https://www.bitovi.com/hubfs/workflow.jpg" }, "datePublished": "2015-05-05 18:25:55", "dateModified": "November 29, 2018, 6:55:13 PM", "author": { "@type": "Person", "name": "Justin Meyer" }, "publisher": { "@type": "Organization", "name": "Bitovi", "logo": { "@type": "ImageObject", "url": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" } }, "description": "Learn how to organize your app's files into "modlets". A modlet is a folder that contains a module, its tests, documentation, demo page and other resources." } ```