Have you ever tried callforwards?
If you’ve used Express.js before, it’s the same concept, but for the front-end: you have a pipeline of middleware functions and you put all your logic inside.
In Express, the library takes HTTP requests, runs your middleware and generates HTTP responses.
On the frontend, you have Rimmel.js which takes not HTTP requests but DOM events, then processes your middleware and displays the results.
If you like how simple and straightforward is Express on the back-end, you’ll probably appreciate the same fluency on the front-end, too.
Rimmel vs Express: different signatures, similar concept of streams/pipelines
Let’s compare the two libraries and see how we can leverage similarities in their architecture to get started quickly.
In Express you can write a handler function for an API that returns a number that’s twice the number provided in input, looks like this:
const handler = (req, res, next) => {
const result = parseInt(req.querystring.q) *2;
res.status(200).write(result);
};
// Register the route and the handler
app.route('/api/double').post(handler);
On the front-end, a Rimmel handler to double the value of a textbox when it changes and render it in a div using callforwards, you do this:
const handler = flow(
next => e => next(parseInt(e.target.value)*2)
);
document.body.innerHTML = rml`
<input oniniput="${handler}"> <br>
Result: <div>${handler}</div>
`;
If you understood the above, you may be ready to play.
Hit the button and jump on this playground
or simply play with it here:
Find more inspiration and examples here
A bit of caution
Callforwards are still an experimental construct. Great to play with if you want to explore a new exciting design pattern that wants to prove itself, but we need more research with regards to their suitability in various conditions, help validate them, review them, find and fix issues, etc.
If you found them interesting and you’re experimenting with them, please share your findings below in a comment, add a link to what you created, looking forward to see any creative applications!
Learn More
