Note: Although this is working, this project is still under development and you should not use it for production because the API may still change.
SAM-JS is a lightweight library for building applications in the SAM architecture.
It intends to extend the discussion about SAM happening in Gitter.
SAM is a new reactive/functional pattern that simplifies Front-End architectures by clearly separating the business logic from the view and, in particular, strictly decoupling back-end APIs from the Front-End. SAM is technology independent and as such can be used to build Web Apps or Native Apps. It is also protocol independent and can be implemented over HTTP, WebSockets...
SAM is unapologetically driven by simplicity and challenges the complexity of frameworks like Google's Angular or Facebook's React+JSX+Flux/Redux+Saga+Thunk+GraphQL+Relay.
Check the working example with devtools.
Increases the counter by clicking INC. Launches when counter reaches 10.
import { createModel } from 'sam'
// Input: Current store, dataset presented
// Output: New store
const container = (store = {}, dataset = {}) => {
if (dataset.increaseBy !== undefined) {
store.counter += dataset.increaseBy
}
if (dataset.launch) {
store.launched = true
}
return store
}
// Input: Store (from Model)
// Output: State (to View and nap)
const state = store => {
return {
counter: store.counter,
launchImminent: (store.counter == 9),
hasLaunched: (store.launched ? true : false),
}
}
// Input: State
// Output: NAP, i.e. a function which accepts a function (present) and may or may not call it
const nap = state => {
return present => {
if (state.counter == 10 && state.hasLaunched != true) {
present({ launch: true })
}
}
}
const initialStore = {
counter: 0
}
// Input: Model
// Output: Dispatch, i.e. a function which accepts an action and presents values to the model
const createDispatch = present => action => {
switch (action.type) {
case 'INC':
present({ increaseBy: 1 })
break
}
}
const model = createModel(container, state, nap, initialStore)
const dispatch = createDispatch(model.present)
// You may render the View however you wish
// e.g. with Vanilla JS
model.subscribe(state => {
document.getElementById('counter').innerHTML = state.counter
document.getElementById('launched').style.visibility = state.hasLaunched ? 'visible' : 'hidden'
})
// or with React
import React from 'react'
import { render } from 'react-dom'
model.subscribe(state => {
render(
<App state={state} dispatch={dispatch} />,
document.getElementById('root')
)
})