Your SlideShare is downloading. ×
0
The Case for
React.js and
ClojureScript
Murilo Pereira
@mpereira
May2, 2014
Problem
Building UIs is
difficult.
Modern Web UIs
visualrepresentationsofdatachangingovertime
respondtoasynchronoususerevents
transitionboththeunderlyingdata...
"Data changing over time is the
root of all evil."
Incidental Complexity
JavaScriptisn't
DOM is stateful
reactive
What if the JavaScript DOM
API was reactive?
functiontweetScore(tweet){
return(tweet.favorites_count+tweet.retweets_count);
}
functioncompareTweetsByScore(a,b){
return...
Possible solution: Data binding
Data Binding
Observables
Computed properties
Backbone, Ember, Meteor, etal.
Contemporary data binding is
not simple.
Simple
Notto be mistaken for "easy"
Easiness = Familiarity(subjective)
Simplicity= "Does/is one thing"(objective)
Data Binding
Application logic entangled with observables
Forces us to compose our programs with framework
constructs inst...
"How often are you fighting the
framework?"
Dirty-checking (Angular)
Also susceptible to the problems of databinding.
https://docs.angularjs.org/guide/concepts
Complex
Even with shortcomings it's
still possible to build complex,
modern UIs using
contemporary MVC
frameworks.
"We can create precisely the
same programs we're creating
right now with drastically
simpler tools."
Rich Hickey
A different solution to the same
problem.
React.js
React.js
Libraryfor creatingUIs
Renders the DOM and responds to user events
Can be thoughtof as the Vin MVC
Remember our utopic example
a few slides back?
functiontweetScore(tweet){
return(tweet.favorites_count+tweet.retweets_count);
}
functioncompareTweetsByScore(a,b){
return...
It's actually valid React.js code
functiontweetScore(tweet){
return(tweet.favorites_count+tweet.retweets_count);
}
functioncompareTweetsByScore(a,b){
return...
React gives us a minimally
leaky abstraction for a reactive
JavaScript/DOM environment.
Data
Component
DOM
Model
View
DOM
M3
V2
DOM
M2 M4 M5M1
V1 V3
Data
C3
DOM
C4C2 C5C1
Components
Components
Idempotent functions that describe your
UI at any point in time.
component(data) = VDOM
component(data_1) = VDOM_1
*user inputchanges datafrom data_1 to data_2*
component(data_2) = VDOM_2
diffVDOMs(VDOM_1, VDOM...
Best part? You don't even have
to worry about this. Just build
components.
Every place data is displayed is
guaranteed to be up-to-date. 
No need for KVO or marking
HTML templates with
framework di...
Frees the programmer from
doing manual, explicit DOM
operations.
But what about the
performance?
Isn't diffing VDOMs slow?
Why have VDOMs if the
browser already has a DOM?
The DOM is slow.
The DOM is slow
Queryingmayrequire tree traversal
Mutations trigger viewportreflows, relayouts, repaints (CSS
engine, etc....
Having in-memory
representations of the DOM
allows React to have extremely
fast UIs.
Virtual DOM (VDOM)
Allows for components to have adeclarative API
Performs the minimum amountof actualDOM operations
throu...
"Performance isn't the [main]
goal of the VDOM, but if you're
worried with performance,
most workloads are as fast or
fast...
Components
Components allow you to
express your program in the
language of your problem
domain.
Rather than on the language of
a part...
Bill O'Reilly
Tide comesin,tide goesout.
You can'texplain that!
Top Tweets
Justhad #breakfast.
@troll yes,definitelyplan o...
Bill O'Reilly
Top Tweets
Tide comesin,tide goesout.
You can'texplain that!#tides
Justhad #breakfast.
@troll yes,definitely...
varProfile=React.createClass({
render:function(){
return(React.DOM.div(null,[
React.DOM.img(null,this.props.user.image),
R...
varProfile=React.createClass({
render:function(){
return(
<div>
<imghref={this.props.user.image}/>
<p>{this.props.user.nam...
TopTweets(data) = Header() + Profile(data_1) + Tweets(data_2)
Components are reusable and
composable declarative
representations of your UI.
Collateral
Benefits
Collateral Benefits
Render the application on the server (node.js, Java8's
Nashhorn, etc.)
UI testabilityfor free
No templ...
React.js takeaways
Declarative, fastUIs
Express your programs in the language of your problem
domain
ClojureScript
Problem
JavaScript sucks
We needJavaScript
JavaScript sucks
No integers
No module system
Verbose syntax
Confusing, inconsistentequalityoperators
Confusing, inconsist...
We Need JavaScript
Runtime is everywhere
Runtime is improving(Web Sockets, geo-location, FS API, RAF,
push notifications, ...
Build better languages on top
of JavaScript.
Compilers!
Lots of them alreadyexist
Onlyafew bringsignificantimprovements
Popular ones
CoffeeScript: mostlysyntax sugar
T...
ClojureScript
ClojureScript is a Clojure
compiler that targets
JavaScript.
Why ClojureScript?
Why Clojure?
Why LISP?
Clojure is just a better
language.
Numberofdays
spentdesigning
the language v1
JavaScript Clojure
ClojureScript
LISP
STM
Runtime polymorphism
The REPL
Functionalprogramming
Immutable datastructures
Uniform API over immut...
core.async
(go(try
(let[tweets (<?(get-tweets-for"swannodette"))
first-url(<?(expand-url(first(parse-urlstweets))))
respon...
The possibility of having
access to the power of Clojure
in the browser is immensely
valuable.
Value
To programmers, who willbe able to build better programs, with
less bugs, faster.
To the people and companies who wi...
The developer experience has
improved significantly.
Developer Experience
Source maps
Easilyreproducible tutorials
Browser-connected in-editor REPLs
Fastcompilation cycles
Com...
Recommend you to check it
out
(butyou probablyhave, already)
Om
ClojureScript interface to React.
"Because of immutable data
Om can deliver even better
performance than React out of
the box."
David Nolen
30-40X faster than JS MVCs nothing to do with
ClojureScript. Ditch stateful objects, ditch events. Be
declarative. Immutab...
???
ClojureScript
Compiled, slower than hand-written JavaScript
Uses immutable datastructures, slower than JavaScriptdata
stru...
"Ideas have fundamental
performance properties."
Pete Hunt
Immutable data structures
make React's diffing algorithm
really smart.
 And more...
Takeaways
"Ideas have fundamental
performance properties."
"Don't trade simplicity for
familiarity."
And  .give it five minutes
Thanks!@mpereira
Learn React.js
Why?
Be Predictable, NotCorrect
React: RethinkingBestPractices
WhyReact?
How
GettingStarted
Introduction to...
Learn ClojureScript
Why?
ClojureScriptRationale
The Future of JavaScriptMVC Frameworks
Clojure Rationale
WhyClojure?
Beati...
The Case for React.js and ClojureScript
Upcoming SlideShare
Loading in...5
×

The Case for React.js and ClojureScript

2,244

Published on

Sonian Tech Talk presentation given on may 2, 2014.

http://murilopereira.com/the-case-for-reactjs-and-clojurescript/

Published in: Software, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,244
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
28
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "The Case for React.js and ClojureScript"

  1. 1. The Case for React.js and ClojureScript Murilo Pereira @mpereira May2, 2014
  2. 2. Problem
  3. 3. Building UIs is difficult.
  4. 4. Modern Web UIs visualrepresentationsofdatachangingovertime respondtoasynchronoususerevents transitionboththeunderlyingdataanditselftonew states
  5. 5. "Data changing over time is the root of all evil."
  6. 6. Incidental Complexity JavaScriptisn't DOM is stateful reactive
  7. 7. What if the JavaScript DOM API was reactive?
  8. 8. functiontweetScore(tweet){ return(tweet.favorites_count+tweet.retweets_count); } functioncompareTweetsByScore(a,b){ return(tweetScore(b)-tweetScore(a)); } functionrenderApplication(tweets){ return(document.dom.ul( {class:'tweets'}, tweets .sort(compareTweetsByScore) .slice(0,5) .map(function(tweet){ return(document.dom.li({class:'tweet'},tweet.text); }) )); } vartweets=fetchTweets({username:'mpereira'},{limit:20}); document.dom.render(renderApplication(tweets),document.body);
  9. 9. Possible solution: Data binding
  10. 10. Data Binding Observables Computed properties Backbone, Ember, Meteor, etal.
  11. 11. Contemporary data binding is not simple.
  12. 12. Simple Notto be mistaken for "easy" Easiness = Familiarity(subjective) Simplicity= "Does/is one thing"(objective)
  13. 13. Data Binding Application logic entangled with observables Forces us to compose our programs with framework constructs instead of language constructs (functions and data structures)
  14. 14. "How often are you fighting the framework?"
  15. 15. Dirty-checking (Angular) Also susceptible to the problems of databinding.
  16. 16. https://docs.angularjs.org/guide/concepts
  17. 17. Complex
  18. 18. Even with shortcomings it's still possible to build complex, modern UIs using contemporary MVC frameworks.
  19. 19. "We can create precisely the same programs we're creating right now with drastically simpler tools." Rich Hickey
  20. 20. A different solution to the same problem.
  21. 21. React.js
  22. 22. React.js Libraryfor creatingUIs Renders the DOM and responds to user events Can be thoughtof as the Vin MVC
  23. 23. Remember our utopic example a few slides back?
  24. 24. functiontweetScore(tweet){ return(tweet.favorites_count+tweet.retweets_count); } functioncompareTweetsByScore(a,b){ return(tweetScore(b)-tweetScore(a)); } functionrenderApplication(tweets){ return(document.dom.ul( {class:'tweets'}, tweets .sort(compareTweetsByScore) .slice(0,5) .map(function(tweet){ return(document.dom.li({class:'tweet'},tweet.text); }) )); } vartweets=fetchTweets({username:'mpereira'},{limit:20}); document.dom.render(renderApplication(tweets),document.body);
  25. 25. It's actually valid React.js code
  26. 26. functiontweetScore(tweet){ return(tweet.favorites_count+tweet.retweets_count); } functioncompareTweetsByScore(a,b){ return(tweetScore(b)-tweetScore(a)); } functionrenderApplication(tweets){ return(React.DOM.ul( {className:'tweets'}, tweets .sort(compareTweetsByScore) .slice(0,5) .map(function(tweet){ return(React.DOM.li({className:'tweet'},tweet.text); }) )); } vartweets=fetchTweets({username:'mpereira'},{limit:20}); React.renderComponent(renderApplication(tweets),document.body);
  27. 27. React gives us a minimally leaky abstraction for a reactive JavaScript/DOM environment.
  28. 28. Data Component DOM
  29. 29. Model View DOM
  30. 30. M3 V2 DOM M2 M4 M5M1 V1 V3
  31. 31. Data C3 DOM C4C2 C5C1
  32. 32. Components
  33. 33. Components Idempotent functions that describe your UI at any point in time.
  34. 34. component(data) = VDOM
  35. 35. component(data_1) = VDOM_1 *user inputchanges datafrom data_1 to data_2* component(data_2) = VDOM_2 diffVDOMs(VDOM_1, VDOM_2) = diff DOMOperations(diff) = operations applyDOMOperations(operations, document.body)
  36. 36. Best part? You don't even have to worry about this. Just build components.
  37. 37. Every place data is displayed is guaranteed to be up-to-date.  No need for KVO or marking HTML templates with framework directives.
  38. 38. Frees the programmer from doing manual, explicit DOM operations.
  39. 39. But what about the performance? Isn't diffing VDOMs slow? Why have VDOMs if the browser already has a DOM?
  40. 40. The DOM is slow.
  41. 41. The DOM is slow Queryingmayrequire tree traversal Mutations trigger viewportreflows, relayouts, repaints (CSS engine, etc.) Can also invalidate caches, requiringthe entire DOM to be reconstructed on the viewport
  42. 42. Having in-memory representations of the DOM allows React to have extremely fast UIs.
  43. 43. Virtual DOM (VDOM) Allows for components to have adeclarative API Performs the minimum amountof actualDOM operations through computingdiffs Handles DOM operations for you
  44. 44. "Performance isn't the [main] goal of the VDOM, but if you're worried with performance, most workloads are as fast or faster [than the MVC alternatives] out of the box." Pete Hunt
  45. 45. Components
  46. 46. Components allow you to express your program in the language of your problem domain. Rather than on the language of a particular framework.
  47. 47. Bill O'Reilly Tide comesin,tide goesout. You can'texplain that! Top Tweets Justhad #breakfast. @troll yes,definitelyplan on that. pic.twitter.com/asd23 #selfie #instagram Good# morning.
  48. 48. Bill O'Reilly Top Tweets Tide comesin,tide goesout. You can'texplain that!#tides Justhad #breakfast. @troll yes,definitelyplan on that. pic.twitter.com/asd23 #selfie #instagram Good# morning. Header Profile Tweets Top Tweets
  49. 49. varProfile=React.createClass({ render:function(){ return(React.DOM.div(null,[ React.DOM.img(null,this.props.user.image), React.DOM.p(null,this.props.user.name) ]); } }); varTweets=React.createClass({ render:function(){ return(React.DOM.ul(null,this.props.tweets.map(function(tweet){ return(React.DOM.li(null,tweet.text)); }); } }); varTopTweets=React.createClass({ render:function(){ return(React.DOM.div(null,[ React.DOM.h1(null,'TopTweets'), Profile({user:this.props.user}), Tweets({tweets:this.props.user.tweets}) ]); } }); React.renderComponent(TopTweets({user:user}),document.body);
  50. 50. varProfile=React.createClass({ render:function(){ return( <div> <imghref={this.props.user.image}/> <p>{this.props.user.name}</p> </div> ); } }); varTweets=React.createClass({ render:function(){ return( <ul> {this.props.tweets.map(function(tweet){ return(<li>tweet.text</li>); })}; </ul> ); } }); varTopTweets=React.createClass({ render:function(){ return( <div> <h1>TopTweets</h1> <Profileuser={this.props.user}/> <Tweetstweets={this.props.user.tweets}/> </div> ); }
  51. 51. TopTweets(data) = Header() + Profile(data_1) + Tweets(data_2)
  52. 52. Components are reusable and composable declarative representations of your UI.
  53. 53. Collateral Benefits
  54. 54. Collateral Benefits Render the application on the server (node.js, Java8's Nashhorn, etc.) UI testabilityfor free No templates!
  55. 55. React.js takeaways Declarative, fastUIs Express your programs in the language of your problem domain
  56. 56. ClojureScript
  57. 57. Problem JavaScript sucks We needJavaScript
  58. 58. JavaScript sucks No integers No module system Verbose syntax Confusing, inconsistentequalityoperators Confusing, inconsistentautomatic operator conversions Lack of block scope Non-uniform iterators Globalvariables bydefault NaN this No macros (yet...) etc.
  59. 59. We Need JavaScript Runtime is everywhere Runtime is improving(Web Sockets, geo-location, FS API, RAF, push notifications, WebRTC, WebGL, SVG, Canvas, Web Workers, IndexedDB, etc.)
  60. 60. Build better languages on top of JavaScript.
  61. 61. Compilers! Lots of them alreadyexist Onlyafew bringsignificantimprovements Popular ones CoffeeScript: mostlysyntax sugar TypeScript: typed supersetof JavaScript. Brings type checking, compile time errors
  62. 62. ClojureScript
  63. 63. ClojureScript is a Clojure compiler that targets JavaScript.
  64. 64. Why ClojureScript? Why Clojure? Why LISP?
  65. 65. Clojure is just a better language.
  66. 66. Numberofdays spentdesigning the language v1 JavaScript Clojure
  67. 67. ClojureScript LISP STM Runtime polymorphism The REPL Functionalprogramming Immutable datastructures Uniform API over immutable datastructures Macros Lazysequences Destructuring State VS Identity etc.
  68. 68. core.async (go(try (let[tweets (<?(get-tweets-for"swannodette")) first-url(<?(expand-url(first(parse-urlstweets)))) response (<?(http-getfirst-url))] (.js/console(log"Mostrecentlinktext:"response))) (catchjs/Errore (.js/console(error"Errorwiththetwitterverse:"e))))) Asynchronous Error Handling
  69. 69. The possibility of having access to the power of Clojure in the browser is immensely valuable.
  70. 70. Value To programmers, who willbe able to build better programs, with less bugs, faster. To the people and companies who willbenefitfrom those programs.
  71. 71. The developer experience has improved significantly.
  72. 72. Developer Experience Source maps Easilyreproducible tutorials Browser-connected in-editor REPLs Fastcompilation cycles Compatible libraries
  73. 73. Recommend you to check it out (butyou probablyhave, already)
  74. 74. Om
  75. 75. ClojureScript interface to React.
  76. 76. "Because of immutable data Om can deliver even better performance than React out of the box." David Nolen
  77. 77. 30-40X faster than JS MVCs nothing to do with ClojureScript. Ditch stateful objects, ditch events. Be declarative. Immutability. That's it. 5:39 AM - 15 Dec 2013 David Nolen @swannodette Follow 41 RETWEETS 39 FAVORITES
  78. 78. ???
  79. 79. ClojureScript Compiled, slower than hand-written JavaScript Uses immutable datastructures, slower than JavaScriptdata structures And yet Om's performance beats that of most JavaScript MVC frameworks
  80. 80. "Ideas have fundamental performance properties." Pete Hunt
  81. 81. Immutable data structures make React's diffing algorithm really smart.
  82. 82.  And more...
  83. 83. Takeaways
  84. 84. "Ideas have fundamental performance properties."
  85. 85. "Don't trade simplicity for familiarity."
  86. 86. And  .give it five minutes
  87. 87. Thanks!@mpereira
  88. 88. Learn React.js Why? Be Predictable, NotCorrect React: RethinkingBestPractices WhyReact? How GettingStarted Introduction to React.js Tutorial
  89. 89. Learn ClojureScript Why? ClojureScriptRationale The Future of JavaScriptMVC Frameworks Clojure Rationale WhyClojure? Beatingthe Averages How ClojureScript101 Translations from JavaScript LightTable ClojureScriptTutorial Om Tutorial
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×