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.4k
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
ML.NETで始める機械学習
ymd65536
0
100
チームリードになって変わったこと
isaka1022
0
200
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
DROBEの生成AI活用事例 with AWS
ippey
0
130
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
210
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
120
SwiftUI Viewの責務分離
elmetal
PRO
1
240
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.4k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
850
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Building Adaptive Systems
keathley
40
2.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Embracing the Ebb and Flow
colly
84
4.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
How to train your dragon (web standard)
notwaldorf
91
5.8k
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?