I’m currently working on my behavior-state
library which leverages the primitives of rxjs
to create
incredible development experiences by creating strict separations between business logic and presentation logic.
Although, little is written on behavior-state
there is a rough initial presentation demonstrating the concepts so far.
For other musings, please take a look at the Storybook which is home to most of my recent front-end library experiments.
Todo App Sample
function TodoApp() {
const state = useContext(TodoState);
return (
<div className="container">
<h1>Todos <small style={{ fontSize: 16}}>APP</small></h1>
<ul className="list-group">
<state.$todos.react
nextItem={todo => <TodoItem key={todo.id} todo={todo} />}
/>
</ul>
<br />
<form className="form-group" onSubmit={preventDefaultThen(state.addTodo)}>
<label htmlFor="todo-title">New Todo Title</label>
<div className="input-group">
<state.$todoInput.react
next={value => (
<input
id="todo-title"
type="text"
className="form-control"
value={value}
onChange={changeValue(state.updateNewTodoInput)}
placeholder="What do you want to get done?"
/>
)}
/>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
);
}