SlideShare a Scribd company logo

Cyclejs introduction

Arye Lukashevski, profile picture
Arye Lukashevski

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.

Engineering
1 of 73
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
Samuel ROZE
 
PDF
How I started to love design patterns
Samuel ROZE
 
PDF
CQRS and Event Sourcing in a Symfony application
Samuel ROZE
 
PPTX
AngularJS $Provide Service
Eyal Vardi
 
PDF
Decoupling the Ulabox.com monolith. From CRUD to DDD
Aleix Vergés
 
PDF
jQuery: out with the old, in with the new
Remy Sharp
 
PDF
Intro programacion funcional
NSCoder Mexico
 
PDF
前端MVC 豆瓣说
Ting Lv
 
Symfony CoP: Form component
Samuel ROZE
 
How I started to love design patterns
Samuel ROZE
 
CQRS and Event Sourcing in a Symfony application
Samuel ROZE
 
AngularJS $Provide Service
Eyal Vardi
 
Decoupling the Ulabox.com monolith. From CRUD to DDD
Aleix Vergés
 
jQuery: out with the old, in with the new
Remy Sharp
 
Intro programacion funcional
NSCoder Mexico
 
前端MVC 豆瓣说
Ting Lv
 

What's hot (20)

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

Similar to Cyclejs introduction (20)

PPTX
Getting Reactive with Cycle.js and xstream
Steve Lee
 
PPTX
Getting Reactive with CycleJS and XStream
TechExeter
 
PDF
Cycle.js: Functional and Reactive
Eugene Zharkov
 
PDF
Reduxing UI: Borrowing the Best of Web to Make Android Better
Christina Lee
 
PDF
Mobx Internals
500Tech
 
PDF
React state management with Redux and MobX
Darko Kukovec
 
PPTX
ReactJS.NET - Fast and Scalable Single Page Applications
Rick Beerendonk
 
PDF
React JS and why it's awesome
Andrew Hull
 
PDF
React for Dummies
Mitch Chen
 
PDF
Functional Web Development
FITC
 
PDF
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
Codemotion
 
PDF
Workshop 19: ReactJS Introduction
Visual Engineering
 
PDF
React.js
Łukasz Kużyński
 
PDF
Reactive Programming - ReactFoo 2020 - Aziz Khambati
Aziz Khambati
 
PDF
Corso su ReactJS
LinkMe Srl
 
PDF
Tech Talk on ReactJS
Atlogys Technical Consulting
 
PDF
Content-Driven Apps with React
Netcetera
 
PPTX
JavaScript patterns chapter 8 of mine
Chien-Wei Huang
 
PPTX
React js - The Core Concepts
Divyang Bhambhani
 
PDF
Reactjs workshop (1)
Ahmed rebai
 
Getting Reactive with Cycle.js and xstream
Steve Lee
 
Getting Reactive with CycleJS and XStream
TechExeter
 
Cycle.js: Functional and Reactive
Eugene Zharkov
 
Reduxing UI: Borrowing the Best of Web to Make Android Better
Christina Lee
 
Mobx Internals
500Tech
 
React state management with Redux and MobX
Darko Kukovec
 
ReactJS.NET - Fast and Scalable Single Page Applications
Rick Beerendonk
 
React JS and why it's awesome
Andrew Hull
 
React for Dummies
Mitch Chen
 
Functional Web Development
FITC
 
Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019
Codemotion
 
Workshop 19: ReactJS Introduction
Visual Engineering
 
React.js
Łukasz Kużyński
 
Reactive Programming - ReactFoo 2020 - Aziz Khambati
Aziz Khambati
 
Corso su ReactJS
LinkMe Srl
 
Tech Talk on ReactJS
Atlogys Technical Consulting
 
Content-Driven Apps with React
Netcetera
 
JavaScript patterns chapter 8 of mine
Chien-Wei Huang
 
React js - The Core Concepts
Divyang Bhambhani
 
Reactjs workshop (1)
Ahmed rebai
 
Ad

Recently uploaded (20)

DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
AYUSHMANAV
 
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
smceramu
 
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PRIZ Guru
 
PPTX
UNIT 4 Total Quality Management .pptx
gokuld13012005
 
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
AinieButt1
 
PPTX
Geodesy 1.pptx...............................................
abhi1361yadav
 
PDF
PPT on Performance Review to get promotions
prashant593122
 
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
mojeeburahmanwardak
 
PDF
Digital Logic Computer Design lecture notes
CHINNASUNKAIAH1
 
PPTX
Sustainable Sites - Green Building Construction
mhdumerali
 
PPTX
OOP with Java - Java Introduction (Basics)
Rashmi T V
 
PPTX
bas. eng. economics group 4 presentation 1.pptx
kiribakimoses1993
 
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Educational Group Mohammad Farshadian
 
PPTX
Construction Project Organization Group 2.pptx
vj5agdales
 
DOCX
573137875-Attendance-Management-System-original
AYUSHMANAV
 
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
PDF
Embodied AI: Ushering in the Next Era of Intelligent Systems
Yu Huang
 
PDF
R24 SURVEYING LAB MANUAL for civil enggi
MNANDITHACIVILSTAFF
 
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
MehrabTaseenTalukder
 
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
ShriNRPrasad
 
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
AYUSHMANAV
 
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
smceramu
 
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PRIZ Guru
 
UNIT 4 Total Quality Management .pptx
gokuld13012005
 
Model Code of Practice - Construction Work - 21102022 .pdf
AinieButt1
 
Geodesy 1.pptx...............................................
abhi1361yadav
 
PPT on Performance Review to get promotions
prashant593122
 
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
mojeeburahmanwardak
 
Digital Logic Computer Design lecture notes
CHINNASUNKAIAH1
 
Sustainable Sites - Green Building Construction
mhdumerali
 
OOP with Java - Java Introduction (Basics)
Rashmi T V
 
bas. eng. economics group 4 presentation 1.pptx
kiribakimoses1993
 
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
Educational Group Mohammad Farshadian
 
Construction Project Organization Group 2.pptx
vj5agdales
 
573137875-Attendance-Management-System-original
AYUSHMANAV
 
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Chandra Kumar S
 
Embodied AI: Ushering in the Next Era of Intelligent Systems
Yu Huang
 
R24 SURVEYING LAB MANUAL for civil enggi
MNANDITHACIVILSTAFF
 
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
MehrabTaseenTalukder
 
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
ShriNRPrasad
 

Cyclejs introduction

  • 2. Who am I? Arye Lukashevski Software Engineer @ Wix.com
  • 4. What’s Reactive programming? Foo depends on Bar But who owns the relationship? Foo Bar
  • 5. Proactive • Foo invokes the action • Bar has an API for interaction • ‘Find usages’ Foo Bar Proactive Passive function onClick() { Bar.increment(); } Foo
  • 6. Foo Bar Listenable Reactive Foo.addSub('click', () => { self.increment(); }); Bar Reactive • Foo emits events • Bar subscribes • Bar changes its state
  • 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 2 5 2 3 0 What’s Reactive programming?
  • 23. Demo - Pizza topping 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$};
  • 47. Component • Cycle app can 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$
 }
 };
  • 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