The Case for React.js and ClojureScript
9 likes4,178 views
The document discusses the challenges of building modern web UIs without inherent complexity and proposes solutions using React.js and ClojureScript. It emphasizes the benefits of a reactive approach through data binding and the use of a virtual DOM for performance optimization. Moreover, it highlights ClojureScript as a powerful tool to create better programming experiences on top of JavaScript through immutability and functional programming principles.
!["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](https://image.slidesharecdn.com/thecaseforreact-140503171909-phpapp02/85/The-Case-for-React-js-and-ClojureScript-44-320.jpg)
![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);](https://image.slidesharecdn.com/thecaseforreact-140503171909-phpapp02/85/The-Case-for-React-js-and-ClojureScript-49-320.jpg)
![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](https://image.slidesharecdn.com/thecaseforreact-140503171909-phpapp02/85/The-Case-for-React-js-and-ClojureScript-68-320.jpg)
The Case for React.js and ClojureScript
- 2. Problem
- 10. Data Binding Observables Computed properties Backbone, Ember, Meteor, etal.
- 12. Simple Notto be mistaken for "easy" Easiness = Familiarity(subjective) Simplicity= "Does/is one thing"(objective)
- 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)
- 15. Dirty-checking (Angular) Also susceptible to the problems of databinding.
- 17. Complex
- 21. React.js
- 22. React.js Libraryfor creatingUIs Renders the DOM and responds to user events Can be thoughtof as the Vin MVC
- 29. Model View DOM
- 30. M3 V2 DOM M2 M4 M5M1 V1 V3
- 32. Components
- 33. Components Idempotent functions that describe your UI at any point in time.
- 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)
- 40. The DOM is slow.
- 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
- 43. Virtual DOM (VDOM) Allows for components to have adeclarative API Performs the minimum amountof actualDOM operations through computingdiffs Handles DOM operations for you
- 45. Components
- 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. 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
- 54. Collateral Benefits Render the application on the server (node.js, Java8's Nashhorn, etc.) UI testabilityfor free No templates!
- 55. React.js takeaways Declarative, fastUIs Express your programs in the language of your problem domain
- 56. ClojureScript
- 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. 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.)
- 61. Compilers! Lots of them alreadyexist Onlyafew bringsignificantimprovements Popular ones CoffeeScript: mostlysyntax sugar TypeScript: typed supersetof JavaScript. Brings type checking, compile time errors
- 62. ClojureScript
- 67. ClojureScript LISP STM Runtime polymorphism The REPL Functionalprogramming Immutable datastructures Uniform API over immutable datastructures Macros Lazysequences Destructuring State VS Identity etc.
- 70. Value To programmers, who willbe able to build better programs, with less bugs, faster. To the people and companies who willbenefitfrom those programs.
- 72. Developer Experience Source maps Easilyreproducible tutorials Browser-connected in-editor REPLs Fastcompilation cycles Compatible libraries
- 75. Om
- 78. 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
- 79. ???
- 80. 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
- 83. And more...
- 84. Takeaways
- 88. Thanks!@mpereira
- 89. Learn React.js Why? Be Predictable, NotCorrect React: RethinkingBestPractices WhyReact? How GettingStarted Introduction to React.js Tutorial
- 90. Learn ClojureScript Why? ClojureScriptRationale The Future of JavaScriptMVC Frameworks Clojure Rationale WhyClojure? Beatingthe Averages How ClojureScript101 Translations from JavaScript LightTable ClojureScriptTutorial Om Tutorial