Hyperapp and pug-vdom
Last updated
Was this helpful?
Last updated
Was this helpful?
Hyperapp is a micro-framework built as a kind of functional JavaScript bridge between Elm and React. By default it uses hyperscript to generate HTML within the JS code but I created an alternative approach which allows continued use of Pug templates instead.
Like React, a core feature of Hyperapp is the virtual-DOM. Any changes in state are used to update the virtual-DOM which is compared to the real DOM in the browser. Targeted updates are applied automatically in the browser. In principle this makes for a faster user experience and an easier developer life - you can focus on code logic rather than coping directly with the DOM.
In a 'traditional' app, the state of buttons etc. is retained within the button - for example in a class or attribute which describes the click status. In order to interact with the button it is necessary to directly access the DOM entry for it, query the current state and make the change. In a virtual DOM you can store the state of the button in an array somewhere. Any change you cause to that array generates an efficient background tweak to the real DOM - your code doesn't need to understand how the DOM works at all.