# Hyperapp and pug-vdom 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. {% embed url="" %} {% embed url="" %} {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://johnkazer.gitbook.io/core-web-dev-concepts/hyperapp-and-pug-vdom.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.