Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ClojureScript and React
Search
Myron Mavko
April 16, 2015
Programming
8
2.5k
ClojureScript and React
Talk given at KyivClojure #7 on Apr 16 2015
Myron Mavko
April 16, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
1k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
280
Hack Claude Code with Claude Code
choplin
8
2.8k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
320
What's new in AppKit on macOS 26
1024jp
0
170
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
610
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Featured
See All Featured
KATA
mclloyd
30
14k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Docker and Python
trallard
45
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
How to Ace a Technical Interview
jacobian
278
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Transcript
Moving from bad to good ClojureScript and React by Myron
Mavko for KyivClojure #7, 2015
About me ๏ Myron Mavko ๏ Software engineer at Attendify.com
๏ Years of JS, jQuery, Backbone, ExtJS and all the classics ๏ Finally moving to something that works!
Agenda ๏ Product overview ๏ What it was like: Knockout,
jQuery, Backbone ๏ What it became like: ClojureScript, React ๏ React: what is it all about? ๏ Overview of ClojureScript React wrappers
Attendify Product Overview
Attendify ‣ Mobile applications builder ‣ Thousands of mobile apps
‣ Private social networks in each application ‣ Real-time analytic ‣ Sponsored Posts (ads) ‣ EventWall for screen projection
Attendify Hub
Social
Multi-Event App
What it was like: Knockout, jQuery, Backbone
JS dev diary ๏ Exceptions you can’t understand ๏ Debugging
๏ Lack of basic means ๏ Remembering about all known JS pitfalls ๏ Remembering about framework specific pitfalls
Knockout.js ๏ Two-way bindings ๏ Templates / Composability ๏ Performance!
Backbone.js+ ๏ Manual memory management ๏ Manual DOM-events management ๏
Turning project into a mess ๏ Performance!
What it became like: ClojureScript, React
Our experience ๏ Being early adopters of ClojureScript (1.5+ years)
๏ Being early adopters of React (1.5+ years) ๏ Being early adopters of React cljs wrappers ๏ Watching it all evolves
CLJS dev diary ๏ Exceptions and errors are easy to
understand ๏ No reason for debugging ๏ No JS with its pitfalls and tons of libraries ๏ Power of Clojure at your fingertips ๏ core.async ๏ Incredibly fast incremental builds (+ live reloading)
ClojureScript benefits
ClojureScript benefits
ClojureScript benefits
React: what is it all about?
Virtual DOM
Virtual DOM
Virtual DOM
Component Picture from: http://calendar.perfplanet.com/2013/diff/ ‣ reusable ‣ composable ‣ testable
‣ stateful
Component
Component Mount Rerender Update Unmount cWillMount cWillReceiveProps shouldCUpdate shouldCUpdate cWillUpdate
cWillUpdate render render render cDidMount cDidUpdate cDidUpdate cWillUnmount
ClojureScript React wrappers
Acknowledged ones ๏ Om ๏ Quiescent ๏ Reagent ๏ Rum
Om
Om ✓ Industry pioneer ✓ Most widespread ✗ Overcomplicated ✗
Cursors for us turned out to be a misconception that leads to unjustified coherence between UI structure and app state structure
Quiescent
Quiescent ✓ Dead simple ✗ Inability to set component react-key
(fixed in upcoming 0.2.0 version)
Reagent
Reagent ✓ Dead simple ✗ Ratoms is real magic. Easy
to loose control.
Rum /static
Rum /reactive
Rum ✓ Most flexible concept ✓ Source code easy to
understand (comparing to Om) ✗ Very young project ✗ Complex cases (like mixin dependencies) need investigation
alexey@attendify.com We’re hiring!
Thank You! Questions?