Arye Lukashevski, profile picture
Uploaded byArye Lukashevski
1,434 views

Cyclejs introduction

Cycle.js is a reactive JavaScript framework that uses RxJS streams to manage data flow in applications. It follows a unidirectional data flow model where drivers like DOMDriver handle interactions that produce events, which update models that then produce views. The document demonstrates how Cycle.js can be used to build a simple toggle component and compose it into a larger application to manage multiple toggled states through streams.

Embed presentation

Download to read offline
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 onClick() { Bar.increment(); } Foo
Foo Bar Listenable Reactive Foo.addSub('click', () => { self.increment(); }); Bar Reactive • Foo emits events • Bar subscribes • Bar changes its state
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.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}) => {
 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') });
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') });
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') });
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') });
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$};
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$};
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$};
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$};
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$};
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.target.checked)
 .startWith(false);
 const view$ = model$.map(toggled =>
 div([
 input({type: 'checkbox'}), 'Toggle me',
 p(toggled ? 'ON' : 'off')
 ]));
 return {DOM: view$};
 };
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 toggleMushrooms = Toggle({DOM}); 
 
 
 
 
 
 
 
 
 
 };
const Toggle = ({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM,
 
 
 
 
 
 
 
 
 
 };
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
 ])
 ); 
 
 
 };
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$
 }
 };
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$
 }
 };
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$
 }
 };
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$
 }
 };
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$
 }
 };
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.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'
 })
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'
 })
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'
 })
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'
 })
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'
 })
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'
 })
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(...)
Next • More Drivers: HTTP, Storage, React Native • HTML to hyperscript • cyc - Generator • awesome-cyclers: Lots of info
Questions?
Thank you!

More Related Content

PDF
Symfony CoP: Form component
bySamuel ROZE
 
PDF
How I started to love design patterns
bySamuel ROZE
 
PDF
CQRS and Event Sourcing in a Symfony application
bySamuel ROZE
 
PPTX
AngularJS $Provide Service
byEyal Vardi
 
PDF
Decoupling the Ulabox.com monolith. From CRUD to DDD
byAleix Vergés
 
PDF
jQuery: out with the old, in with the new
byRemy Sharp
 
PDF
Intro programacion funcional
byNSCoder Mexico
 
PDF
前端MVC 豆瓣说
byTing Lv
 
Symfony CoP: Form component
bySamuel ROZE
 
How I started to love design patterns
bySamuel ROZE
 
CQRS and Event Sourcing in a Symfony application
bySamuel ROZE
 
AngularJS $Provide Service
byEyal Vardi
 
Decoupling the Ulabox.com monolith. From CRUD to DDD
byAleix Vergés
 
jQuery: out with the old, in with the new
byRemy Sharp
 
Intro programacion funcional
byNSCoder Mexico
 
前端MVC 豆瓣说
byTing Lv
 

What's hot

PDF
Silex meets SOAP & REST
byHugo Hamon
 
PDF
Design how your objects talk through mocking
byKonstantin Kudryashov
 
PDF
Design Patterns avec PHP 5.3, Symfony et Pimple
byHugo Hamon
 
KEY
Advanced jQuery
bysergioafp
 
PDF
Mulberry: A Mobile App Development Toolkit
byRebecca Murphey
 
PDF
AngularJs
byHossein Baghayi
 
PDF
A New Baseline for Front-End Devs
byRebecca Murphey
 
PPTX
Bacbkone js
byАртём Курапов
 
PDF
PHPUnit でよりよくテストを書くために
byYuya Takeyama
 
PDF
How I started to love design patterns
bySamuel ROZE
 
PPT
Building Robust jQuery Plugins
byJörn Zaefferer
 
PDF
How Kris Writes Symfony Apps
byKris Wallsmith
 
PPTX
AngularJS Animations
byEyal Vardi
 
PDF
Introduction to CQRS and Event Sourcing
bySamuel ROZE
 
PPTX
Presentation1
byRahadyan Gusti
 
PPTX
Template syntax in Angular 2.0
byEyal Vardi
 
PDF
Building Large jQuery Applications
byRebecca Murphey
 
PDF
Mocking Demystified
byMarcello Duarte
 
PDF
Functionality Focused Code Organization
byRebecca Murphey
 
PDF
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
byAlessandro Nadalin
 
Silex meets SOAP & REST
byHugo Hamon
 
Design how your objects talk through mocking
byKonstantin Kudryashov
 
Design Patterns avec PHP 5.3, Symfony et Pimple
byHugo Hamon
 
Advanced jQuery
bysergioafp
 
Mulberry: A Mobile App Development Toolkit
byRebecca Murphey
 
AngularJs
byHossein Baghayi
 
A New Baseline for Front-End Devs
byRebecca Murphey
 
Bacbkone js
byАртём Курапов
 
PHPUnit でよりよくテストを書くために
byYuya Takeyama
 
How I started to love design patterns
bySamuel ROZE
 
