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.
高速!
Clojure Web 開発入門
2016/07/21
Nishi-Shinju-Clojure #0
堤 一樹
自己紹介
The RedMonk Programming Language Rankings: January 2016
http://redmonk.com/sogrady/2016/02/19/language-rankings-1-16/
本日話す内容
 Clojure / Script に興味があるという人は増えている印象だが
Web アプリケーション採用事例はあまり聞かない...
• 採用事例:
• CircleCI (Clojurescript)
• kawasima-s...
本日話す内容
 component / duct
• component / duct とは
• RDD (REPL Driven Development)
• 他のライブラリ / ツールとの組み合わせ
• figwheel
• garden...
component / duct とは
 component - https://github.com/stuartsierra/component
• アプリケーションの状態を一元管理するためのフレームワーク
 duct - https:...
component / duct とは
 component を使わない場合
• Web アプリのような多数の状態を持つアプリケーションを atom / ref で
構築すると...
• 状態が散らばりどこを参照しているのか分からなくなる
•...
 component を使った場合
• ソフトウェアをコンポーネントという単位に分割
• ソフトウェア内の状態をコンポーネント単位で管理
• コンポーネント間の依存関係を定義できる
component / duct とは
状態 状態
状態 状...
 component を使った場合
• 各コンポーネントにライフサイクルを定義できる
• ライフサイクルと依存関係から適切にソフトウェア全体の状態を適切
に初期化・リセットできるようになる
component / duct とは
状態
rin...
component / duct とは
 実際の定義例
system-map
定義
component 間
の依存関係
from job-streamer-control-bus - https://github.com/job-stream...
component / duct とは
 component FW 上で ring-clojure のアプリを構築するための
ライブラリ(コンポーネント)+ プロジェクトテンプレート
• ミドルウェア定義(handler)とルート定義(end...
component / duct とは
 handler component 実際の定義例
ミドルウェア定義
定義を元にハンドラ
をコンポーネント化
component / duct とは
 endpoint component 実際の定義例
ルート定義
(compojure)
ルート定義を元に
エンドポイントを
コンポーネント化
component / duct とは
 12-factor app に従い環境依存の設定は環境変数に切り出す
環境依存する設定(及びデフォルト)
➡ 環境変数として設定 / 取得
環境に依存しない設定
➡ ハードコーディング
マージした設定...
component / duct での RDD
 RDD (REPL Driven Development)
 component / duct で構築した Web アプリケーション操作は全て
Clojure REPL から実行可能
• 初...
 起動
component / duct での RDD
component / duct での RDD
 リセット
component / duct での RDD
 RDD に組み合わせると便利なライブラリ
• eftest - https://github.com/weavejester/eftest
• テストコード検索 / テストランナー
• REP...
他のライブラリ / ツールとの組み合わせについて
 garden – https://github.com/noprompt/garden
• Clojure の list から css を生成するライブラリ
• Clojure / Scri...
他のライブラリ / ツールとの組み合わせについて
 reagent - https://github.com/reagent-project/reagent
• A simple ClojureScript interface to Reac...
他のライブラリ / ツールとの組み合わせについて
 figwheel - https://github.com/bhauman/lein-figwheel
• cljs のビルドとブラウザへのホットロードを行う leiningen plugi...
 以上のライブラリを組み合わせると下記が全て REPL から
実行可能になる
• サーバサイドロジック(clj)の変更とブラウザでの確認
• js(cljs)の変更 / ビルドとブラウザでの確認
• css(clj)の変更 / ビルドとブラウ...
Clojure / Script による Web アプリケーション開発サイクル
REPL 起動
Clojure / Script による Web アプリケーション開発サイクル
Remote REPL
接続
Clojure / Script による Web アプリケーション開発サイクル
duct-figwheel-component
cljs
garden-component
clj css
js
build
build
ring-jetty-co...
Clojure / Script による Web アプリケーション開発サイクル
duct-figwheel-component
cljs
request
garden-component
clj
ring-jetty-component
db-...
Clojure / Script による Web アプリケーション開発サイクル
duct-figwheel-component
cljs
websocket
garden-component
clj
ring-jetty-component
d...
Clojure / Script による Web アプリケーション開発サイクル
duct-figwheel-component
cljs
garden-component
clj css
css
js
build
build
ring-jett...
Clojure / Script による Web アプリケーション開発サイクル
duct-figwheel-component
cljs
garden-component
clj css
css
js
build
build
ring-jett...
 以降は下記の手順を繰り返すだけで開発可能
1. clj, cljs ファイル修正
2. REPL からリセット
3. ブラウザ確認
 依存ライブラリを増やす場合
• project.clj を修正して REPL より alembic/lo...
cljc (Reader Conditionals)
 JVM / Javascript クロスプラットフォームを実現する仕組み
• cljc ファイルは Clojure / Script のいずれからも読み込める
• コード中のプラットフォ...
cljc (Reader Conditionals)
components
figwheel-component
server-component
handler-component
endpoint-component
garden-comp...
How to start
 duct がプロジェクトテンプレートを提供
• プロジェクト作成時にオプションで cljs やexample endpoint の追加など
が行える
• プロジェクト生成後も leiningen プラグインから e...
まとめ
 Clojure / Script を Web 開発に採用すれば...
• component / duct による状態の一元管理により簡潔な Web アプリケー
ションを構築出来る
• REPL による高速な開発プロセス
• clj...
Upcoming SlideShare
Loading in …5
×

高速!Clojure Web 開発入門

3,394 views

Published on

NIshi-SHinju-Clojure #0 (2016/07/21) 発表資料です。

Published in: Technology
  • Be the first to comment

高速!Clojure Web 開発入門

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

×