Hyped about Hyperapp

Gleb Bahmutov, PhD

Monday, Nov 19, 2018 16:10

🔊  Dr Gleb Bahmutov PhD

@bahmutov

glebbahmutov.com

github.com/bahmutov

slides.com/bahmutov

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional

these slides

Cypress.io open source E2E test runner

www.cypress.io

cypress_io

One fine morning ...

@bahmutov

<X> Bahmutov 

Dad, make me a game

@bahmutov

@bahmutov

@bahmutov

Clone of 2048

Vanilla JS

glebbahmutov.com/2048/

@bahmutov

Game of GitHub

Vanilla JS

glebbahmutov.com/game-of-github/

@bahmutov

@bahmutov

Vanilla JS is not going to scale

@bahmutov

Goal: write an web application

https://www.markupbox.com/blog/top-5-javascript-frameworks-in-2017/

@bahmutov

https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962

Hard to pick

@bahmutov

View + Data store

  • React + Redux

  • Angular + ng-rx

  • Vue + Vuex

  • X + ...x

@bahmutov

Which JavaScript framework should I use next?

https://slides.com/bahmutov/buzzjs

  • Features
  • Learning curve
  • Size and speed
  • Testability

@bahmutov

https://twitter.com/thomasfuchs/status/708675139253174273?lang=en

@bahmutov

Hyperapp

@bahmutov

🔗  https://github.com/hyperapp/hyperapp

🇯🇵  https://twitter.com/JorgeBucaran

1 kB JavaScript framework for building web applications.

"Introducing Hyperapp 1.0 🎉"

Dec 2017 https://medium.com/hyperapp/introducing-hyperapp-1-0-dbf4229abfef

@bahmutov

🔗  https://github.com/hyperapp/hyperapp

🇯🇵  https://twitter.com/JorgeBucaran

  • Minimal
  • Pragmatic
  • Standalone

@bahmutov

Minimal

We have aggressively minimized the concepts you need to understand to be productive while remaining on par with what other frameworks can do.

github.com/hyperapp/hyperapp README

@bahmutov

Pragmatic

Hyperapp holds firm on the functional programming front when managing your state, but takes a pragmatic approach to allowing for side effects, asynchronous actions, and DOM manipulations.

github.com/hyperapp/hyperapp README

@bahmutov

Standalone

Do more with less. Hyperapp combines state management with a virtual DOM engine that supports keyed updates & lifecycle events — all with no dependencies.

github.com/hyperapp/hyperapp README

@bahmutov

@bahmutov

https://twitter.com/JorgeBucaran/status/965597642620223488

https://unpkg.com/hyperapp@1.2.5/dist/hyperapp.js

@bahmutov

Entire Hyperapp script

https://unpkg.com/hyperapp@1.2.5/dist/hyperapp.js

@bahmutov

Entire Hyperapp script

https://twitter.com/rtfeldman/status/973382389035618304

This is the most heartwarming picture of the Elm Architecture I've ever seen. 😍

@bahmutov

Richard Feldman

actions

at the conference!

View

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

@bahmutov

Single script

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Virtual DOM helper

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Application helper

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

View function

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Element name "div"

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Element attributes

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Element contents

@bahmutov

@bahmutov

View function returns virtual node

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Start application

@bahmutov

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Start application

@bahmutov

View function

<head>
  <script src="https://unpkg.com/hyperapp"></script>
</head>
<body>
  <script>
    const {h, app} = window.hyperapp
    const view = () =>
      h('div', {class: 'hello'}, 'Hello World!')
    app(null, null, view, document.body)
  </script>
</body>

"Hello World!" Hyperapp

Start application

@bahmutov

Target DOM element

@bahmutov

State

const state = {
  message: 'Boston!'
}
const view = (state) =>
  h('div',
    {class: 'hello'},
    `Hello ${state.message}`
  )
app(state, null, view, document.body)

"Hello <message>!" Hyperapp

@bahmutov

const state = {
  message: 'Boston!'
}
const view = (state) =>
  h('div',
    {class: 'hello'},
    `Hello ${state.message}`
  )
app(state, null, view, document.body)

"Hello <message>!" Hyperapp

@bahmutov

Initial state

const state = {
  message: 'Boston!'
}
const view = (state) =>
  h('div',
    {class: 'hello'},
    `Hello ${state.message}`
  )
app(state, null, view, document.body)

"Hello <message>!" Hyperapp

@bahmutov

Pass initial state

const state = {
  message: 'Boston!'
}
const view = (state) =>
  h('div',
    {class: 'hello'},
    `Hello ${state.message}`
  )