Building Robust jQuery Plugins
byJörn Zaefferer
 
How Kris Writes Symfony Apps
byKris Wallsmith
 
AngularJS Animations
byEyal Vardi
 
Introduction to CQRS and Event Sourcing
bySamuel ROZE
 
Presentation1
byRahadyan Gusti
 
Template syntax in Angular 2.0
byEyal Vardi
 
Building Large jQuery Applications
byRebecca Murphey
 
Mocking Demystified
byMarcello Duarte
 
Functionality Focused Code Organization
byRebecca Murphey
 
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
byAlessandro Nadalin
 

Similar to Cyclejs introduction

PPTX
Getting Reactive with Cycle.js and xstream
bySteve Lee
 
PPTX
Getting Reactive with CycleJS and XStream
byTechExeter
 
PDF
Cycle.js: Functional and Reactive
byEugene Zharkov
 
PDF
Reduxing UI: Borrowing the Best of Web to Make Android Better
byChristina Lee
 
PDF
Mobx Internals
by500Tech
 
PDF
React state management with Redux and MobX
byDarko Kukovec
 
PPTX
ReactJS.NET - Fast and Scalable Single Page Applications
byRick Beerendonk
 
PDF
React JS and why it's awesome
byAndrew Hull
 
PDF
React for Dummies
byMitch Chen
 
PDF
Functional Web Development
byFITC
 
PDF
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
byCodemotion
 
PDF
Workshop 19: ReactJS Introduction
byVisual Engineering
 
PDF
React.js
byŁukasz Kużyński
 
PDF
Reactive Programming - ReactFoo 2020 - Aziz Khambati
byAziz Khambati
 
PDF
Corso su ReactJS
byLinkMe Srl
 
PDF
Tech Talk on ReactJS
byAtlogys Technical Consulting
 
PDF
Content-Driven Apps with React
byNetcetera
 
PPTX
JavaScript patterns chapter 8 of mine
byChien-Wei Huang
 
PPTX
React js - The Core Concepts
byDivyang Bhambhani
 
PDF
Reactjs workshop (1)
byAhmed rebai
 
Getting Reactive with Cycle.js and xstream
bySteve Lee
 
Getting Reactive with CycleJS and XStream
byTechExeter
 
Cycle.js: Functional and Reactive
byEugene Zharkov
 
Reduxing UI: Borrowing the Best of Web to Make Android Better
byChristina Lee
 
Mobx Internals
by500Tech
 
React state management with Redux and MobX
byDarko Kukovec
 
ReactJS.NET - Fast and Scalable Single Page Applications
byRick Beerendonk
 
React JS and why it's awesome
byAndrew Hull
 
React for Dummies
byMitch Chen
 
Functional Web Development
byFITC
 
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
byCodemotion
 
Workshop 19: ReactJS Introduction
byVisual Engineering
 
React.js
byŁukasz Kużyński
 
Reactive Programming - ReactFoo 2020 - Aziz Khambati
byAziz Khambati
 
Corso su ReactJS
byLinkMe Srl
 
Tech Talk on ReactJS
byAtlogys Technical Consulting
 
Content-Driven Apps with React
byNetcetera
 
JavaScript patterns chapter 8 of mine
byChien-Wei Huang
 
React js - The Core Concepts
byDivyang Bhambhani
 
Reactjs workshop (1)
byAhmed rebai
 

Recently uploaded

PDF
Chemical Hazards at Workplace – Types, Properties & Exposure Routes, CORE-EHS
byCORE EHS
 
PDF
engineering management chapter 5 ppt presentation
byericaangelatoledo06
 
PPTX
Fitting Infiltration Models to Infiltration using Excel (1).pptx
byTomNickoRivera1
 
PPT
Momentum and collisions in physics or engineering
byazizrahmanhakimi
 
PPTX
Basic Volume Mass Relationship and unit weight as function of volumetric wate...
byMahmoodKhalid11
 
PPTX
Value engineering and cost analysis with case study
byhp9879098082
 
PPTX
Presentation-WPS Office.pptx afgouvhyhgfccf
byEndaleTimerga
 
PDF
Decision-Support-Systems-and-Decision-Making-Processes.pdf
byPatankarNikhil
 
PDF
Shear Strength of Soil (Direct shear test).pdf
byMahmoodKhalid11
 
PDF
Ericsson 6230 Training Module Document.pdf
byMd Bellal Hossain
 
PDF
Plasticity and Structure of Soil/Atterberg Limits.pdf
byMahmoodKhalid11
 
PDF
AWS Re:Invent 2025 Recap by FivexL - Guilherme, Vladimir, Andrey
byAndrey Devyatkin
 
PPTX
Unit 1_Importance of modelling(Object oriented concepts).pptx
byVidyaranichougule
 
PPTX
Day 3 Module 5_Optical fiber Network (operation and management).pptx
bySachayaG
 
