Miniflux

An introduction to interesting ideas in React world

React is the latest thing to talk about in Javascript land.

And I think there might actually be a reason why people are excited!

The new programming models that emerged together with React can drastically simplify the way we build applications.

This sounds awesome. But if you are convinced and want to get started, you probably don’t get far because you get stuck in a jungle full of different Flux implementations.

At least that’s what happened to me. While playing around with all those different libraries and frameworks, I picked up some core ideas I especially like:

• The whole application state in one atomic object:

• Hot reload application on changes:

• Clearly defined actions as single point for changing the system:

• With optional logging to see clearly what’s happening:

• Actions as simple to reason about and simple to test pure functions:

// actions.js
edit (render, state, todo) {
  render(
    state.set('editing', todo.get('id'))
  )
}

// actions.test.js
t.test('edit', t => {
  t.plan(1)

  var todo = todos.first()

  actions.edit(s => {
    t.equal(s.get('editing'), todo.get('id'), 'edits the right todo')
  }, state, todo)
})

• Interactively trigger actions and modify the state:

• One render function to render the whole application as a tree composed of many simple components:

• Pure components together with the PureRenderMixin and immutable data structures

• ES6 syntax for improved readability:

  clearCompleted (render, state) {
    render(
      state.update('todos', todos => todos.filter(
        todo => !todo.get('completed')
      ))
    )
  }

If you think this sounds interesting and you just want to see a simple application as an example how this could work, I might have something for you!

It turns out, you don’t need any framework or library to get all this. I created Miniflux-TodoMVC as a starting point for everyone curious.

Update: Time Travel

I added time traveling to the demo application. It records all states and you can preview them or set the current state to one of the previous ones. It’s really basic for now but it works pretty well already.

Give it a try over here: jorinvo.github.io/miniflux-todomvc