app(state, null, view, document.body)

"Hello <message>!" Hyperapp

@bahmutov

Current state

@bahmutov

Actions

const {h, app} = window.hyperapp
const state = {
  message: ''
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value})
}

"Hello <input>!" Hyperapp

@bahmutov

const {h, app} = window.hyperapp
const state = {
  message: ''
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value})
}

"Hello <input>!" Hyperapp

@bahmutov

Object of actions

const {h, app} = window.hyperapp
const state = {
  message: ''
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value})
}

"Hello <input>!" Hyperapp

@bahmutov

Action takes arguments

const {h, app} = window.hyperapp
const state = {
  message: ''
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value})
}

"Hello <input>!" Hyperapp

@bahmutov

Then current state

const {h, app} = window.hyperapp
const state = {
  message: ''
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value})
}

"Hello <input>!" Hyperapp

@bahmutov

and returns new state

const view = (state, actions) =>
  h('div',
    {class: 'hello'},
    [`Hello ${state.message}`,
    h('input', {
      type: 'text',
      placeholder: 'enter your name',
      onchange: actions.onchange
    })]
  )
app(state, actions, view, document.body)

"Hello <input>!" Hyperapp

@bahmutov

Pass actions to view

const view = (state, actions) =>
  h('div',
    {class: 'hello'},
    [`Hello ${state.message}`,
    h('input', {
      type: 'text',
      placeholder: 'enter your name',
      onchange: actions.onchange
    })]
  )
app(state, actions, view, document.body)

"Hello <input>!" Hyperapp

@bahmutov

Call action on event

const view = (state, actions) =>
  h('div',
    {class: 'hello'},
    [`Hello ${state.message}`,
    h('input', {
      type: 'text',
      placeholder: 'enter your name',
      onchange: actions.onchange
    })]
  )
app(state, actions, view, document.body)

"Hello <input>!" Hyperapp

@bahmutov

Hyper app

Why I ❤️ Hyperapp

View

State

Actions

@bahmutov

Uses pure functions

const view = (state, actions) =>
  h('div',
    {class: 'hello'},
    [`Hello ${state.message}`,
    h('input', {
      type: 'text',
      placeholder: 'enter your name',
      onchange: actions.onchange
    })]
  )

View is a pure function, state and actions are arguments

@bahmutov

const actions = {
  onchange: e => (state, actions) =>
    ({message: e.target.value})
}

Actions are pure functions with arguments, state, and other actions

@bahmutov

  • Understand

  • Test

  • Extend

glebbahmutov.com/blog/pure-programming-with-hyper-app/

slides.com/bahmutov/fun-javascript-workshop

slides.com/bahmutov/pure-magic

glebbahmutov.com/blog/test-if-a-function-is-pure/

@bahmutov

Pure functions are easy to:

Why I ❤️ Hyperapp

@bahmutov

easy to handles view + state

https://medium.com/hyperapp/hyperapp-for-redux-refugees-2507c9dd1ddc

https://glebbahmutov.com/count-app/

@bahmutov

<X> Bahmutov 

Dad, make me a maze runner game

@bahmutov

Ok, let's write "serious" app

@bahmutov

🎁 organize code

✅ testing

@bahmutov

import {state} from './state'
import {actions} from './actions'
import {view} from './view'
import {app} from 'hyperapp'
app(state, actions, view, document.body)

app.js

<body>
  <script src="app.js"></script>
</body>

index.html

{
  "scripts": {
    "start": "parcel serve ./index.html"
  },
  "dependencies": { "hyperapp": "1.2.5" },
  "devDependencies": {
    "parcel-bundler": "1.7.0"
  }
}

package.json

@bahmutov

Parcel 🎁 is awesomesauce

https://parceljs.org/

@bahmutov

glebbahmutov.com/blog/parcel/

@bahmutov

Parcel 🎁 is awesomesauce

https://parceljs.org/

@bahmutov

glebbahmutov.com/blog/parcel/

Parcel 🎁 is awesomesauce

import {h} from 'hyperapp'

export const view = (state, actions) => (
  <div className="hello">
    Hello {state.message}
    <input type="text"
      placeholder="enter your name"
      onchange={actions.onchange} />
  </div>)

view.js

@bahmutov

$ npm start

Use JSX

if VSCode removes unused "h" see #49794 

@bahmutov

Parcel 🎁 is awesomesauce

export type State = {
  message: string
}
export const state:State = {
  message: ''
}

state.ts

@bahmutov

Use TypeScript

Hyperapp includes TypeScript definitions

Parcel handles TS pretty well with zero config

