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
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.1k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
610
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
910
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
VS Code Update for GitHub Copilot
74th
2
600
GraphRAGの仕組みまるわかり
tosuri13
8
530
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
690
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
260
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
72
4.9k
How to train your dragon (web standard)
notwaldorf
94
6.1k
A better future with KSS
kneath
239
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Cult of Friendly URLs
andyhume
79
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Invisible Side of Design
smashingmag
301
51k
We Have a Design System, Now What?
morganepeng
53
7.7k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
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
[email protected]
We’re hiring!
Thank You! Questions?