Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Om/React.js/Clojurescript: An introduction
Peter Brachwitz
May 21, 2014
Programming
1
280
Om/React.js/Clojurescript: An introduction
An introduction to Om/React.js/ClojureScript
Peter Brachwitz
May 21, 2014
Tweet
Share
More Decks by Peter Brachwitz
See All by Peter Brachwitz
Core.async
pebrc
0
43
Introduction to Clojure for Java Devs
pebrc
1
58
Other Decks in Programming
See All in Programming
2022 FrontEnd Training
mixi_engineers
1
280
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.6k
Reinventing the wheel ... as a service
mariofusco
3
270
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
650
近況PHP / PHP in now a days
uzulla
4
1.8k
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
130
プログラミングを勉強したいと言われたら
yuba_4
0
410
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
800
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
oniak3ibm
PRO
0
330
Named Document って何?
harunakano
0
420
Oculus Interaction SDK 概説 / xrdnk-caunity-LT4
xrdnk
0
200
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
150
Featured
See All Featured
Fireside Chat
paigeccino
11
1.3k
Debugging Ruby Performance
tmm1
65
10k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Making Projects Easy
brettharned
98
4.3k
Unsuck your backbone
ammeep
659
55k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Rails Girls Zürich Keynote
gr2m
86
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Transcript
OM AN INTRODUCTION / Peter Brachwitz @p_brc
WHAT? ... WHY? A new way of building web UIs
using Facebook's new React.js library ... but in ClojureScript with added "functional" benefits.
PARTIES INVOLVED 1. ClojureScript 2. React.js 3. Om
CLOJURESCRIPT A Clojure compiler that emits JavaScript code
Its output can be optimized with Google's Closure compiler
ALL OF CLOJURE? Almost. Excluded are the bits that don't
make sense in a JavaScript environment.
THINGS THAT WON'T WORK: Concurrency : Refs, Agents Data types:
BigDecimal, BigInteger, Ratio Host (Java, CLR) IO related things: *out* Full list of differences on GitHub
REACT.JS? A JavaScript library for building user interfaces
MVC? No.
MVP? No.
MVVM? No.
SIMPLE Just the view. No models. No controllers.
REACTIVE Data flow into the UI
FAST Let v be a virtual DOM dif f (
, ) = Δ v 0 v 1
WHY? JavaScript is fast DOM mutation is slow Minimize DOM
mutation and gain performance
OM A ClojureScript interface to React.js written by David Nolen
IMMUTABLE, PERSISTENT DATA STRUCTURES Snapshots, Undo, efficient rendering
xs d b g a c f h ys d'
g' f' e Source http://en.wikipedia.org/wiki/File:Purely_functional_tree_after.svg
TYPICALLY: CENTRALIZED APPLICATION STATE Using Clojure's atom (CAS) and om's
transact!
NO (VIEW) MODELS Cursors into global application state
LET'S LOOK AT SOME CODE!
SOURCES Om on Github Basic Om Tutorial React on Github
Comparing JavaScript and ClojureScript A ClojureScript tutorial by David Nolen