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
Introduction to kotlinx.rpc
arawn
0
770
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.9k
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Jasprが凄い話
hyshu
0
180
Jakarta EE meets AI
ivargrimstad
0
540
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
100
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
color-scheme: light dark; を完全に理解する
uhyo
7
500
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
3
820
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
75
9.2k
Facilitating Awesome Meetings
lara
53
6.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Agile that works and the tools we love
rasmusluckow
328
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
A Philosophy of Restraint
colly
203
16k
Automating Front-end Workflow
addyosmani
1369
200k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
669
57k
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?