Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cycle.js
Who am I?
Arye Lukashevski
Software Engineer @ Wix.com
Intro
What’s Reactive programming?
Foo depends on Bar
But who owns the relationship?
Foo Bar
Proactive
• Foo invokes the action
• Bar has an API for interaction
• ‘Find usages’
Foo Bar
Proactive Passive
function	onC...
Foo Bar
Listenable Reactive
Foo.addSub('click',	()	=>	{	
	self.increment();	
});	
Bar
Reactive
• Foo emits events
• Bar su...
A B
1 0 =A1 + A2
2 0 0
What’s Reactive programming?
A B
1 2 =A1 + A2
2 3 0
What’s Reactive programming?
A B
1 2 5
2 3 0
What’s Reactive programming?
Cycle.JS
Fully Reactive framework
RxJS as stream handlers
DOMDriver
main(DOM){
return fn(DOM);
}
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Event
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Event
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Event
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Event
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Event<li/>…<li/>
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
<li/>…<li/>
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
<li/>…<li/>
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
<li/>…<li/>
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Cycle.js data flow
DOMDriver
main(DOM){
return fn(DOM);
}
Cycle.js data flow
Demo - Pizza topping selection
Demo light - Checkbox
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
let main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.target...
Driver
Intent$
model$
view$
Driver
Intent$
model$
view$
checked:	true,	
target:	input
Driver
Intent$
model$
view$
checked:	true,	
target:	input
Driver
Intent$
model$
view$
checked:	true,	
target:	input
Driver
Intent$
model$
view$
Driver
Intent$
model$
view$
true
Driver
Intent$
model$
view$true
Driver
Intent$
model$
view$
Driver
Intent$
model$
view$<input type=“checkbox” …>
Driver
Intent$
model$
view$
<input type=“checkbox” …>
Driver
Intent$
model$
view$
Driver
Intent$
model$
view$
Component
• Cycle app can be used as a component in a larger Cycle app
const main = ({DOM}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev.targ...
const main = ({DOM}) => ({DOM:...});
const Toggle = ({DOM}) => ({DOM:...});
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

























};
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});




















...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});

const toggleMushroo...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});

const toggleMushroo...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});

const toggleMushroo...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});

const toggleMushroo...
DOM.select('input')const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM});

