Wrapping things in Bacon

Federico Knüssel
Sep 17, 2016 · 7 min read

A little bit of context

Creating Observables

Yup, we are legitimately wrapping things in Bacon here

From a DOM event using Bacon.fromEvent

const button = document.querySelector('#btn');button.addEventListener(‘click’, () => {
console.log('you just clicked on the button');
});
Bacon
.fromEvent(document.querySelector('#btn'), 'click')
.onValue(() => console.log('you just clicked on the button'));
const button = document.querySelector('#btn');
const clickStream = Bacon.fromEvent(button, 'click');
clickStream
.map(() => Math.round(10 * Math.random()))
.filter((value) => value > 0)
.onValue((value) => console.log(value));
clickStream
.skip(1)
.take(4)
.onValue(() => console.log('this displays on clicks 2-5 only');

From a promise using Bacon.fromPromise

const ajaxCall = fetch('//api.myjson.com/bins/2jlih')
.then((response) => response.json())
.catch((error) => console.error('parsing failed', error));
Bacon
.fromPromise(ajaxCall)
.flatMap(Bacon.fromArray)
.map((location) => `${location.city}, ${location.state}`)
.onValue((location) => console.log(location));

From a timer using Bacon.sequentially

Bacon
.sequentially(1000, [1, 2, 3, 4, 5])
.onValue((value) => console.log(value));

From a timer using Bacon.repeatedly

Bacon
.repeatedly(1000, ['spring', 'summer', 'autumn', 'winter'])
.onValue((value) => console.log(value));

From a timer using Bacon.interval

Bacon
.interval(1000, 'beer time!')
.onValue((value) => console.log(value));

From a timer using Bacon.later

Bacon
.later(1000, 'I am one second late')
.onValue((value) => console.log(value));

From an array using Bacon.fromArray

Bacon
.fromArray([1, 2, 3, 4])
.reduce(0, (accumulator, value) => accumulator + value)
.onValue((value) => console.log(value));

From a single value using Bacon.once

Bacon
.once('rawr')
.onValue((value) => console.log(value));

From a callback using Bacon.fromCallback

Bacon
.fromCallback((sink) => {
setTimeout(() => {
sink('some-new-value-for-event');
}, 1000);
})
.onValue((value) => console.log(value));
sink(new Bacon.Error('Died...'));

From anything else using Bacon.fromBinder

const subscribe = sink => sink(event);
const interval$ = (interval, value) => Bacon.fromBinder(sink => {
const id = setInterval(() => sink(value), interval);

return () => clearInterval(id);
});
interval$(1000, 'beer time!').onValue(value => console.log(value));

Using Bacon.never

stream.flatMap((text) => {
return (text != '') ? parseInt(text) : Bacon.never();
});

Subscribing to an Observable

Unsubscribing from an Observable

const unsubscribe = Bacon
.fromEvent(document.querySelector('#btn'), 'click')
.onValue(() => console.log('you just clicked on the button'));
// later on...
unsubscribe();

Useful links

Federico Knüssel

Written by

Front End Developer 👨‍💻 🇦🇺

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade