4 ms·
I'll also add that I was skeptical at first as well. It was only after playing with the actual code for a while that I started to understand, and have actually
by rictic 12y ago
I'll also add that I was skeptical at first as well. It was only after playing with the actual code for a while that I started to understand, and have actually ported a couple functions over to simple elements.
One of them is an input debouncer. A lot of my UIs lately want to instantly react to the user's actions, but I don't want to fire off a request to the server for every keystroke. The solution is a debouncer, a function or component that takes the input from the user and does something only once the input hasn't changed in some period of time (e.g. there's no sense sending a search request while the user's typing because it will most likely be instantly stale).
So where before I did something like:
onInputChanged(debouncer(function(debouncedInput) {
// a bunch of code to fire off a request to the server
// then render the result back onto the page
}));
Now I'm doing:
<input value='{{rawInput}}'>
<my-debouncer input='{{rawInput}}' output='{{debouncedInput}}' delay='150'><my-debouncer>
<my-server-request input='{{debouncedInput}}' output='{{results}}' error='{{error}}'></my-server-request>
<div>{{results.length}} results</div>
<template repeat='{{result in results}}'>
<div>{{result.name}} - {{result.count}}</div>
</template>
This is a toy example, but the long and the short of it is that I'm seeing more code reuse and a much simpler development experience.