More Related Content
What's hot (20)
Similar to 高速！Clojure Web 開発入門 (20)
高速！Clojure Web 開発入門
- 2. 自己紹介
- 3. The RedMonk Programming Language Rankings: January 2016 http://redmonk.com/sogrady/2016/02/19/language-rankings-1-16/
- 4. 本日話す内容 Clojure / Script に興味があるという人は増えている印象だが Web アプリケーション採用事例はあまり聞かない... • 採用事例: • CircleCI (Clojurescript) • kawasima-san products • job-streamer, back-channeling, axebomber-clj etc. • Clojure / Script で作ったはいいけど保守できる人がいない Clojure / Script 開発者の裾野を広げたい • Clojure / Script を採用する利点として Web 開発の高速さを紹介 • component / duct を例に紹介
- 5. 本日話す内容 component / duct • component / duct とは • RDD (REPL Driven Development) • 他のライブラリ / ツールとの組み合わせ • figwheel • garden • reagent Clojure / Script による Web アプリケーション開発サイクル cljc (Reader Conditionals)
- 6. component / duct とは component - https://github.com/stuartsierra/component • アプリケーションの状態を一元管理するためのフレームワーク duct - https://github.com/duct-framework/duct • component 上に Web アプリを構築するためのフレームワーク （プロジェクトテンプレートと少量のライブラリ） • 12-factor app に従ったアプリケーション構築が可能
- 7. component / duct とは component を使わない場合 • Web アプリのような多数の状態を持つアプリケーションを atom / ref で 構築すると... • 状態が散らばりどこを参照しているのか分からなくなる • 状態間の依存関係によりリセットが上手くいないことも atom atom atom atom atom ref ref ref ref 参照 依存
- 8. component を使った場合 • ソフトウェアをコンポーネントという単位に分割 • ソフトウェア内の状態をコンポーネント単位で管理 • コンポーネント間の依存関係を定義できる component / duct とは 状態 状態 状態 状態 ring-jetty-component db-component handler-component endpoint-component system-map endpoint-component db-component に依存 handler-component db-component に依存 service-component に依存 ring-jetty-component handler-componentに依存 system-using
- 9. component を使った場合 • 各コンポーネントにライフサイクルを定義できる • ライフサイクルと依存関係から適切にソフトウェア全体の状態を適切 に初期化・リセットできるようになる component / duct とは 状態 ring-jetty-component 状態 db-component start 設定（handler含む）からjettyサーバ起動 起動したサーバは状態として保持 stop 状態として保持されたサーバを停止 handlerも破棄 start 設定（handler含む）からDBへ接続 接続情報は状態として保持 stop DBとの接続解除 接続情報も破棄
- 10. component / duct とは 実際の定義例 system-map 定義 component 間 の依存関係 from job-streamer-control-bus - https://github.com/job-streamer/job-streamer-control-bus
- 11. component / duct とは component FW 上で ring-clojure のアプリを構築するための ライブラリ（コンポーネント）+ プロジェクトテンプレート • ミドルウェア定義（handler）とルート定義（endpoint）を コンポーネント化 • その他 figwheel（後述）等による開発プロセスもコンポーネント化 • コンポーネント初期化時の設定を共通設定 / 環境依存設定に分けて 定義することで 12-factor app に従ったアプリケーションを簡単に構築 できる
- 12. component / duct とは handler component 実際の定義例 ミドルウェア定義 定義を元にハンドラ をコンポーネント化
- 13. component / duct とは endpoint component 実際の定義例 ルート定義 （compojure） ルート定義を元に エンドポイントを コンポーネント化
- 14. component / duct とは 12-factor app に従い環境依存の設定は環境変数に切り出す 環境依存する設定（及びデフォルト） ➡ 環境変数として設定 / 取得 環境に依存しない設定 ➡ ハードコーディング マージした設定を元に コンポーネントを生成して起動
- 15. component / duct での RDD RDD (REPL Driven Development) component / duct で構築した Web アプリケーション操作は全て Clojure REPL から実行可能 • 初期化（設定読み込み） • 起動 • 停止 • リセット • ... Web アプリケーションの変更をすぐに確認可能
- 16. 起動 component / duct での RDD
- 17. component / duct での RDD リセット
- 18. component / duct での RDD RDD に組み合わせると便利なライブラリ • eftest - https://github.com/weavejester/eftest • テストコード検索 / テストランナー • REPL から実行可能 • alembic - https://github.com/pallet/alembic • project.clj （leiningen によるプロジェクト定義）の再読み込み • 依存ライブラリを追加 / 変更した際に即反映できる
- 19. 他のライブラリ / ツールとの組み合わせについて garden – https://github.com/noprompt/garden • Clojure の list から css を生成するライブラリ • Clojure / Script 両対応のため、cljs に直接埋め込むことも可
- 20. 他のライブラリ / ツールとの組み合わせについて reagent - https://github.com/reagent-project/reagent • A simple ClojureScript interface to React. • hiccup 記法で React.js の VDOM が表現できる
- 21. 他のライブラリ / ツールとの組み合わせについて figwheel - https://github.com/bhauman/lein-figwheel • cljs のビルドとブラウザへのホットロードを行う leiningen plugin • duct より figwheel-component が提供されている • 前述の garden もコンポーネント化することで、 css ビルド ➡ js ビルド ➡ js / css ブラウザプッシュ という流れが実現できる style clj
- 22. 以上のライブラリを組み合わせると下記が全て REPL から 実行可能になる • サーバサイドロジック（clj）の変更とブラウザでの確認 • js（cljs）の変更 / ビルドとブラウザでの確認 • css（clj）の変更 / ビルドとブラウザでの確認 Clojure / Script による Web アプリケーション開発サイクル
- 23. Clojure / Script による Web アプリケーション開発サイクル REPL 起動
- 24. Clojure / Script による Web アプリケーション開発サイクル Remote REPL 接続
- 25. Clojure / Script による Web アプリケーション開発サイクル duct-figwheel-component cljs garden-component clj css js build build ring-jetty-component db-component handler-component endpoint-component user=> (go) Remote REPL
- 26. Clojure / Script による Web アプリケーション開発サイクル duct-figwheel-component cljs request garden-component clj ring-jetty-component db-component handler-component endpoint-component index.html app.js screen.css Remote REPL css js
- 27. Clojure / Script による Web アプリケーション開発サイクル duct-figwheel-component cljs websocket garden-component clj ring-jetty-component db-component handler-component endpoint-component index.html app.js screen.css Remote REPL css js
- 28. Clojure / Script による Web アプリケーション開発サイクル duct-figwheel-component cljs garden-component clj css css js build build ring-jetty-component db-component handler-component endpoint-component user=> (reset) Remote REPL clj cljs websocket index.html app.js screen.cssapp.js push screen.css push style clj
- 29. Clojure / Script による Web アプリケーション開発サイクル duct-figwheel-component cljs garden-component clj css css js build build ring-jetty-component db-component handler-component endpoint-component Remote REPL clj cljs style clj websocket index.html app.js screen.css :on-jsload (reagent/render ...) user=> (reset)
- 30. 以降は下記の手順を繰り返すだけで開発可能 1. clj, cljs ファイル修正 2. REPL からリセット 3. ブラウザ確認 依存ライブラリを増やす場合 • project.clj を修正して REPL より alembic/load-project 複雑なロジックに対してテストを追加した場合 • テストコードを追加して REPL より eftest/find-tests, eftest/run-tests 後は “REPL を切ったら負け” という思いで開発する Clojure / Script による Web アプリケーション開発サイクル
- 31. cljc (Reader Conditionals) JVM / Javascript クロスプラットフォームを実現する仕組み • cljc ファイルは Clojure / Script のいずれからも読み込める • コード中のプラットフォーム依存部分をReader Conditionals にて切り替え可能 • 精査、ユーティリティなどを Clojure / Script で共通化できる JVM / js で切替
- 32. cljc (Reader Conditionals) components figwheel-component server-component handler-component endpoint-component garden-component reagent cljc (utility, validation, style...) clj cljs duct 参照
- 33. How to start duct がプロジェクトテンプレートを提供 • プロジェクト作成時にオプションで cljs やexample endpoint の追加など が行える • プロジェクト生成後も leiningen プラグインから endpoint や component の追加が可能
- 34. まとめ Clojure / Script を Web 開発に採用すれば... • component / duct による状態の一元管理により簡潔な Web アプリケー ションを構築出来る • REPL による高速な開発プロセス • cljc によるクロスプラットフォームでのコード共有が可能 Try Clojure!