Skip to content
An exploration of the features of hyperapp v2.0
JavaScript HTML
Branch: master
Clone or download
Latest commit 72f6680 Aug 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
css First commit Aug 19, 2019
cypress Move readme Aug 23, 2019
.editorconfig First commit Aug 19, 2019
.gitattributes First commit Aug 19, 2019
.gitignore First commit Aug 19, 2019
.prettierrc First commit Aug 19, 2019
LICENSE First commit Aug 19, 2019
README.md Add minial text Aug 23, 2019
cypress.json
hyperapp.js Make ready for release Aug 23, 2019
index.html Make ready for release Aug 23, 2019
package-lock.json
package.json First commit Aug 19, 2019

README.md

Interactive docs for Hyperapp 2.0 using Cypress

A Cypress spec file that exercises and explains the hyperscript 2.0 API

Hyperapp is a frontend micro 'framework' with:

  • elm-style architecture
  • single state atom
  • virtual DOM with functional components
  • pure functional action functions that update state or chain to effects
  • effects and subscriptions keep side effects out of pure logic
  • declarative

The usual way to learn a new API is read the docs including a scan of the reference in order to get to grip with the key concepts. Tutorial articles or videos are often useful for the details but sometimes the 'signal to noise ratio' is not ideal for personal preferences. Finally playing with examples in local or online coding tools or REPLs helps exploring specific requirements.

I thought tests would be a great way to explain the API using concise code that is more reproducable than ad-hoc coding with manual or interactive experiments. BDD style tests are particularly helpful in explaining how an API behavies without white box knowledge.

Cypress in particular has several great features that should make this work well for learning:

  • Runs in-process in the browser so is fast and reliable. Plus full access to all code.
  • Can click on any result in the runner to jump to it in UI and browser state
  • Use browser F12 tools to further explore the code
  • Easy to use commands build on Mocha & Chai assertions and retry automatically

The approach taken here is to explain the concepts with minimal 'sugar' code. One of the benefits of hyperapp is the small core acts as a basis for you own abstractions and patterns using functional composition. I suggest you looks at some of the extra hyperapp examples, effects and subscriptions for more.

We suggest:

  • npm install
  • Run the tests npm test and look at the runner output which list the key concepts
  • Click on any of the runner test lines to expand it and set the browser state
  • Read the spec file code)
  • Open the F12 browser dev tools
  • Click on an assert to see detailed ouput in the F12 console
  • Edit the spec file adding .only to describe or it statements (eg its.only() to limit the tests
  • Add the .debug Cypress command to break into F12 debugger at interesting points
  • Hack the view and test code to explore the API.
  • Read the hyperapp source - it's small
You can’t perform that action at this time.