Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reagent & re-frameのすすめ

995 views

Published on

市ヶ谷Geek★Night #18 フロントエンド、マジ卍での登壇資料です
https://ichigayageek.connpass.com/event/87792/

Published in: Engineering
  • Be the first to comment

Reagent & re-frameのすすめ

  1. 1. Copyright © 2018 eureka, Inc. All rights reserved. Keitaro Takeuchi Reagent & re-frameのすすめ
  2. 2. Copyright © 2018 eureka, Inc. All rights reserved.2 ● 竹内景太郎(a.k.a. BOXP) ● Front-End Engineer at eureka, Inc. (二年目) ● Go,TypeScript,Clojure ● VRChatはじめました (who (am i))
  3. 3. Copyright © 2018 eureka, Inc. All rights reserved.
  4. 4. Copyright © 2018 eureka, Inc. All rights reserved.
  5. 5. Copyright © 2018 eureka, Inc. All rights reserved. 弊社でのClojureの使われ方 - 社内イベント管理システム - golang, Clojure(ClojureScript) - 勉強会の参加者募集などに使用中 - Slackbot - Clojure - PRレビューの割当などに使用中
  6. 6. Copyright © 2018 eureka, Inc. All rights reserved. 弊社でのClojureの使われ方 - 社内イベント管理システム - golang, Clojure(ClojureScript) - 勉強会の参加者募集などに使用中 - Slackbot - Clojure - PRレビューの割当などに使用中
  7. 7. Reagent & re-frame
  8. 8. Copyright © 2018 eureka, Inc. All rights reserved. ● ClojureScript向けReact.jsラッパー ● 2013年に登場 ● ClojureのS式でレイアウトする ○ Hiccup構文 ○ Componentは全て関数 Reagentとは
  9. 9. ちなみにS式とは
  10. 10. “S式(エスしき、英: S-expression)とは、Lispで導入され、 主にLispで用いられる、2分木ないしリスト構造の形式的な 記述方式。SはSymbolに由来。” - wikipedia
  11. 11. Copyright © 2018 eureka, Inc. All rights reserved. ● Clojureでも例外ではなく頻繁にS式が使われます ● Clojureには様々なS式があります ○ List: ‘() ○ Vector: [] ○ Set: #{} ○ HashMap: {} ● 言語標準ライブラリは殆どこれらの為のもの ClojureにおけるS式
  12. 12. Clojureの真価は S式を駆使してこそ発揮される
  13. 13. Copyright © 2018 eureka, Inc. All rights reserved. ● テンプレートも全てClojureのS式なので評価方法の違いを意識する必要がない Reagentの利点 〜全てがClojureである〜
  14. 14. Copyright © 2018 eureka, Inc. All rights reserved. ● Reagentの補助的フレームワーク ○ アーキテクチャやデータフローの提供 ■ dispatch ■ event handler ■ effect handler ■ query ■ view ■ Reagent/React ○ ボイラーテンプレートの提供 ● 2014年に登場 re-frameとは
  15. 15. Copyright © 2018 eureka, Inc. All rights reserved. re-frameの利点 〜全てをリスト処理にする〜 [:post “hello"] (defn submit [{:keys [db]} [_ text]] {:http-xhrio {:method :post :params {:text text} :on-success [:success] :on-error [:error] :db (assoc db :loading-indicator :loading})dispatch EventHandler
  16. 16. Copyright © 2018 eureka, Inc. All rights reserved. ● 外部からの入力をリストで受け取り、外部への作用をS式で返すことでアプリケー ションの振る舞いが決まる re-frameの利点 〜全てをリスト処理にする〜 [:post “hello"] (defn submit [{:keys [db]} [_ text]] {:http-xhrio {:method :post :params {:text text} :on-success [:success] :on-error [:error] :db (assoc db :loading-indicator :loading})dispatch postリクエスト app-stateの更新 & 画面の再描画 EventHandler
  17. 17. Copyright © 2018 eureka, Inc. All rights reserved. ● 予め定義しておいたqueryと、テンプレートを組み立てるview層が描画する内容 を決めます re-frameの利点 〜画面の描画もリスト処理に〜 {:loading-indicator :success} app-state (defn loading-indicator [db _] (get db :loading-indicator)) query (defn loading-indicator-view [] (let [state (subscribe :loading-indicator)] [loading-indicator @state])) view
  18. 18. Copyright © 2018 eureka, Inc. All rights reserved. re-frameの利点 〜画面の描画もリスト処理に〜 {:loading-indicator :loading} app-state (defn loading-indicator [db _] (get db :loading-indicator)) query (defn loading-indicator-view [] (let [state (subscribe :loading-indicator)] [loading-indicator @state])) view ブラウザ ● 組み立てたテンプレートがReagentによって描画されます
  19. 19. まとめ
  20. 20. S式の扱いに長けたClojure + S式だけで動くフレームワーク
  21. 21. 全てがS式になって最強に見える
  22. 22. 〜Fin〜 ご清聴ありがとうございました

×