1. Violating the in / local Parameter Naming Convention
All functions must accept a single destructured object with in-prefixed keys, immediately assigned to local-prefixed variables.
DON'T: Positional or Raw Args
// BAD: Positional arguments make calls fragile
export function filterProducts(records, key, val) {
return records.filter(item => item[key] === val);
}
// BAD: Ambiguous call site
filterProducts(products, "category", "Electronics");DO: in / local Object Mapping
// GOOD: Single object with in-prefixed properties
export function filterProducts({ inRecords = [], inKey = "", inVal = "" } = {}) {
const localRecords = inRecords;
const localKey = inKey;
const localVal = inVal;
return localRecords.filter(item => item[localKey] === localVal);
}
// GOOD: Self-documenting call site
filterProducts({ inRecords: products, inKey: "cat", inVal: "Elec" });2. Full DOM Re-renders on Small Data Changes
Do not destroy and rebuild the whole table when records are added or filtered. Use surgical repainting.
DON'T: Wipe Container
// BAD: Destroys header, resets column widths & scroll
container.innerHTML = "";
table = new Table({ inData: newRecords, ... });
table.render();DO: Surgical Repainting
// GOOD: Re-renders only <tbody> & aggregates in <tfoot>
table.store.stateData = newRecords;
repaintBody({ inTableInstance: table });
repaintFoot({ inTableInstance: table });3. Bypassing json-to-dom with Manual DOM Manipulation
Never bypass the JSON specification world to mutate rows or cells directly using raw DOM APIs.
DON'T: querySelector + innerHTML
// BAD: Desynchronizes state from DOM
const row = document.querySelector("#row-4");
row.innerHTML = "<td>Updated Text</td>";DO: Update Store & Repaint
// GOOD: Update the Store record, then trigger repaint
table.store.updateRow({ inId: 4, inChanges: { text: "Updated Text" } });
repaintBody({ inTableInstance: table });