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
Leading Effective Engineering Teams in the AI Era
addyosmani
5
420
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
130
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
株式会社 Sun terras カンパニーデック
sunterras
0
310
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
150
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.8k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
430
明日から始めるリファクタリング
ryounasso
0
140
Advance Your Career with Open Source
ivargrimstad
0
540
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Facilitating Awesome Meetings
lara
56
6.6k
Agile that works and the tools we love
rasmusluckow
331
21k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Typedesign – Prime Four
hannesfritz
42
2.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Applications with DynamoDB
mza
96
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Power of CSS Pseudo Elements
geoffreycrofte
79
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?