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 Key items to note being the start script and pug/pug-vdom dependencies (and you need Node.js version 6.4 or above).Sponsors coin news Getting Started Installation ¶ See the Hyperapp pages to get a better understanding of the full range of what it does, or try their new Udemy/ Packt course.Īs project setup, here's the package.json. So what follows is a brief intro to the very simple app I built to demo how Hyperapp can use Pug templates. Maybe I'll come round eventually, but maybe I don't need to.įortunately for me, the project pug-vdom (obviously) brings a virtualDOM to Pug. Combining HTML with the business logic using hyperscript h functions doesn't sit right with me (yet?) and I find it hard to reason about a page when the layout is so abstract. 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. I recently completed an excellent course by James Moore on the basics of functional JavaScript for web apps.
0 kommentar(er)
