React & ClojureScript in production at Attendify

React Kyiv, Feb 17, 2017

Transcript

1. React & ClojureScript
2. How everyone see LISP devs
3. (defn row-bindings [f ocrs] (concat (:bindings f) (->> (map vector (:ps f) ocrs) (filter (fn [[p ocr]] (named-wildcard-pattern? p))) (map (fn [[p ocr]] [(:sym p) (leaf-bind-expr ocr)]))))) (defn existential-pattern? [x] (instance? IExistentialPattern x)) (defn wildcard-or-existential? [x] (or (wildcard-pattern? x) (existential-pattern? x)))
4. (defn row-bindings [f ocrs] (concat (:bindings f) (->> (map vector (:ps f) ocrs) (filter (fn [[p ocr]] (named-wildcard-pattern? p))) (map (fn [[p ocr]] [(:sym p) (leaf-bind-expr ocr)]))))) (defn existential-pattern? [x] (instance? IExistentialPattern x)) (defn wildcard-or-existential? [x] (or (wildcard-pattern? x) (existential-pattern? x))) What I see
5. (defn row-bindings [f ocrs] (concat (:bindings f) (->> (map vector (:ps f) ocrs) (filter (fn [[p ocr]] (named-wildcard-pattern? p))) (map (fn [[p ocr]] [(:sym p) (leaf-bind-expr ocr)]))))) (defn existential-pattern? [x] (instance? IExistentialPattern x)) (defn wildcard-or-existential? [x] (or (wildcard-pattern? x) (existential-pattern? x))) What the non-Lisper sees
6. How we got there?
7. 2013 Backbone & CoffeeScript
8. 2014 React & CoffeeScript
9. 2014 Q3 React & ClojureScript
10. 2017 ~50,000 LOC of ClojureScript in production
14. • simple, almost no syntax • functional programming • pragmatic • everything is immutable • guest language БЕЗ МОНАД ВСЕ ОЧЕНЬ ПРОСТО
15. LISP LISt Processing КАК ЭТО ЧИТАТЬ?!
16. A list of 3 items (1 "two" 3.0)
17. Nested lists (1 (2 3))
18. Symbolic expression s-expression (+ 1 2) 3
19. Nested s-expressions (+ 1 (+ 2 3 2)) 1 7 8
20. ЧТО ЭТО ВООБЩЕ БЫЛО?
21. REACT
22. (defc Counter [num] [:div [:button {:on-click increment-counter} "-"] [:span num] [:button {:on-click decrement-counter} "+"]]) const Counter = (num) => ( <div> <button onClick={incrementCounter}>-</button> <span>{num}</span> <button onClick={decrementCounter}>+</button> </div> );
23. [:div (case num -1 (Negative) 0 (Empty) 1 (Positive))] <div>{ switch (num) { ... } }</div>
24. (js/setTimeout #(console.log "HELLO!") 100) setTimeout(() => console.log("HELLO!"), 100)
25. ES2015 | Babel | JavaScript CLJS | CLJS Compiler | JavaScript
26. React + ReactDOM Raw Gzip Webpack 2 139KB 42KB Closure Compiler 90KB 32KB Optimization
27. ТЕПЕРЬ О ПЛОХОМ
28. NOPE ['foo', 'react-kyiv', 'org'].join('.')
29. Clojure Hacking Day