A "Proper FRP" template system for RxJS

[dariomannu]

Ladies and Gentlemen,

As a FRP fan, like several of you, my experience working with many popular JS frameworks was unsatisfactory.

I had to do something about it, so as a spinoff from another project I created Rimmel (for Reactive Markup Language): https://github.com/hellomenu/rimmel

 
 

Rimmel comes with first-class support for observables, subjects, promises.
Unlike with most other frameworks, there's no boilerplate for you to manage subscriptions, cleanup, etc.
Everything Rx you know you can use Today.

 
 

Data binding is done declaratively as if HTML natively understood how to map HTML nodes, attributes, classes, datasets either as sources or sinks (yes, you can attach observables to class names, data attributes, and inline CSS styles, too).

A conceptual example:

const component = () => {
  const state = new Subject().pipe( op1, op2, ..., opN )

  return render`
    <button onclick="${state}" id="source">
    <div id="sink">${state}</div>
  `
}

document.querySelector('#target').innerHTML = component()

You can get started with Rimmel in no time. No Webpack, JSX or Babel needed, just pure, native ES6 tagged templates.

https://codepen.io/fourtyeighthours/pen/bGKRKqq
https://codepen.io/fourtyeighthours/pen/ZEqvXNa
https://codepen.io/fourtyeighthours/collections/
(more examples on codepen and github)

 
 

The package comes at slightly less than 3KB gzipped and minified.

 
 

Try it out and have fun (I know I'm biased, but this has changed my life)