> but then product introduces a business rule where some fields need to be hidden when another option is selected somewhere
function initWidget(root){
// Or a bunch of calls to document.createElement, whatever you want.
const inp = root.querySelector('.input');
const check = root.querySelector('.check');
function update(){
inp.style.display = check.checked ? 'none' : 'block';
}
check.onchange = update;
}
> O, but not when this checked, etc.
function initWidget(root){
// Or a bunch of calls to document.createElement, whatever you want.
const inp = root.querySelector('.input');
const check = root.querySelector('.check');
const check2 = root.querySelector('.check2');
function update(){
inp.style.display = check.checked && !check2.checked ? 'none' : 'block';
}
check.onchange = update;
check2.onchange = update;
}
Compare to React:
function Widget(){
const [check1, setCheck1] = useState(false);
const [check2, setCheck2] = useState(false);
return <>
<input type="checkbox"
checked={check1} onChange={e => setCheck1(e.target.checked)}/>
<input type="checkbox"
checked={check2} onChange={e => setCheck2(e.target.checked)}/>
{check1 && !check2 && <input type="text" />}
</>;
}
Compare to Svelte:
<script>
let check1 = $state(false);
let check2 = $state(false);
</script>
<input type="checkbox" bind:checked={check1}>
<input type="checkbox" bind:checked={check2}>
{#if check1 && !check2}
<input type="text">
{/if}
IME almost none of the complexity in any of the web applications I've worked with has been mitigated by the front-end framework in use. You still need to write the code to do the thing, whatever that thing is. You might as well write it in the framework that gives you the smallest bundle size and the best possible backwards compatibility, and that's vanilla JS + the standard web APIs.