https://github.com/flintinatux/puddles
Tiny vdom app framework. Pure Redux. No boilerplate.
https://github.com/flintinatux/puddles
frontend-framework functional-programming reducer redux vdom virtual-dom
Last synced: 2 months ago
JSON representation
Tiny vdom app framework. Pure Redux. No boilerplate.
- Host: GitHub
- URL: https://github.com/flintinatux/puddles
- Owner: flintinatux
- Created: 2016-08-22T04:46:45.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-24T14:01:27.000Z (about 6 years ago)
- Last Synced: 2025-03-26T08:22:57.598Z (3 months ago)
- Topics: frontend-framework, functional-programming, reducer, redux, vdom, virtual-dom
- Language: JavaScript
- Homepage:
- Size: 406 KB
- Stars: 25
- Watchers: 7
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Pure Redux. No boilerplate.
## Introduction
The main goal of `puddles` is to make the [Redux](http://redux.js.org/) pattern easy, without all of the boilerplate. If you like the Redux pattern, but wish you could code it in a more functional style, then `puddles` is for you.
With `puddles` you get all of these for free:
- curried [action creators](https://github.com/flintinatux/puddles/blob/master/docs/API.md#paction)
- switch-free [reducer construction](https://github.com/flintinatux/puddles/blob/master/docs/API.md#phandle)
- dead simple [reducer composition](https://github.com/flintinatux/puddles/blob/master/docs/API.md#pmount)
- pure view functions in [plain javascript](https://github.com/flintinatux/puddles/blob/master/docs/API.md#p)
- modern [client-side routing](https://github.com/flintinatux/puddles/blob/master/docs/API.md#pmount) with `history.pushState`
- native support for [thunks](https://github.com/flintinatux/puddles/blob/master/docs/API.md#pmount)
- [automatically dispatched](https://github.com/flintinatux/puddles/blob/master/docs/API.md#pmount) user actions
- integration with the [Redux DevTools extension](https://github.com/flintinatux/puddles/blob/master/docs/API.md#pmount)
To whet your appetite, try the obligatory Hello World example:
```js
const { compose, constant, merge, path } = require('tinyfunk')
const p = require('puddles')
const actions = {
reset: constant(p.action('RESET', null)),
setName: p.action('SET_NAME')
}
const reducers = {
name: p.handle('world', {
RESET: constant('world'),
SET_NAME: (state, name) => merge(state, { name })
})
}
const targetVal = path(['target', 'value'])
const view = (actions, state) => {
const { reset, setName } = actions
const { name } = state
return p('div#root', [
p('div.greeting', `Hello ${name}!`),
p('input.name', {
attrs: { placeholder: 'Enter name...' },
on: { input: compose(setName, targetVal) },
props: { value: name }
}),
p('button.reset', { on: { click: reset } }, 'Reset')
])
}
const root = document.getElementById('root')
p.mount({ actions, reducers, root, view })
```
Notice anything missing? There is no `dispatch` function! The `setName` action creator attached to the `input` event is composed with the `dispatch` function internally.
Impressed? Read the [full documentation](https://github.com/flintinatux/puddles/blob/master/docs/API.md) to learn more.