PDF
NS unit wise unit wise 1 -5 so prepare,.
bykumaransudhan1512
 
PPTX
operating_systems.pptx m,nm,nm,n,nm,n,nm,nikl
bykirthigaaiml
 
PDF
Chad Ayach - An Accomplished Mechanical Engineer
byChad Ayach
 
PDF
Applications of AI in Civil Engineering - Dr. Rohan Dasgupta
byRohan Dasgupta
 
PDF
Rajesh Prasad- Brief Profile with educational, professional highlights
byRajesh Prasad
 
PDF
PROBLEM SLOVING AND PYTHON PROGRAMMING UNIT 3.pdf
byA R SIVANESH M.E., QIP-PG (Cyber Security)., (Ph.D)
 
Chemical Hazards at Workplace – Types, Properties & Exposure Routes, CORE-EHS
byCORE EHS
 
engineering management chapter 5 ppt presentation
byericaangelatoledo06
 
Fitting Infiltration Models to Infiltration using Excel (1).pptx
byTomNickoRivera1
 
Momentum and collisions in physics or engineering
byazizrahmanhakimi
 
Basic Volume Mass Relationship and unit weight as function of volumetric wate...
byMahmoodKhalid11
 
Value engineering and cost analysis with case study
byhp9879098082
 
Presentation-WPS Office.pptx afgouvhyhgfccf
byEndaleTimerga
 
Decision-Support-Systems-and-Decision-Making-Processes.pdf
byPatankarNikhil
 
Shear Strength of Soil (Direct shear test).pdf
byMahmoodKhalid11
 
Ericsson 6230 Training Module Document.pdf
byMd Bellal Hossain
 
Plasticity and Structure of Soil/Atterberg Limits.pdf
byMahmoodKhalid11
 
AWS Re:Invent 2025 Recap by FivexL - Guilherme, Vladimir, Andrey
byAndrey Devyatkin
 
Unit 1_Importance of modelling(Object oriented concepts).pptx
byVidyaranichougule
 
Day 3 Module 5_Optical fiber Network (operation and management).pptx
bySachayaG
 
NS unit wise unit wise 1 -5 so prepare,.
bykumaransudhan1512
 
operating_systems.pptx m,nm,nm,n,nm,n,nm,nikl
bykirthigaaiml
 
Chad Ayach - An Accomplished Mechanical Engineer
byChad Ayach
 
Applications of AI in Civil Engineering - Dr. Rohan Dasgupta
byRohan Dasgupta
 
Rajesh Prasad- Brief Profile with educational, professional highlights
byRajesh Prasad
 
PROBLEM SLOVING AND PYTHON PROGRAMMING UNIT 3.pdf
byA R SIVANESH M.E., QIP-PG (Cyber Security)., (Ph.D)
 

Cyclejs introduction

  • 1.
  • 2.
    Who am I? AryeLukashevski Software Engineer @ Wix.com
  • 3.
  • 4.
    What’s Reactive programming? Foodepends on Bar But who owns the relationship? Foo Bar
  • 5.
    Proactive • Foo invokesthe action • Bar has an API for interaction • ‘Find usages’ Foo Bar Proactive Passive function onClick() { Bar.increment(); } Foo
  • 6.
  • 7.
    A B 1 0=A1 + A2 2 0 0 What’s Reactive programming?
  • 8.
    A B 1 2=A1 + A2 2 3 0 What’s Reactive programming?
  • 9.
    A B 1 25 2 3 0 What’s Reactive programming?
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
    Demo - Pizzatopping selection
  • 24.
    Demo light -Checkbox
  • 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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
    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.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
    Component • Cycle appcan be used as a component in a larger Cycle app
  • 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.
    const main =({DOM}) => ({DOM:...});
  • 50.
    const Toggle =({DOM}) => ({DOM:...});
  • 51.
    const Toggle =({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 
 
 
 
 
 
 
 
 
 
 
 
 };
  • 52.
    const Toggle =({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 
 
 
 
 
 
 
 
 
 
 
 };
  • 53.
    const Toggle =({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); 
 
 
 
 
 
 
 
 
 
 };
  • 54.
    const Toggle =({DOM}) => ({DOM:...}); const main = ({DOM}) => {
 const toggleOlives = Toggle({DOM});
 const toggleMushrooms = Toggle({DOM}); const view$ = $.combineLatest(toggleOlives.DOM, toggleMushrooms.DOM,
 
 
 
 
 
 
 
 
 
 };
  • 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.
    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.
    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.
    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.
    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.
    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.
  • 62.
    const props$ =$.of({
 name: 'Pineapple'
 })
  • 63.
    const props$ =$.of({
 name: 'Pineapple'
 })
  • 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.
    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.
    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.
    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.
    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.
    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.
    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.
    Next • More Drivers:HTTP, Storage, React Native • HTML to hyperscript • cyc - Generator • awesome-cyclers: Lots of info
  • 72.
  • 73.