I like the retained ability to see the page structure and the clearer separation of logic and UI. However, previously I've used Pug to define my UI templates.

Events dispatched to update the state which updates the UI using virtualDOM diff.

Centralised state and no stateful components (easy 'undo' option and perfect for quick and reliable development of small to medium scale apps).

Clear functional approach to business logic.

Now, the Hyperapp framework is wonderful and has a number of features I like: I imagine the new v2 has moved on quite a bit from when Ali checked it out in early 2018. Turns out this is built along very similar lines with an option to use JSX as well as hyperscript. But I don't really get on with it.Īs I was browsing DEV, I noticed a post from mentioned Hyperapp. I find hyperscript to be an interesting approach and it does allow for composable UI components. The app framework he created is nice but uses hyperscript to define HTML as functions. Render a set of data console.I recently completed an excellent course by James Moore on the basics of functional JavaScript for web apps. Compile the source code const compiledFunction = pug. - template.pug p #'s Pug source code! const pug = require( 'pug') The compiled function can be re-used, and called with different sets of data. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals”) as an argument.

The general rendering process of Pug is simple. Pug is available via npm: $ npm install pug

Sponsors coin news Getting Started Installation ¶

Pug template button