The Case for React.js and ClojureScript

Sonian Tech Talk presentation given on may 2, 2014

Transcript

1. The Case for React.js and ClojureScript Murilo Pereira @mpereira May 2, 2014
2. Problem
3. Building UIs is difficult.
4. Modern Web UIs visual representations of data changing over time respond to asynchronous user events transition both the underlying data and itself to new states
5. "Data changing over time is the root of all evil."
6. Incidental Complexity JavaScript isn't DOM is stateful reactive
7. What if the JavaScript DOM API was reactive?
8. f u n c t i o n t w e e t S c o r e ( t w e e t ) { r e t u r n ( t w e e t . f a v o r i t e s _ c o u n t + t w e e t . r e t w e e t s _ c o u n t ) ; } f u n c t i o n c o m p a r e T w e e t s B y S c o r e ( a , b ) { r e t u r n ( t w e e t S c o r e ( b ) - t w e e t S c o r e ( a ) ) ; } f u n c t i o n r e n d e r A p p l i c a t i o n ( t w e e t s ) { r e t u r n ( d o c u m e n t . d o m . u l ( { c l a s s : ' t w e e t s ' } , t w e e t s . s o r t ( c o m p a r e T w e e t s B y S c o r e ) . s l i c e ( 0 , 5 ) . m a p ( f u n c t i o n ( t w e e t ) { r e t u r n ( d o c u m e n t . d o m . l i ( { c l a s s : ' t w e e t ' } , t w e e t . t e x t ) ; } ) ) ) ; } v a r t w e e t s = f e t c h T w e e t s ( { u s e r n a m e : ' m p e r e i r a ' } , { l i m i t : 2 0 } ) ; d o c u m e n t . d o m . r e n d e r ( r e n d e r A p p l i c a t i o n ( t w e e t s ) , d o c u m e n t . b o d y ) ;
9. Possible solution: Data binding
10. Data Binding Observables Computed properties Backbone, Ember, Meteor, et al.
11. Contemporary data binding is not simple.
12. Simple Not to 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)
14. "How often are you fighting the framework?"
15. Dirty-checking (Angular) Also susceptible to the problems of data binding.
16. https://docs.angularjs.org/guide/concepts
17. Complex
18. Even with shortcomings it's still possible to build complex, modern UIs using contemporary MVC frameworks.
19. "We can create precisely the same programs we're creating right now with drastically simpler tools." Rich Hickey
20. A different solution to the same problem.
21. React.js
22. React.js Library for creating UIs Renders the DOM and responds to user events Can be thought of as the V in MVC
23. Remember our utopic example a few slides back?
24. f u n c t i o n t w e e t S c o r e ( t w e e t ) { r e t u r n ( t w e e t . f a v o r i t e s _ c o u n t + t w e e t . r e t w e e t s _ c o u n t ) ; } f u n c t i o n c o m p a r e T w e e t s B y S c o r e ( a , b ) { r e t u r n ( t w e e t S c o r e ( b ) - t w e e t S c o r e ( a ) ) ; } f u n c t i o n r e n d e r A p p l i c a t i o n ( t w e e t s ) { r e t u r n ( d o c u m e n t . d o m . u l ( { c l a s s : ' t w e e t s ' } , t w e e t s . s o r t ( c o m p a r e T w e e t s B y S c o r e ) . s l i c e ( 0 , 5 ) . m a p ( f u n c t i o n ( t w e e t ) { r e t u r n ( d o c u m e n t . d o m . l i ( { c l a s s : ' t w e e t ' } , t w e e t . t e x t ) ; } ) ) ) ; } v a r t w e e t s = f e t c h T w e e t s ( { u s e r n a m e : ' m p e r e i r a ' } , { l i m i t : 2 0 } ) ; d o c u m e n t . d o m . r e n d e r ( r e n d e r A p p l i c a t i o n ( t w e e t s ) , d o c u m e n t . b o d y ) ;
25. It's actually valid React.js code
26. f u n c t i o n t w e e t S c o r e ( t w e e t ) { r e t u r n ( t w e e t . f a v o r i t e s _ c o u n t + t w e e t . r e t w e e t s _ c o u n t ) ; } f u n c t i o n c o m p a r e T w e e t s B y S c o r e ( a , b ) { r e t u r n ( t w e e t S c o r e ( b ) - t w e e t S c o r e ( a ) ) ; } f u n c t i o n r e n d e r A p p l i c a t i o n ( t w e e t s ) { r e t u r n ( R e a c t . D O M . u l ( { c l a s s N a m e : ' t w e e t s ' } , t w e e t s . s o r t ( c o m p a r e T w e e t s B y S c o r e ) . s l i c e ( 0 , 5 ) . m a p ( f u n c t i o n ( t w e e t ) { r e t u r n ( R e a c t . D O M . l i ( { c l a s s N a m e : ' t w e e t ' } , t w e e t . t e x t ) ; } ) ) ) ; } v a r t w e e t s = f e t c h T w e e t s ( { u s e r n a m e : ' m p e r e i r a ' } , { l i m i t : 2 0 } ) ; R e a c t . r e n d e r C o m p o n e n t ( r e n d e r A p p l i c a t i o n ( t w e e t s ) , d o c u m e n t . b o d y ) ;
27. React gives us a minimally leaky abstraction for a reactive JavaScript/DOM environment.
28. Data Component DOM
29. Model View DOM
30. M3 V2 DOM M2 M4 M5 M1 V1 V3
31. Data C3 DOM C4 C2 C5 C1
32. Components
33. Components Idempotent functions that describe your UI at any point in time.
34. component(data) = VDOM
35. component(data_1) = VDOM_1 *user input changes data from data_1 to data_2* component(data_2) = VDOM_2 diffVDOMs(VDOM_1, VDOM_2) = diff DOMOperations(diff) = operations applyDOMOperations(operations, document.body)
36. Best part? You don't even have to worry about this. Just build components.
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. Frees the programmer from doing manual, explicit DOM operations.
39. But what about the performance? Isn't diffing VDOMs slow? Why have VDOMs if the browser already has a DOM?
40. The DOM is slow.
41. The DOM is slow Querying may require tree traversal Mutations trigger viewport reflows, relayouts, repaints (CSS engine, etc.) Can also invalidate caches, requiring the entire DOM to be reconstructed on the viewport
42. Having in-memory representations of the DOM allows React to have extremely fast UIs.
43. Virtual DOM (VDOM) Allows for components to have a declarative API Performs the minimum amount of actual DOM operations through computing diffs Handles DOM operations for you
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. Components
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. Bill O'Reilly Tide comes in, tide goes out. You can't explain that! Top Tweets Just had #breakfast. @troll yes, definitely plan on that. pic.twitter.com/asd23 #selfie #instagram Good# morning.
48. Bill O'Reilly Top Tweets Tide comes in, tide goes out. You can't explain that! #tides Just had #breakfast. @troll yes, definitely plan on that. pic.twitter.com/asd23 #selfie #instagram Good# morning. Header Profile Tweets Top Tweets
49. v a r P r o f i l e = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( R e a c t . D O M . d i v ( n u l l , [ R e a c t . D O M . i m g ( n u l l , t h i s . p r o p s . u s e r . i m a g e ) , R e a c t . D O M . p ( n u l l , t h i s . p r o p s . u s e r . n a m e ) ] ) ; } } ) ; v a r T w e e t s = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( R e a c t . D O M . u l ( n u l l , t h i s . p r o p s . t w e e t s . m a p ( f u n c t i o n ( t w e e t ) { r e t u r n ( R e a c t . D O M . l i ( n u l l , t w e e t . t e x t ) ) ; } ) ; } } ) ; v a r T o p T w e e t s = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( R e a c t . D O M . d i v ( n u l l , [ R e a c t . D O M . h 1 ( n u l l , ' T o p T w e e t s ' ) , P r o f i l e ( { u s e r : t h i s . p r o p s . u s e r } ) , T w e e t s ( { t w e e t s : t h i s . p r o p s . u s e r . t w e e t s } ) ] ) ; } } ) ; R e a c t . r e n d e r C o m p o n e n t ( T o p T w e e t s ( { u s e r : u s e r } ) , d o c u m e n t . b o d y ) ;
50. v a r P r o f i l e = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > < i m g h r e f = { t h i s . p r o p s . u s e r . i m a g e } / > < p > { t h i s . p r o p s . u s e r . n a m e } < / p > < / d i v > ) ; } } ) ; v a r T w e e t s = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < u l > { t h i s . p r o p s . t w e e t s . m a p ( f u n c t i o n ( t w e e t ) { r e t u r n ( < l i > t w e e t . t e x t < / l i > ) ; } ) } ; < / u l > ) ; } } ) ; v a r T o p T w e e t s = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > < h 1 > T o p T w e e t s < / h 1 > < P r o f i l e u s e r = { t h i s . p r o p s . u s e r } / > < T w e e t s t w e e t s = { t h i s . p r o p s . u s e r . t w e e t s } / > < / d i v > ) ; }
51. TopTweets(data) = Header() + Profile(data_1) + Tweets(data_2)
52. Components are reusable and composable declarative representations of your UI.
53. Collateral Benefits
54. Collateral Benefits Render the application on the server (node.js, Java 8's Nashhorn, etc.) Run the entire application in a Web Worker Render the VDOM to Canvas, SVG, etc. UI testability for free No templates!
55. React.js takeaways Declarative, fast UIs Express your programs in the language of your problem domain
56. ClojureScript
57. Problem JavaScript sucks We need JavaScript
58. JavaScript sucks No integers No module system Verbose syntax Confusing, inconsistent equality operators Confusing, inconsistent automatic operator conversions Lack of block scope Non-uniform iterators Global variables by default 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.)
60. Build better languages on top of JavaScript.
61. Compilers! Lots of them already exist Only a few bring significant improvements Popular ones CoffeeScript: mostly syntax sugar TypeScript: typed superset of JavaScript. Brings type checking, compile time errors
62. ClojureScript
63. ClojureScript is a Clojure compiler that targets JavaScript.
64. Why ClojureScript? Why Clojure? Why LISP?
65. Clojure is just a better language.
66. Number of days spent designing the language v1 JavaScript Clojure
67. ClojureScript LISP STM Runtime polymorphism The REPL Functional programming Immutable data structures Uniform API over immutable data structures Macros Lazy sequences Destructuring State VS Identity etc.
68. core.async ( g o ( t r y ( l e t [ t w e e t s ( < ? ( g e t - t w e e t s - f o r " s w a n n o d e t t e " ) ) f i r s t - u r l ( < ? ( e x p a n d - u r l ( f i r s t ( p a r s e - u r l s t w e e t s ) ) ) ) r e s p o n s e ( < ? ( h t t p - g e t f i r s t - u r l ) ) ] ( . j s / c o n s o l e ( l o g " M o s t r e c e n t l i n k t e x t : " r e s p o n s e ) ) ) ( c a t c h j s / E r r o r e ( . j s / c o n s o l e ( e r r o r " E r r o r w i t h t h e t w i t t e r v e r s e : " e ) ) ) ) ) Asynchronous Error Handling
69. The possibility of having access to the power of Clojure in the browser is immensely valuable.
70. Value To programmers, who will be able to build better programs, with less bugs, faster. To the people and companies who will benefit from those programs.
71. The developer experience has improved significantly.
72. Developer Experience Source maps Easily reproducible tutorials Browser-connected in-editor REPLs Fast compilation cycles Compatible libraries
73. Recommend you to check it out (but you probably have, already)
75. Om
76. ClojureScript interface to React.
77. "Because of immutable data Om can deliver even better performance than React out of the box." David Nolen
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 data structures, slower than JavaScript data structures And yet Om's performance beats that of most JavaScript MVC frameworks
81. "Ideas have fundamental performance properties." Pete Hunt
82. Immutable data structures make React's diffing algorithm really smart.
83. And more...
84. Takeaways
85. "Ideas have fundamental performance properties."
86. "Don't trade simplicity for familiarity."
87. And . give it five minutes
88. Thanks! @mpereira
89. Learn React.js Why? Be Predictable, Not Correct React: Rethinking Best Practices Why React? How Getting Started Introduction to React.js Tutorial
90. Learn ClojureScript Why? ClojureScript Rationale The Future of JavaScript MVC Frameworks Clojure Rationale Why Clojure? Beating the Averages How ClojureScript 101 Translations from JavaScript Light Table ClojureScript Tutorial Om Tutorial