...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM: DOM.select('.olives')}...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM: DOM.select('.olives')}...
const Toggle = ({DOM}) => ({DOM:...});
const main = ({DOM}) => {

const toggleOlives = Toggle({DOM: DOM.select(‘.olives')}...
Component I/O
const props$ = $.of({

name: 'Pineapple'

})
const props$ = $.of({

name: 'Pineapple'

})
const Toggle = ({DOM, }) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev => ev....
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
const Toggle = ({DOM, props$}) => {

const intent$ = DOM.select('input').events('change');

const model$ = intent$.map(ev ...
Next
• More Drivers: HTTP, Storage, React Native
• HTML to hyperscript
• cyc - Generator
• awesome-cyclers: Lots of info
Questions?
Thank you!
Upcoming SlideShare
Loading in …5
×

Cyclejs introduction

An Easy Cyclejs introduction

  • Login to see the comments

  • Be the first to like this

Cyclejs introduction

  1. 1. Cycle.js
  2. 2. Who am I? Arye Lukashevski Software Engineer @ Wix.com
  3. 3. Intro
  4. 4. What’s Reactive programming? Foo depends on Bar But who owns the relationship? Foo Bar
  5. 5. Proactive • Foo invokes the action • Bar has an API for interaction • ‘Find usages’ Foo Bar Proactive Passive function onClick() { Bar.increment(); } Foo
  6. 6. Foo Bar Listenable Reactive Foo.addSub('click', () => { self.increment(); }); Bar Reactive • Foo emits events • Bar subscribes • Bar changes its state
  7. 7. A B 1 0 =A1 + A2 2 0 0 What’s Reactive programming?
  8. 8. A B 1 2 =A1 + A2 2 3 0 What’s Reactive programming?
  9. 9. A B 1 2 5 2 3 0 What’s Reactive programming?
  10. 10. Cycle.JS Fully Reactive framework RxJS as stream handlers
  11. 11. DOMDriver main(DOM){ return fn(DOM); } Cycle.js data flow
  12. 12. DOMDriver main(DOM){ return fn(DOM); } Event Cycle.js data flow
  13. 13. DOMDriver main(DOM){ return fn(DOM); } Event Cycle.js data flow
  14. 14. DOMDriver main(DOM){ return fn(DOM); } Event Cycle.js data flow
  15. 15. DOMDriver main(DOM){ return fn(DOM); } Event Cycle.js data flow
  16. 16. DOMDriver main(DOM){ return fn(DOM); } Event<li/>…<li/> Cycle.js data flow
  17. 17. DOMDriver main(DOM){ return fn(DOM); } <li/>…<li/> Cycle.js data flow
  18. 18. DOMDriver main(DOM){ return fn(DOM); } <li/>…<li/> Cycle.js data flow
  19. 19. DOMDriver main(DOM){ return fn(DOM); } <li/>…<li/> Cycle.js data flow
  20. 20. DOMDriver main(DOM){ return fn(DOM); } Cycle.js data flow
  21. 21. DOMDriver main(DOM){ return fn(DOM); } Cycle.js data flow
  22. 22. DOMDriver main(DOM){ return fn(DOM); } Cycle.js data flow
  23. 23. Demo - Pizza topping selection
  24. 24. Demo light - Checkbox
  25. 25. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') });
  26. 26. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') });
  27. 27. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') });
  28. 28. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') });
  29. 29. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') });
  30. 30. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const view$ = model$.map(toggled =>
 
 
 
 
 return {DOM: view$};
  31. 31. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); .startWith(false); const view$ = model$.map(toggled =>
 
 
 
 
 return {DOM: view$};
  32. 32. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); .startWith(false); const view$ = model$.map(toggled =>
 
 
 
 
 return {DOM: view$};
  33. 33. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); .startWith(false); const view$ = model$.map(toggled =>
 
 
 
 
 return {DOM: view$};
  34. 34. let main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); const intent$ = DOM.select('input').events('change'); const model$ = intent$.map(ev => ev.target.checked)
 
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 let main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 }; Cycle.run(main, { DOM: makeDOMDriver('#app') }); .startWith(false); const view$ = model$.map(toggled =>
 
 
 
 
 return {DOM: view$};
  35. 35. Driver Intent$ model$ view$
  36. 36. Driver Intent$ model$ view$ checked: true, target: input
  37. 37. Driver Intent$ model$ view$ checked: true, target: input
  38. 38. Driver Intent$ model$ view$ checked: true, target: input
  39. 39. Driver Intent$ model$ view$
  40. 40. Driver Intent$ model$ view$ true
  41. 41. Driver Intent$ model$ view$true
  42. 42. Driver Intent$ model$ view$
  43. 43. Driver Intent$ model$ view$<input type=“checkbox” …>
  44. 44. Driver Intent$ model$ view$ <input type=“checkbox” …>
  45. 45. Driver Intent$ model$ view$
  46. 46. Driver Intent$ model$ view$
  47. 47. Component • Cycle app can be used as a component in a larger Cycle app
  48. 48. const main = ({DOM}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 };
  49. 49. const main = ({DOM}) => ({DOM:...});
  50. 50. const Toggle = ({DOM}) => ({DOM:...});
  51. 51. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 
 
 
 };
  52. 52. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 
 
 
 
 
 
 
 
 
 
 
 };
  53. 53. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); 
 
 
 
 
 
 
 
 
 
 };
  54. 54. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM,
 
 
 
 
 
 
 
 
 
 };
  55. 55. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM, (toggleOlives, toggleMushrooms) =>
 div([
 toggleOlives,
 toggleMushrooms
 ])
 ); 
 
 
 };
  56. 56. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM, (toggleOlives, toggleMushrooms) =>
 div([
 toggleOlives,
 toggleMushrooms
 ])
 ); return {
 DOM: view$
 }
 };
  57. 57. DOM.select('input')const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM, (toggleOlives, toggleMushrooms) =>
 div([
 toggleOlives,
 toggleMushrooms
 ])
 ); return {
 DOM: view$
 }
 };
  58. 58. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM: DOM.select('.olives')});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM, (toggleOlives, toggleMushrooms) =>
 div([
 toggleOlives,
 toggleMushrooms
 ])
 ); return {
 DOM: view$
 }
 };
  59. 59. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM: DOM.select('.olives')});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM, (toggleOlives, toggleMushrooms) =>
 div([
 div('.olives', [toggleOlives]),
 toggleMushrooms
 ])
 ); return {
 DOM: view$
 }
 };
  60. 60. const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM: DOM.select(‘.olives')}); const toggleMushrooms = Toggle({DOM: DOM.select('.mushrooms')});
 const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM,
 (toggleOlives, toggleMushrooms) =>
 div([
 div('.olives', [toggleOlives]),
 div('.mushrooms', [toggleMushrooms])
 ])
 );
 return {
 DOM: view$
 }
 };
  61. 61. Component I/O
  62. 62. const props$ = $.of({
 name: 'Pineapple'
 })
  63. 63. const props$ = $.of({
 name: 'Pineapple'
 })
  64. 64. const Toggle = ({DOM, }) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$,
 (toggled, ) =>
 div([input({type: 'checkbox'}),
 ,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 
 }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  65. 65. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, 
 (toggled, ) =>
 div([input({type: 'checkbox'}),
 ,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 
 }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  66. 66. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, props$,
 (toggled, ) =>
 div([input({type: 'checkbox'}),
 ,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 
 }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  67. 67. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, props$,
 (toggled, props) =>
 div([input({type: 'checkbox'}),
 ,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 
 }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  68. 68. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, props$,
 (toggled, props) =>
 div([input({type: 'checkbox'}),
 props.name,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 
 }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  69. 69. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, props$,
 (toggled, props) =>
 div([input({type: 'checkbox'}),
 props.name,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 value$: model$ }
 }; const props$ = $.of({
 name: 'Pineapple'
 })
  70. 70. const Toggle = ({DOM, props$}) => {
 const intent$ = DOM.select('input').events('change');
 const model$ = intent$.map(ev => ev.target.checked).startWith(false);
 const view$ = $.combineLatest(model$, props$,
 (toggled, props) =>
 div([input({type: 'checkbox'}),
 props.name,
 p(toggled ? 'ON' : 'off')]));
 return {
 DOM: view$, 
 value$: model$ }
 }; const props$ = $.of({
 name: 'Pineapple'
 }) toggleOlives.value$.map(...)
  71. 71. Next • More Drivers: HTTP, Storage, React Native • HTML to hyperscript • cyc - Generator • awesome-cyclers: Lots of info
  72. 72. Questions?
  73. 73. Thank you!

×