An HTML view library in under 500 lines.
Similar to React, but a lot smaller.
Source on GitHub<!doctype html> <html> <body> <!-- Step 1. Include domrender.js --> <script src="domrender.js"></script> <!-- Step 2. Make a template in html --> <div id="click-app"> <button @e onclick="handleClick()">Click Me</button> <br> You clicked the button <span @v=clicks></span> times. </div> <script> // Step 3. Make a JavaScript model var myClickApp = { clicks: 0, handleClick: function () { myClickApp.clicks += 1 myView.render() // call render after update } } // Step 4. Bind the model to the dom element var el = document.getElementById("click-app") var myView = domrender.use(el, myClickApp) </script> </body> </html>
Domrender is inspired by Riot and React.
Like Riot and React, you can think updates in Domrender as "re-render-the-world".
Where React uses the virtual dom diffing approach, Riot uses a value diffing approach.*
Like Riot, Domrender also uses a value diffing approach, but does not require any compiling of .tag files.
Domrender just uses your existing dom. In Domrender, when render() is called, it will reevaluate
all the expressions that are bound to the dom, and then update the dom if needed.
Another difference is that Domrender does not do anyting special with event handling.
Old-fashoned inline (onclick= style) events are
obvious and easy to debug. Domrender does give you a helpful feature (via the @e attribute) that lets
your inline event handlers have the same scope as the javascript object they are bound to. For example, in the live demo above,
you can say onclick="handleClick()" instead of onclick="myClickApp.handleClick()".
*This is my understanding of Riot.