k-ramel

State manager for your app components, the safe and easy way.

Why should you give it a try? 🤔

Because k-ramel:

⚡️ is fast
📸 is immutable
📦 is modular
💎 encourages to decouple UI and state management
💥 encourages to not have side effect into your business logic
👌 has a light bundle size footprint
🐛 works with redux-dev-tools

Table of content

Migrating

Hey! If you come from an early version of k-ramel and want to upgrade, you can read this migration guide 💎

Modules and libs

packages	description	documentation	gziped size
`k-ramel`	core package	documentation	[]()
`@k-ramel/react`	ReactJS connector	documentation	[]()
`@k-ramel/driver-http`	fetch wrapper	documentation	[]()
`@k-ramel/driver-form`	minimalist form handler	documentation	[]()
`@k-ramel/driver-redux-form`	redux-form wrapper	documentation	[]()
`k-redux-router`	Redux router (one route === one code)	documentation

⚠️Note that some packages have dependencies:

@k-ramel/driver-http: regeneratorRuntime
@k-ramel/driver-redux-form: regeneratorRuntime

Getting started

This getting started helps you to understand how to do things like that!

const listeners = [
  // when the user clicked on "add a todo" button
  // we ask the API to add a new todo (the title is hardcoded for simplicity here)
  when('@@ui/ADD_TODO>CLICKED')((action, store, drivers) => {
    drivers.http('TODO').post(
      'https://todo-backend-modern-js.herokuapp.com/todos',
      {
        title: 'Yo! I am a new todo!',
      },
    )
  }),
  // when the API responds (not in error),
  // we add the new todo returned by the API in the store
  when('@@http/TODO>POST>ENDED')((action, store) => {
    store.todos.add(action.payload)
  }),
  // when a new todo is added to the store
  // we log a message :)
  when('@@krf/ADD>TODOS')(() => {
    console.log('A todo is added!')
  }),
]

Ecosystem

You can pick some modules based on your usage, or even write your own. \ The modules that are supported by k-ramel are listed here. \ We add modules when we need them but feel free to open PR if you want to add your own.

Modules can be :

connectors, used to connect your business logic (and your data) to your UI. We only have a ReactJS connector at the moment.
drivers, used to do some side effects (http, window, history, etc) or share some logic, besides your business logic.

How to use k-ramel

k-ramel is a data store that allows you to listen to event and then react to it. In a reaction you can access:

the outside world via drivers, this is where you put your side effects, like HTTP calls
your data, via store

Then if you connect an UI to k-ramel, via connectors, it can be refreshed each time the store is updated.

You can find documentation about each part of k-ramel there:

Examples

Our own todo-mvc
conference-hall from @bpetetot
k-mille, our personal assistant @unirakun

Contributors

Fabien JUIF [@fabienjuif]
Guillaume CRESPEL [@guillaumecrespel]
Benjamin PETETOT [@bpetetot]
Valentin COCAUD [@EmrysMyrddin]
Yvonnick FRIN [@frinyvonnick]
Delphine MILLET [@delphinemillet]
Benjamin PLOUZENNEC [@Okazari]
Benjamin PLOUZENNEC [@Okazari]
Corinne KRYCH @corinnekrych
Arthur FAUGERAS @AFaugeras

Known users

sparklane - B2B Predictive lead scoring [closed source]
metroscope - AI diagnosis for targeted maintenance [closed source]
conference-hall - A call for paper project [open source]
k-mille - uni rakun assistant [open source]

Deprecated modules

packages	description	documentation	last version	why
`@k-ramel/driver-redux-little-router`	redux-little-router wrapper	documentation	1.2.0	redux-little-router is deprecated

About uni rakun

uni rakun is created by two passionate french developers.

Do you want to contact them? Go to their website


Guillaume CRESPEL	Fabien JUIF

unirakun / k-ramel

readme