I just discovered the library diffHTML
And I have adapted one of the sample.
Look a the code below, there is no databindings, no directives, the UI is constantly refreshed at highest rate possible, like in a game loop;
Could this be a viable solution ?
Tell me what you think ?
You can test it here : diffHTML
(function () {
const {innerHTML, html} = window.diff
const state = {
name: "Anonymous",
email: "nobody@nowhere.com"
}
const actions = {
changeName: (e) => state.name = e.target.value,
changeEmail: (e) => state.email = e.target.value
}
function render() {
innerHTML(window.scene, html`
<style>
input {
margin-bottom: 10px;
display: block;
}
</style>
<h2>
Hello ${state.name} <br /> Your email is : ${state.email}
</h2>
Name : <input oninput="${actions.changeName}"/>
Email : <input oninput="${actions.changeEmail}"/>
`);
requestAnimationFrame(render);
}
render();
})();
Top comments (2)
This doesn’t immediately look much different than Vue or React... I guess I don’t really know what use-case diffHTML is trying to fulfill here. I guess I’ll need to check it out!
Hy Jake,
Thank you for your comment.
The main point here is that we not have data-bindings, and in the actions we don't have to deal with observables to update the view.
We simply render all the view periodically
htmlDiff is reponsable to update the view without loosing the context, like any VDOM librairies does.
When you have little time could you send the equivalent with Vue or React ?
I suggest you use flems.io to illustrate your example
Regards