React Kyiv – Dec 19, 2017

Transcript

1. Bu l g U i Clo Sc i t ((((((((^_^))))))) Rom u k f o t-en @ At e d
2. Wha w bu ? Man r t , bu h l is u n ne h
3. U s uc
4. Tec c Jav p - Re c - Ow it - Hig h s, d3 - re -vi li - re -se t - re -so b -ho Clo Sc i t - Rum/Re c - Ow it - Bid /Pus (ro g) - Sc e (da li on) - c s-aj Mos y U i r Mos y l i
5. Wha ’s i h d e 1M (260K g i ) ~10K O
6. Re c m o n n C o r (defn button [on-click label] [:button {:on-click on-click} label]) (button console.log "Press me!") p o s Tag Chi l e t [tag-name props & children]
7. ev -d i n ar t ur Flu / Red / ... co r r /re r - Bat d e t (16m im me)
8. Con l s t i k R ’s e c Ini s a (def initial-state {:items [] :loading? false :error nil}) (defmulti products (fn [event _ _] event)) (defmethod products :init [_ _ state] (assoc state :products initial-state)) (defmethod products :fetch-by-category [_ [category] state] ;; fetch & dispatch on done ) Dis c ev t e Ad i t a t Han s c e t
9. Con l s t i k R ’s e c Reg r co r r (def controllers {:products products}) (button {:on-click #(dispatch! :products :fetch-by-category "electronics")} "Show Electronics") Dis c ev
10. Ro t (def routes ["/" [["" :index] ["contacts" :contacts] [["contacts/" :id] :segment] [["contacts/" :segment-id "/profile/" :profile-id] :profile]]]) (bidi.bidi/match-route routes "/contacts/lkasd6812/profile/32hf53412") {:handler :profile :route-params {:segment-id "lkasd6812" :profile-id "32hf53412"}} Ro t ef i n Mat UR ag t o s o d s an Ret s a w m he ro
11. Ro t (cljs.core.match/match screen [:index] (Home) [:profile sid pid] (Profile sid pid) :else (not-found screen)) Ro t Sta U se n -id p o l -id
12. Sta b ri n t i k R ’s o n () (def db (atom {:profiles {:items [] :loading? false} :settings {}})) (def profiles (rum/cursor-in db [:profiles])) (let [{:keys [items loading?]} (rum/react profiles)] (if loading? (render-spinner) (render-profiles items))) Ap ic o s su c t o Re c g o c a g shouldComponentUpdate is p, b at im b e
13. Sta g e t o t i k R ’s Re c (defn profile-names [n] (reduce-cursor-in db [:profiles :items] #(->> % (map :name) (take n)))) (let [items (rum/react (profile-names 100))] (render-profiles items)) Ag eg o f t o Ret s es r 100 p o l
14. Com ca g h a k + Gra + Aut ic c g + Op i s up s + Mon (->> (rpc "audience.fetchAllProfiles" {:account-id "8473"}) (on-done #(dispatch! :profiles :ready %)))
15. Op i s up s re t “up Pro Nam ” s a ba n In an d e profile-id profile-name re n ok? er ? Do n n Put s e b
16. Op i s up s Up a n ti t a l Up a s e m i t (defmethod profile :update [_ [id old-name new-name] state] (->> (rpc "audience.updateProfileName" {:profile-id id :name new-name}) (on-done #(dispatch! :profile :update-ready id old-name %))) (update-profile-by-id id {:name new-name} state)) Dis c -do n er
17. Op i s up s Rol g k o r Rol c fa (defmethod profile :update-ready [_ [id old-name resp] state] (if (error? resp) (update-profile-by-id id {:name old-name} state) state)) Do n n ot w e
18. er h li w m a s Eit m a A va i t e l r i h
19. er h li wi m s (defmethod profiles :load-ready [_ [response] state] (if (either/right? response) (let [profiles (either/right-value response)] (assoc-in state [:profiles :items] profiles)) (assoc-in state [:profiles :error] (either/left-value response)))) Is i ? Un ap va & up s a Set ro h is
20. The monad wa Val i c l va s a U (t a s m u ) re r
21. The monad wa Un ap h e <e t > s a U (e t (t a s m u )) re r
22. The monad wa Un ap h e Either<Error|Profiles> (->> resp (either/map #(map :name %)) (either/map #(map trim %)) (either/map #(map capitalize %))) (->> resp (either/map #(map :events-attended %)) (either/map #(apply + %))) Ren n e Ren ve s t
23. Eve s g Tak re s (defn handle-event [ctrl event & args] (let [curr-state @state next-state (swap! state #(apply-event ctrl event args %)) [before after] (clojure.data/diff curr-state next-state)] (console.log event args before after))) Com ne t Com di lo
24. Eve s ed t Cli Ser Hey v ! Wha ’s o l e t t ? Her i ! (re r) (fe h-s a )
25. Eve s ed t Cli Ser I’m o n n e h el . Gim ur t te! OK! Her ’s s a n ! (re r) (-> % co t e c )
26. Ap yi s Ser Cli s a (s o d-co r r -up ?) (up -s a ) :fi r :in r i s :cu m-fi s :se n
27. (defn сказать-спасибо! [] "Спасибо!") (сказать-спасибо!) ;; "Спасибо!"