inu

🐕 composable unidirectional user interfaces using pull streams

features

• minimal size: inu + yo-yo + pull-stream weighs only ~8kb
• app is a data structure: only need to learn 4 functions, automatically supports plugins
• architecture is fractal: compose one app from many smaller apps
• single source of truth: the state of your app is a single object tree
• state is read-only: update state by dispatching an action, an object describing what happened
• update with pure functions: updates are handled by a pure function, no magic
• first-class side effects: initial state or updates can include an effect, an object describing what will happen
• omakase: consistent flavoring with pull streams all the way down

demos

• ./examples/clock: simple app to count seconds
• ./examples/title: simple app to change document.title
• ./examples/routing: url routing with sheet-router
• ./examples/compose: multiplex many apps into one app
• ./examples/counter: simple counter expressed in standard redux pattern
• ./examples: above examples composed into one app deployed at http://dinosaur.is/inu.
• pietgeursen/ssb-gathering-ui: Facebook-style events using inu, muxrpc, sheetify, tcomb and other fun stuff.
• pietgeursen/inu-fft: Little inu app with fft of microphone input
• ahdinosaur/inu-plays-roguelike: 'Twitch Plays Pokémon'-style 'Roguelike' game using inu, tcomb, and things.
• holodex/app#compost: full-stack user directory app using inu, inux, and vas.

if you want to share anything using inu, add your thing here!

example

const { State, Action, Effect } = require('inu')
const delay = require('pull-delay')

const app = {

  init: () => ({
    model: 0,
    effect: 'SCHEDULE_TICK' // start perpetual motion
  }),

  update: (model, action) => {
    switch (action) {
      case 'TICK':
        return {
          model: (model + 1) % 60,
          effect: 'SCHEDULE_TICK'
        }
      default:
        return { model }
    }
  },

  view: (model, dispatch) => html`
    <div class='clock'>
      Seconds Elapsed: ${model}
    </div>
  `,

  run: (effect, sources) => {
    switch (effect) {
      case 'SCHEDULE_TICK':
        return pull(
          pull.values(['TICK']),
          delay(1000)
        )
    }
  }
}

const main = document.querySelector('.main')
const { views } = start(app)

pull(
  views(),
  pull.drain(function (view) {
    html.update(main, view)
  })
)

for a full example of composing multiple apps together, see source and demo.

concepts

TODO

api

inu = require('inu')

the top-level inu module is a grab bag of all inu/* modules.

you can also require each module separately like require('inu/state').

stateModule = inu.State(definiton)

actionModule = inu.Action(definiton)

effectModule = inu.Effect(definiton)

install

npm install --save inu

see also

• inu-engine

license

The Apache License

Copyright © 2016 Michael Williams

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.