SlideShare a Scribd company logo
Reactive programming in
ClojureScript using React.js wrappers
Konrad Szydlo @ Lambda Days, Krakow, 19 February 2016
State of the web
development
More and more complex apps
Solving elaborate problems
Myriad of web browsers and devices
Performance and resources
Plain vanilla JavaScript
JQuery
MVC
React.js
What does it mean
reactive?
Erik Meijer - What does it mean to be Reactive?
Lots of definitions
Difficult to agree
Components reacting to events and changing
state
Apples
Oranges
Grapes
Add pineapple
But how exactly?
Solution #1
Insert a new list item
Find the right place
Solution #2
Throw out the entire list and rebuild it
Rendering large scale amounts of DOM is slow
Most JS frameworks help to mitigate problem #1
Make DOM easier to navigate
Tie element to a controller keeping it up to date
React solves problem #2
Virtual DOM (two copies)
Original
Updated
Compare new virtual DOM with previous
Render only bits that have changed
Pretending to re-render entire page is fast
Easier to reason about
V in MVC
Interfaces with changing data
Can combine with frameworks e.g. AngularJS
Flux architecture
Once-directional data flow
Action → Dispatcher → Store → View
JavaScript sucks
this
Verbose syntax
Confusing, inconsistent automatic operator
conversions
NaN
Global variables by default
etc.
We need JavaScript
JS is (almost) everywhere
Runtime is improving
Web Sockets
WebRTC
Canvas
Push notifications
Build “better” language on top of JS
1 + 2 // simple, clear
(+ 1 2) ; OMG! So confusing
Clearly programmers aren't that smart as some think
ClojureScript
Modern LISP
Immutable data structures
State vs Identity
REPL
Transducers
core.async
And much much more
ClojureScript + React.js
Pure React.js is not idiomatic in ClojureScript
Leverage immutable data structures
ClojureScript React.js wrappers on steroids
Rum
Not a framework but a library
Om, Reagent, Quiescent have built-in component
behaviour model
Rum
Two-level API
Rum
Define your component and render it
(rum/defc name doc-string? [params*] render-
body+)
(rum/defc h1 [text]
[:h1 text])
(rum/mount (h1 "important") js/document.body)
Simple component not reactive
Agnostic of data storage and behaviour model
Use mixins to control component's behaviour
Pre-built component mixins
Mimic behaviour of other wrappers
(rum/defc name doc-string? [< mixins+]?
[params*] render-body+)
Static mixin
Checks if args have changed
Avoids re-rendering if they are the same
(rum/defc h1 < rum/static [text]
[:h1 text])
(rum/mount (h1 "important text") body)
(rum/mount (h1 "important text") body) ;; render
won’t be called
(rum/mount (h1 "important") body) ;; this will
cause re-rendering
Local Mixin
Rum local
Per-component local state
(rum/defcs make-service < (rum/local "") [state service]
(let [local (:rum/local state)]
[:p {:class @local
:on-click (fn [_] (swap! local toggle-class service))}
(:name service)
[:b (str " £" (:price service))]]))
(defn toggle-class [current-class service]
(let [price (:price service)]
(if (= current-class "active")
(do (swap! order-form-total - price)
"")
(do (swap! order-form-total + price)
"active"))))
Reactive mixin
Creates “reactive” component
Tracks references to data
Auto-updates when value stored changes
Reactive mixin is like Reagent wrapper
(def order-form-total (atom 0))
(rum/defc total-sum < rum/reactive []
[:p {:id "total"} (str "Total: £" (rum/react order-form-total))])
(defn toggle-class [current-class service]
(let [price (:price service)]
(if (= current-class "active")
(do (swap! order-form-total - price)
"")
(do (swap! order-form-total + price)
"active"))))
Cursored mixin
Interface to sub-trees inside an atom
Like an Om wrapper
(def state (atom {:app {
:settings {:header {:colour "#cc3333" }}}}))
(rum/defc label < rum/cursored [colour text]
[:label {:style {:colour @colour}} text])
(rum/defc body < rum/cursored [state]
[:div
(label (rum/cursor state [:app :settings :headers :colour])
"First label" )])
(swap! state-cursor assoc-in [:app :settings :header :colour]
"#cc56bb")
One global state
Atomic swaps
Always consistent
Easy to implement undo – reset to previous
state
Serialize app state and send it over the wire
Custom mixin
Use React.js life-cycle functions
Will mount
Did mount
Should update
Will unmount
Scrolling mixin
(defn scroll-view [height]
{:did-mount (fn [state]
(if-not (::scrolled state)
(do
(set-scroll-top! height)
(assoc state ::scrolled true))
state))
:transfer-state (fn [old new]
(assoc new ::scrolled (::scrolled old)
::with-scroll-view true))})
Build new mixins easily
Mix and match different mixins
The curious case of Om
The good, the bad and the future
Root UI is given root cursor
Passes sub-trees of cursors to its sub-components
{:list {:title "My list:" :colour :brown My list:
:items
{:item_1 {:text "text1" :colour :blue} - text1
:item_2 {:text "text2" :colour :green} - text2
:item_3 {:text "text3" :colour :red}}}} - text3
Case #1
UI cross-cutting concerns?
Dashboard with a list that can be expanded,
shrank
Save the list presentation options to general
settings?
Cursor-oriented architecture requires you to
structure app state as a tree (matching UI)
Quite often your data are not a tree
Changing item's text is easy
Case #2
Deleting an item should be easy too, right?
Does delete button/option belong to an item or a
list?
Deleting an item requires list manipulation
Rum is flexible use it if you can
Enter Om.next
New version of Om
Actually a reboot
Experience of the last few years
Inspired by:
Facebook's Relay
Netflix's Falcor
Cognitect's Datomic
Display date of past purchases of certain item
{:current-user
{:purchases
[{:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous {:id 140
:product-name "organic rice"
:date #inst "2015-12-14T17:05:58.144-00:00"
:previous {:id 136
:product-name "organic rice"
:date #inst "2015-12-10T17:05:13.512-00:00"
:previous ; and so on... }}}
{:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous {:id 141
:product-name "soy milk"
:date #inst "2015-12-15T17:05:36.797-00:00"
:previous {:id 128
:product-name "soy milk"
:date #inst "2015-12-07T17:04:51.124-00:00"
:previous ; and so on... }}}]}}
{:current-user {:recent-purchases [[:purchase-id 146]
[:purchase-id 145]]}
:purchased-items {146 {:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous [:purchase-id 144]}
145 {:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous [:purchase-id 143]}
144 {:id 144
:product-name "organic rice"
:date #inst "2015-12-17T17:05:58.144-00:00"
:previous [:purchase-id 141]}
143 {:id 143
:product-name "soy milk"
:date #inst "2015-12-17T17:05:36.797-00:00"
:previous [:purchase-id 138]}
;; and so on... }}
In Om.next components define a query to data
they need
Cursor navigates a tree, query can navigate a
graph
[{:current-user [{:recent-purchases [{:previous [:date]}]}]}]
{:current-user
{:recent-purchases
[{:previous {:date #inst "2015-12-17T17:05:58.144-00:00"}}
{:previous {:date #inst "2015-12-17T17:05:36.797-00:00"}}]}}
{:current-user {:recent-purchases [[:purchase-id 146]
[:purchase-id 145]]}
:purchased-items {146 {:id 146
:product-name "organic rice"
:date #inst "2015-12-17T17:13:59.167-00:00"
:previous [:purchase-id 144]}
145 {:id 145
:product-name "soy milk"
:date #inst "2015-12-17T17:09:25.961-00:00"
:previous [:purchase-id 143]}
144 {:id 144
:product-name "organic rice"
:date #inst "2015-12-17T17:05:58.144-00:00"
:previous [:purchase-id 141]}
143 {:id 143
:product-name "soy milk"
:date #inst "2015-12-17T17:05:36.797-00:00"
:previous [:purchase-id 138]}
;; and so on... }}
{:current-user
{:recent-purchases
[{:previous {:date #inst "2015-12-17T17:05:58.144-00:00"}}
{:previous {:date #inst "2015-12-17T17:05:36.797-00:00"}}]}}
Om.next normalizes data* you have into one you
expect
* with a little help from you
{:list/one [{:product-name "soy milk" :price 10}
{:product-name "eggs" :price 22}
{:product-name "juice" :price 26}]
:list/two [{:product-name "eggs" :price 22 :discount 7}
{:product-name "apples" :price 8}
{:product-name "cereals" :price 37 :discount 15}]}
(defui Product
static om/Ident
(ident [this {:keys [product-name]}]
[:product/by-name product-name])
static om/IQuery
(query [this]
'[:name :price :discount])
Object
(render [this]
;; ... elided ...))
(d{:list/one
[[:product/by-name "soy milk"]
[:product/by-name "eggs"]
[:product/by-name "juice"]],
:list/two
[[:product/by-name "eggs"]
[:product/by-name "apples"]
[:product/by-name "cereals"]],
:product/by-name
{"soy milk" {:name "soy milk", :price 10},
"eggs" {:name "eggs", :price 22, :discount 7},
"juice" {:name "juice", :price 26},
"apples" {:name "apples", :price 8},
"cereals" {:name "cereals", :price 37, :discount 15}}
Store data the way you want and let Om.next
convert data to match your UI
Om.next
Currently in alpha stage
Production ready in a couple of months
Datascript
Because good things come in pairs
Nikita Prokopov creator of Rum and Datascript
Immutable in-memory database
Datalog as a query engine
Central, uniform approach to manage all
application state
Schemaless DB < Datascript < Relational schema
Data already normalized
{:db/id #db/id[:db.part/db]
:db/ident :product/name
:db/valueType :db.type/string
:db/cardinality :db.cardinality/one
:db/unique :db.unique/identity
:db/doc "Product's name"}
{:db/id #db/id[:db.part/db]
:db/ident :product/price
:db/valueType :db.type/number
:db/cardinality :db.cardinality/one
:db/doc "Product's price"}
Datalog query
[:find ?name ?price ?discount
:where
[?p :product/name ?name]
[?p :product/price ?price]
[?p :product/discount ?discount]]
(defui Product
static om/Ident
(ident [this {:keys [product-name]}]
[:product/by-name product-name])
static om/IQuery
(query [this]
'[:name :price :discount])
Object
(render [this]
;; ... elided ...))
Find specific item
[:find ?name ?price ?discount
:in $ ?name
:where
[?p :product/name ?name]
[?p :product/price ?price]
[?p :product/discount ?discount]]
(rum/defc product-item [db name]
(let [item (d/q '[:find ?name ?price ?discount
:in $ ?name
:where
[?p :product/name ?name]
[?p :product/price ?price]
[?p :product/discount ?discount]]
db name)]
(when item
[:p name "$" (:product/price item) "discount $" (:product/discount item)])))
Write components that depend on return values
of queries
Database as a value
Summary
React.js is interesting – give it a go
ClojureScript is interesting too
React.js + ClojureScript = awesome
Interesting wrappers for React.js in ClojureScript
with some cool technologies
Questions???
Tweet me: @ryujinkony
Konrad Szydlo
github
retailic.com
Retailic
Retailic helps retail to draw business conclusions
from consumer behaviour and develop
corresponding software solutions.
Resources
https://www.youtube.com/watch?v=sTSQlYX5DU0
Eric Meijer
https://medium.com/@carloM/reactive-programming
-with-kefir-js-and-react-a0e8bb3af636#.td9mdlfz
r
Reactive programming with react.js
http://blog.ractivejs.org/posts/whats-the-differen
ce-between-react-and-ractive/
React.js vs Ractive
http://www.funnyant.com/reactjs-what-is-it/
Resources
https://www.destroyallsoftware.com/talks/wat
https://github.com/active-group/reacl
https://github.com/reagent-project/reagent
https://github.com/tonsky/rum
https://github.com/tonsky/datascript
https://github.com/omcljs/om/wiki

More Related Content

What's hot

Cassandra Summit 2015
Cassandra Summit 2015Cassandra Summit 2015
Cassandra Summit 2015
jbellis
 
Cassandra summit keynote 2014
Cassandra summit keynote 2014Cassandra summit keynote 2014
Cassandra summit keynote 2014
jbellis
 
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy NguyenGrokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
Huy Nguyen
 
Lift Framework
Lift FrameworkLift Framework
Lift Framework
Jeffrey Groneberg
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
DreamLab
 
Cassandra 2.1
Cassandra 2.1Cassandra 2.1
Cassandra 2.1jbellis
 
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bisReactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
DroidConTLV
 
Using Aggregation for Analytics
Using Aggregation for Analytics Using Aggregation for Analytics
Using Aggregation for Analytics
MongoDB
 
Laporan tugas mata kuliah pbo yg ke 3
Laporan tugas mata kuliah pbo yg ke 3Laporan tugas mata kuliah pbo yg ke 3
Laporan tugas mata kuliah pbo yg ke 3Helmita putri
 
DOT NET LAB PROGRAM PERIYAR UNIVERSITY
DOT NET LAB PROGRAM PERIYAR UNIVERSITY DOT NET LAB PROGRAM PERIYAR UNIVERSITY
DOT NET LAB PROGRAM PERIYAR UNIVERSITY
GOKUL SREE
 
Design Patterns in Micro-services architectures & Gilmour
Design Patterns in Micro-services architectures & GilmourDesign Patterns in Micro-services architectures & Gilmour
Design Patterns in Micro-services architectures & Gilmour
Piyush Verma
 
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
Ortus Solutions, Corp
 
Web 5 | JavaScript Events
Web 5 | JavaScript EventsWeb 5 | JavaScript Events
Web 5 | JavaScript Events
Mohammad Imam Hossain
 
MySQL 8.0 Preview: What Is Coming?
MySQL 8.0 Preview: What Is Coming?MySQL 8.0 Preview: What Is Coming?
MySQL 8.0 Preview: What Is Coming?
Gabriela Ferrara
 
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case StudyMongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
MongoDB
 
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQLPGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
PGConf APAC
 
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
MongoDB
 
Web 6 | JavaScript DOM
Web 6 | JavaScript DOMWeb 6 | JavaScript DOM
Web 6 | JavaScript DOM
Mohammad Imam Hossain
 
Cassandra nice use cases and worst anti patterns
Cassandra nice use cases and worst anti patternsCassandra nice use cases and worst anti patterns
Cassandra nice use cases and worst anti patterns
Duyhai Doan
 

What's hot (20)

Cassandra Summit 2015
Cassandra Summit 2015Cassandra Summit 2015
Cassandra Summit 2015
 
Cassandra summit keynote 2014
Cassandra summit keynote 2014Cassandra summit keynote 2014
Cassandra summit keynote 2014
 
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy NguyenGrokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
Grokking Engineering - Data Analytics Infrastructure at Viki - Huy Nguyen
 
Lift Framework
Lift FrameworkLift Framework
Lift Framework
 
Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3 Intro to Redux | DreamLab Academy #3
Intro to Redux | DreamLab Academy #3
 
Cassandra 2.1
Cassandra 2.1Cassandra 2.1
Cassandra 2.1
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bisReactive UI in android - Gil Goldzweig Goldbaum, 10bis
Reactive UI in android - Gil Goldzweig Goldbaum, 10bis
 
Using Aggregation for Analytics
Using Aggregation for Analytics Using Aggregation for Analytics
Using Aggregation for Analytics
 
Laporan tugas mata kuliah pbo yg ke 3
Laporan tugas mata kuliah pbo yg ke 3Laporan tugas mata kuliah pbo yg ke 3
Laporan tugas mata kuliah pbo yg ke 3
 
DOT NET LAB PROGRAM PERIYAR UNIVERSITY
DOT NET LAB PROGRAM PERIYAR UNIVERSITY DOT NET LAB PROGRAM PERIYAR UNIVERSITY
DOT NET LAB PROGRAM PERIYAR UNIVERSITY
 
Design Patterns in Micro-services architectures & Gilmour
Design Patterns in Micro-services architectures & GilmourDesign Patterns in Micro-services architectures & Gilmour
Design Patterns in Micro-services architectures & Gilmour
 
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
ITB2019 10 in 50: Ten Coldbox Modules You Should be Using in Every App - Jon ...
 
Web 5 | JavaScript Events
Web 5 | JavaScript EventsWeb 5 | JavaScript Events
Web 5 | JavaScript Events
 
MySQL 8.0 Preview: What Is Coming?
MySQL 8.0 Preview: What Is Coming?MySQL 8.0 Preview: What Is Coming?
MySQL 8.0 Preview: What Is Coming?
 
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case StudyMongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
MongoDB World 2018: Overnight to 60 Seconds: An IOT ETL Performance Case Study
 
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQLPGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
PGConf APAC 2018 - Lightening Talk #2 - Centralizing Authorization in PostgreSQL
 
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
 
Web 6 | JavaScript DOM
Web 6 | JavaScript DOMWeb 6 | JavaScript DOM
Web 6 | JavaScript DOM
 
Cassandra nice use cases and worst anti patterns
Cassandra nice use cases and worst anti patternsCassandra nice use cases and worst anti patterns
Cassandra nice use cases and worst anti patterns
 

Viewers also liked

Perintah azan
Perintah azanPerintah azan
Perintah azan
Septian Muna Barakati
 
Ladera measurement strategy presentation
Ladera measurement strategy presentation Ladera measurement strategy presentation
Ladera measurement strategy presentation
Kenneth L. Cochran II
 
Pre-wappu Evenet 28.4.2016
Pre-wappu Evenet 28.4.2016Pre-wappu Evenet 28.4.2016
Pre-wappu Evenet 28.4.2016
Tekniikan akateemiset TEK
 
TEKin osaamisen kehittämisen kysely 2014
TEKin osaamisen kehittämisen kysely 2014TEKin osaamisen kehittämisen kysely 2014
TEKin osaamisen kehittämisen kysely 2014
SusannaBairoh
 
Perintah untuk umrah
Perintah untuk umrahPerintah untuk umrah
Perintah untuk umrah
Septian Muna Barakati
 
Generic and efficient constructions of attribute based encryption with verifi...
Generic and efficient constructions of attribute based encryption with verifi...Generic and efficient constructions of attribute based encryption with verifi...
Generic and efficient constructions of attribute based encryption with verifi...
LeMeniz Infotech
 
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminenTEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
Arttu Piri
 
Professor Alan Dunlop Graphic CV
Professor Alan Dunlop Graphic CVProfessor Alan Dunlop Graphic CV
Professor Alan Dunlop Graphic CVAlan Dunlop
 
Naisten syrjintä tekniikan_alalla_2016-04_final
Naisten syrjintä tekniikan_alalla_2016-04_finalNaisten syrjintä tekniikan_alalla_2016-04_final
Naisten syrjintä tekniikan_alalla_2016-04_final
SusannaBairoh
 
Esityksen tekeminen SlideSharessa
Esityksen tekeminen SlideSharessaEsityksen tekeminen SlideSharessa
Esityksen tekeminen SlideSharessa
Johanna Janhonen
 
Tiina Holkeri pro gradu -tutkielma
Tiina Holkeri pro gradu -tutkielmaTiina Holkeri pro gradu -tutkielma
Tiina Holkeri pro gradu -tutkielmaTiina Holkeri
 
Tekniikan akateemisten työsuhteet ja työllisyys
Tekniikan akateemisten työsuhteet ja työllisyysTekniikan akateemisten työsuhteet ja työllisyys
Tekniikan akateemisten työsuhteet ja työllisyys
Tekniikan akateemiset TEK
 
Web browser by group no 03 capt palliyaguru
Web browser by group no 03   capt palliyaguruWeb browser by group no 03   capt palliyaguru
Web browser by group no 03 capt palliyaguru
praeeth palliyaguru
 
T&C Meetup #8: How to Optimize Conversions Throughout Your Funnel
T&C Meetup #8:  How to Optimize Conversions Throughout Your FunnelT&C Meetup #8:  How to Optimize Conversions Throughout Your Funnel
T&C Meetup #8: How to Optimize Conversions Throughout Your Funnel
Ewa Wysocka
 
MTech Degree Certificate
MTech Degree CertificateMTech Degree Certificate
MTech Degree CertificateSOURAV MITRA
 
Seurakunnat YouTubessa
Seurakunnat YouTubessaSeurakunnat YouTubessa
Seurakunnat YouTubessa
Johanna Janhonen
 
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツールkintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツール
Yasuharu Sakai
 

Viewers also liked (18)

Perintah azan
Perintah azanPerintah azan
Perintah azan
 
Ladera measurement strategy presentation
Ladera measurement strategy presentation Ladera measurement strategy presentation
Ladera measurement strategy presentation
 
Pre-wappu Evenet 28.4.2016
Pre-wappu Evenet 28.4.2016Pre-wappu Evenet 28.4.2016
Pre-wappu Evenet 28.4.2016
 
TEKin osaamisen kehittämisen kysely 2014
TEKin osaamisen kehittämisen kysely 2014TEKin osaamisen kehittämisen kysely 2014
TEKin osaamisen kehittämisen kysely 2014
 
Perintah untuk umrah
Perintah untuk umrahPerintah untuk umrah
Perintah untuk umrah
 
Generic and efficient constructions of attribute based encryption with verifi...
Generic and efficient constructions of attribute based encryption with verifi...Generic and efficient constructions of attribute based encryption with verifi...
Generic and efficient constructions of attribute based encryption with verifi...
 
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminenTEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
TEK Valmistuneiden kysely 2014 Osa 3: Diplomityö, työssäkäynti ja työllistyminen
 
Yazan CV cc
Yazan CV ccYazan CV cc
Yazan CV cc
 
Professor Alan Dunlop Graphic CV
Professor Alan Dunlop Graphic CVProfessor Alan Dunlop Graphic CV
Professor Alan Dunlop Graphic CV
 
Naisten syrjintä tekniikan_alalla_2016-04_final
Naisten syrjintä tekniikan_alalla_2016-04_finalNaisten syrjintä tekniikan_alalla_2016-04_final
Naisten syrjintä tekniikan_alalla_2016-04_final
 
Esityksen tekeminen SlideSharessa
Esityksen tekeminen SlideSharessaEsityksen tekeminen SlideSharessa
Esityksen tekeminen SlideSharessa
 
Tiina Holkeri pro gradu -tutkielma
Tiina Holkeri pro gradu -tutkielmaTiina Holkeri pro gradu -tutkielma
Tiina Holkeri pro gradu -tutkielma
 
Tekniikan akateemisten työsuhteet ja työllisyys
Tekniikan akateemisten työsuhteet ja työllisyysTekniikan akateemisten työsuhteet ja työllisyys
Tekniikan akateemisten työsuhteet ja työllisyys
 
Web browser by group no 03 capt palliyaguru
Web browser by group no 03   capt palliyaguruWeb browser by group no 03   capt palliyaguru
Web browser by group no 03 capt palliyaguru
 
T&C Meetup #8: How to Optimize Conversions Throughout Your Funnel
T&C Meetup #8:  How to Optimize Conversions Throughout Your FunnelT&C Meetup #8:  How to Optimize Conversions Throughout Your Funnel
T&C Meetup #8: How to Optimize Conversions Throughout Your Funnel
 
MTech Degree Certificate
MTech Degree CertificateMTech Degree Certificate
MTech Degree Certificate
 
Seurakunnat YouTubessa
Seurakunnat YouTubessaSeurakunnat YouTubessa
Seurakunnat YouTubessa
 
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツールkintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツール
 

Similar to Reactive programming in clojure script using reactjs wrappers

ADF Gold Nuggets (Oracle Open World 2011)
ADF Gold Nuggets (Oracle Open World 2011)ADF Gold Nuggets (Oracle Open World 2011)
ADF Gold Nuggets (Oracle Open World 2011)
Lucas Jellema
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
Ignacio Martín
 
Overview of atg framework
Overview of atg frameworkOverview of atg framework
Overview of atg framework
Yousuf Roushan
 
Practical Dynamic Actions - Intro
Practical Dynamic Actions - IntroPractical Dynamic Actions - Intro
Practical Dynamic Actions - Intro
Jorge Rimblas
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
Codemotion
 
A sane approach to microservices
A sane approach to microservicesA sane approach to microservices
A sane approach to microservices
Toby Matejovsky
 
Content-Driven Apps with React
Content-Driven Apps with ReactContent-Driven Apps with React
Content-Driven Apps with React
Netcetera
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink
 
Human scaling on the front end
Human scaling on the front endHuman scaling on the front end
Human scaling on the front end
Rudy Rigot
 
Memento Pattern Implementation
Memento Pattern ImplementationMemento Pattern Implementation
Memento Pattern ImplementationSteve Widom
 
High Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScriptHigh Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScript
Leonardo Borges
 
Crafted Design - ITAKE 2014
Crafted Design - ITAKE 2014Crafted Design - ITAKE 2014
Crafted Design - ITAKE 2014
Sandro Mancuso
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
 
Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)
Clarence Ngoh
 
From ActiveRecord to EventSourcing
From ActiveRecord to EventSourcingFrom ActiveRecord to EventSourcing
From ActiveRecord to EventSourcing
Emanuele DelBono
 
Intro to-rails-webperf
Intro to-rails-webperfIntro to-rails-webperf
Intro to-rails-webperfNew Relic
 
React/Redux
React/ReduxReact/Redux
React/Redux
Durgesh Vaishnav
 
The road to Ember 2.0
The road to Ember 2.0The road to Ember 2.0
The road to Ember 2.0
Filippo Zanella
 
ReactJS
ReactJSReactJS
ReactJS
Kamlesh Singh
 
Full Stack Toronto - the 3R Stack
Full Stack Toronto - the 3R StackFull Stack Toronto - the 3R Stack
Full Stack Toronto - the 3R Stack
Scott Persinger
 

Similar to Reactive programming in clojure script using reactjs wrappers (20)

ADF Gold Nuggets (Oracle Open World 2011)
ADF Gold Nuggets (Oracle Open World 2011)ADF Gold Nuggets (Oracle Open World 2011)
ADF Gold Nuggets (Oracle Open World 2011)
 
Server side rendering with React and Symfony
Server side rendering with React and SymfonyServer side rendering with React and Symfony
Server side rendering with React and Symfony
 
Overview of atg framework
Overview of atg frameworkOverview of atg framework
Overview of atg framework
 
Practical Dynamic Actions - Intro
Practical Dynamic Actions - IntroPractical Dynamic Actions - Intro
Practical Dynamic Actions - Intro
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
 
A sane approach to microservices
A sane approach to microservicesA sane approach to microservices
A sane approach to microservices
 
Content-Driven Apps with React
Content-Driven Apps with ReactContent-Driven Apps with React
Content-Driven Apps with React
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Human scaling on the front end
Human scaling on the front endHuman scaling on the front end
Human scaling on the front end
 
Memento Pattern Implementation
Memento Pattern ImplementationMemento Pattern Implementation
Memento Pattern Implementation
 
High Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScriptHigh Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScript
 
Crafted Design - ITAKE 2014
Crafted Design - ITAKE 2014Crafted Design - ITAKE 2014
Crafted Design - ITAKE 2014
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)Having Fun Building Web Applications (Day 2 slides)
Having Fun Building Web Applications (Day 2 slides)
 
From ActiveRecord to EventSourcing
From ActiveRecord to EventSourcingFrom ActiveRecord to EventSourcing
From ActiveRecord to EventSourcing
 
Intro to-rails-webperf
Intro to-rails-webperfIntro to-rails-webperf
Intro to-rails-webperf
 
React/Redux
React/ReduxReact/Redux
React/Redux
 
The road to Ember 2.0
The road to Ember 2.0The road to Ember 2.0
The road to Ember 2.0
 
ReactJS
ReactJSReactJS
ReactJS
 
Full Stack Toronto - the 3R Stack
Full Stack Toronto - the 3R StackFull Stack Toronto - the 3R Stack
Full Stack Toronto - the 3R Stack
 

Recently uploaded

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
Fwdays
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 

Recently uploaded (20)

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 

Reactive programming in clojure script using reactjs wrappers