@bahmutov

Pro tip: slice state and actions

const state = {
  foo: { message: '' },
  bar: { age: 21 }
}
const actions = {
  foo: {
    // slice = current state.foo
    onchange: e => slice =>
      ({message: e.target.value})
  },
  bar: {},
  print: () => state => console.log(state)
}

@bahmutov

Text

Text

Pro tip: call actions yourself

const actions = {
  ...
  print: () => state => console.log(state)
}
window.__app = app(state, actions, view, document.body)

@bahmutov

Pro tip: split view functions

// pure arguments => virtual node function
const HelloX = ({greeting, name}) =>
  h('p', {}, `${greeting} ${name}`)

@bahmutov

// call HelloX with arguments
const view = (state) =>
  h('div',
    {class: 'hello'},
    [HelloX({
      greeting: 'Hello',
      name: state.message
    })]
  )

Pro tip: actions can call other actions

const actions = {
  set: todos => state => ({todos}),
  click: () => (state, actions) => {
    fetch()
      .then(r => r.json())
      .then(actions.set)
  }
}

@bahmutov

Pragmatic approach to side effects

✅ Testing

End to end testing with Cypress.io

Unit testing using Cypress.io

@bahmutov

E2E

unit

it('logs user in', () => {
  cy.visit('page.com')
  cy.get('#login').click()
})

@bahmutov

/// <reference types="cypress" />
beforeEach(() => {
  cy.visit('http://localhost:1234')
})
it('greets', () => {
  cy.get('input').type('tester{enter}')
  cy.contains('.hello', 'Hello tester')
    .should('be.visible')
})

$ npm i -D cypress start-server-and-test parcel-bundler
{
  "scripts": {
    "start": "parcel serve ./index.html",
    "test": "cypress run",
    "ci": "server-test 1234"
  }
}

package.json

cypress/integration/e2e.js

$ npm run ci

Can he do it? On 1 slide? No way!

Entire E2E test setup on 1 slide

Cypress.io running end to end test

@bahmutov

Cypress.io running count-app tests

@bahmutov

E2E

unit

import {view} from '../src/view'
import {mount} from 
  'cypress-hyperapp-unit-test'
it('renders', () => {
  mount(view)
  cy.click(...)
})

@bahmutov

Unit testing using Cypress via an adaptor

https://github.com/bahmutov/cypress-hyperapp-unit-test

Cypress ❤️ Hyperapp

💻 code

https://github.com/LearnHyperapp/hyperapp-cypress-demo

📼 video of end to end testing

https://github.com/LearnHyperapp/hyperapp-cypress-demo

@bahmutov

⭐️ https://www.cypress.io/

Hyperapp V2

https://github.com/jorgebucaran/hyperapp/pull/726

  • Declarative actions #749
  • Effects #750
  • Subscriptions #752
  • and a few other things

December 2018?

Magic state (v1)

const state = {
  message: '',
  count: 0
}
const actions = {
  onchange: e => state =>
    ({message: e.target.value}),
  increment: e => state =>
    ({count: state.count + 1})
}

just return a change

@bahmutov

Explicit state (v2)

const state = {
  message: '',
  count: 0
}
const actions = {
  onchange: (state, data, e) =>
    ({...state, message: e.target.value}),
  increment: (state, data, e) =>
    ({...state, count: state.count + 1})
}

return full state

@bahmutov

Call actions (v1)

<button onclick={() => actions.increment(1)}>+</button>

call action function

<button onClick={[IncrementBy, { number: 1 }]}+</button>

list function and arguments

Declare actions (v2)

@bahmutov

Side effects (v2)

import * as Http from "@hyperapp/http"

const SendHttp = state => [
  { ...state, error: null, fetching: true },
  Http.fetch({
    url: state.url,
    action: SuccessResponse,
    error: ErrorResponse
  })
]

action returns [new state, effect]

@bahmutov

Hyperapp V2

@bahmutov

=> Cycle.js

https://www.npmjs.com/package/ferp

Ferp

Ferp is the easiest, functional-reactive, zero dependency javascript app framework for nodejs and modern browsers.

Inspired by Elm and Hyperapp v2 (declarative, state + effect actions)

@bahmutov

Hyperapp is 💯

Easy to try

Easy to learn: state, actions, view

Easy to organize and test

Bonus

Parcel bundler + Hyperapp = ⚡️

@bahmutov

📽  slides.com/bahmutov/hyperapp

🔗  hyperapp.js.org

📝  glebbahmutov.com/blog/tags/hyperapp

👨‍🏫  @bahmutov

Hyped about Hyperapp