Frequently Asked Questions
Answers to common questions about Domma.
Getting started
Domma (Dynamic Object Manipulation & Modeling API) is a lightweight, zero-dependency JavaScript framework. It combines jQuery-style DOM manipulation, Lodash-style utilities, Moment-style dates, reactive models and a full set of UI components in one bundle - about 175 KB gzipped.
Include the script tag in your page:
<script src="domma.min.js"></script>
That's it - no build step is needed. It is also on npm (npm install domma-js), and npx domma-js init scaffolds a
new project. See the QuickStart.
No. Domma is self-contained with no external dependencies. Everything you need is in a single file.
Features and compatibility
Yes. Domma's JavaScript works independently of its CSS. Switch Domma's theming off entirely with
$.setup({ noStyles: true }) and use Bootstrap, Tailwind or your own styles.
Domma uses the same $() syntax as jQuery, so if you know jQuery you'll feel at home. It is not a drop-in replacement,
though - it's a separate library with its own implementation.
All modern browsers, including Chrome, Firefox, Safari and Edge. It uses standard ES2015+ features and the Fetch API.
Yes. Domma ships as both UMD and ESM bundles, so you can import just what you need:
import { Domma, utils, dates } from './domma.esm.js';
Usage and good practice
Domma provides short aliases for the things you reach for most:
$- DOM manipulation (like jQuery)_- utility functions (like Lodash)D()- dates (like Moment.js)M- reactive modelsS- storageH- HTTPE- UI elements
The full list is in the reference.
Domma uses a jQuery-style event system:
$('.button').on('click', (e) => {
console.log('Clicked!');
});
// Event delegation
$('.container').on('click', '.item', (e) => {
console.log('Item clicked');
});
Domma's models are reactive data objects with validation and DOM binding:
const user = M.create({
name: { type: M.types.string, required: true },
age: { type: M.types.number }
});
M.bind(user, 'name', '#name-input', { twoWay: true });
user.onChange('name', (val) => console.log(val));
For markup that already exists, M.applyBindings() wires data-bind-*, data-model and data-on-* attributes
straight to your data. See Models.
Support
The Showcase has a live example of every feature with its code, and the QuickStart walks you through your first project.
Open an issue on GitHub with as much detail as you can: browser version, a code sample, and what you expected against what happened.