flintinatux / Puddles
Tiny vdom app framework. Pure Redux. No boilerplate.
Stars: ✭ 24
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Puddles
Backbone.vdomview
VirtualDOM-aware Backbone View
Stars: ✭ 23 (-4.17%)
Mutual labels: virtual-dom, vdom
Ng Vdom
(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.
Stars: ✭ 249 (+937.5%)
Mutual labels: virtual-dom, vdom
Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (+654.17%)
Mutual labels: virtual-dom, vdom
Neo
Create blazing fast multithreaded Web Apps
Stars: ✭ 1,219 (+4979.17%)
Mutual labels: virtual-dom, vdom
Lowlight
Virtual syntax highlighting for virtual DOMs and non-HTML things
Stars: ✭ 310 (+1191.67%)
Mutual labels: virtual-dom, vdom
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+50537.5%)
Mutual labels: virtual-dom, vdom
Asm Dom
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Stars: ✭ 2,604 (+10750%)
Mutual labels: virtual-dom, vdom
Preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Stars: ✭ 30,527 (+127095.83%)
Mutual labels: virtual-dom, vdom
Refractor
Lightweight, robust, elegant virtual syntax highlighting using Prism
Stars: ✭ 291 (+1112.5%)
Mutual labels: virtual-dom, vdom
Swiftrex
Swift + Redux + (Combine|RxSwift|ReactiveSwift) -> SwiftRex
Stars: ✭ 267 (+1012.5%)
Mutual labels: functional-programming, reducer
Asm Dom Boilerplate
A simple boilerplate to start using asm-dom without configuration.
Stars: ✭ 49 (+104.17%)
Mutual labels: virtual-dom, vdom
Vhtml
Render JSX/Hyperscript to HTML strings, without VDOM 🌈
Stars: ✭ 556 (+2216.67%)
Mutual labels: virtual-dom, vdom
Remark Vdom
plugin to compile Markdown to Virtual DOM
Stars: ✭ 44 (+83.33%)
Mutual labels: virtual-dom, vdom
Squark
Rust frontend framework, for web browser and more.
Stars: ✭ 162 (+575%)
Mutual labels: virtual-dom, frontend-framework
Wonders
🌈 Declarative JavaScript framework to build command-line applications.
Stars: ✭ 34 (+41.67%)
Mutual labels: virtual-dom, vdom
Mithril.js
A JavaScript Framework for Building Brilliant Applications
Stars: ✭ 13,062 (+54325%)
Mutual labels: virtual-dom, vdom
Muve
Muve is a micro library for building interactive javascript applications.
Stars: ✭ 11 (-54.17%)
Mutual labels: virtual-dom, vdom
Ivi
🔥 Javascript (TypeScript) library for building web user interfaces
Stars: ✭ 445 (+1754.17%)
Mutual labels: virtual-dom, vdom
Domvm
DOM ViewModel - A thin, fast, dependency-free vdom view layer
Stars: ✭ 581 (+2320.83%)
Mutual labels: virtual-dom, vdom
Pure Redux. No boilerplate.
Introduction
The main goal of puddles
is to make the Redux 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
- switch-free reducer construction
- dead simple reducer composition
- pure view functions in plain javascript
- modern client-side routing with
history.pushState
- native support for thunks
- automatically dispatched user actions
- integration with the Redux DevTools extension
To whet your appetite, try the obligatory Hello World example:
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 to learn more.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].