型付きWebフレームワークで遊んでみた

 型付きWebフレームワークで遊んでみた

発表時間5分の社内LT大会で使用した資料です(実名・所属など一部改変)。
OCamlのWebフレームワークOcsigenを使ってみたので、その簡単な紹介となっています。

57c3283d41a55c7b7d3eff256d9176d6?s=128

kokuyouwind

July 14, 2014
Tweet

Transcript

  1. 型付きWebフレームワークで 遊んでみた @kokuyouwind

  2. $ whoami • Web開発 3年目(PHP Only) • Twitter : @kokuyouwind

    • ブログ : blog.kokuyouwind.com • ニコニコミュニティ : co1347624 • ポーカー好き このアイコンの人→
  3. 先週のハッカソン

  4. テーマ:出会い

  5. 出会い → 協調作業

  6. 協調作業 → 一緒にお絵かき

  7. お絵かきアプリだ!

  8. デモ http://draw.kokuyouwind.com/

  9. screenshot

  10. 普通じゃね?

  11. 面白い所: HTMLもJavaScriptも 書いてない!

  12. Haml? TypeScript?

  13. いえいえ

  14. 全てOCamlです!

  15. Code on Github https://github.com/kokuyouwind/ocsigen-tutorial ロジック部分は全てOcamlコード graffiti.eliomは150行弱

  16. 謝罪

  17. さっきのデモは チュートリアルの丸写しです 正直すまんかった

  18. Ocsigen http://ocsigen.org/

  19. 基本記法 {shared{ type message = string }} {client{ let _

    = Eliom_lib.alert "Hello!" }} let main_service = (* ... *) 共通コード クライアントコード サーバーコード
  20. サービス定義 let main_service = Eliom_registration.Html5.register_service ~path:[“hello"] ~get_params:Eliom_parameter.unit (fun () ()

    -> Lwt.return (html (head (title (pcdata “hello")) []) (body [h1 [pcdata “hello, world!"]]))) Html型の値を生成
  21. サービス定義 let main_service = Eliom_registration.Html5.register_service ~path:["graff"] ~get_params:Eliom_parameter.unit (fun () ()

    -> Lwt.return (html (head (title (pcdata "Page title")) []) (body [ul [pcdata "Graffiti"]]))) ↑コンパイル時に型エラー (ulの子要素がliじゃない)
  22. サーバー変数埋め込み let message = “hello” {client{ let _ = Eliom_lib.alert

    “%s” %message }} ↑ %hogeでサーバー側の 変数を参照
  23. サーバー変数埋め込み let message = 0 {client{ let _ = Eliom_lib.alert

    “%s” %message }} ↑ Stringじゃないので エラーになる
  24. サーバー変数埋め込み let message = 0 {client{ let _ = Eliom_lib.alert

    “%s” (string_of_int %message) }} ↑ これならオーケー
  25. 他にも… • Bus, React – イベントをやりとりする – 前者がEvent Driven, 後者がReactive

    – 型が合わないとコンパイル時にエラー • Ajaxでのjsonとかの呼び出し – service定義を参照してurlを生成 – 型が合わないとコンパイル時にエラー
  26. まとめ • Ocsigenだと全部Ocamlで書ける • コンパイル時点で型起因のバグは弾く • コードが割と短くなる • 学習コストは結構高い •

    名古屋こわい • ことりちゃんかわいい http://tkotori.github.io/
  27. 終わり from @mzp

  28. 以下予備スライド

  29. Ocsigenプロジェクト • OcsigenServer : Webサーバ • Eliom : Webフレームワーク •

    Js_of_ocaml : JSコンパイラ • Lwt : 並列計算ライブラリ • 他色々 – http://ocsigen.org/overview/framework
  30. ページサイズ • HTML : 3.39KB – 通信用の識別子とかが埋め込まれている • JavaScript :

    282.39KB – OCamlバイトコード => JavaScriptコード – 直接読むのは多分辛い – 実行はかなり高速らしい • VM実行OCamlよりも速い場合があるとのこと
  31. ことりちゃん? • 高階ことり • モナドの薄い本のイメージキャラクター – @dico_lequeさんの本(予定) – @bleisさんと@mzpさんの差し金 •

    ことりちゃん可愛い • http://tkotori.github.io/
  32. 参考 • Ocsigenプロジェクトページ – http://ocsigen.org/ • OCamlで構築するモダンWeb – http://proofcafe.org/~keigoi/pplss2012- ocaml.pdf

    • OCamlで作ったWebアプリをHerokuで 動かす方法(2) – http://mzp.hatenablog.com/entry/2013/06 /08/003029