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

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

Transcript

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

   View Slide

2. $ whoami
   • Web開発 3年目(PHP Only)
   • Twitter : @kokuyouwind
   • ブログ : blog.kokuyouwind.com
   • ニコニコミュニティ : co1347624
   • ポーカー好き
   このアイコンの人→
   

   View Slide

3. 先週のハッカソン
   

   View Slide

4. テーマ：出会い
   

   View Slide

5. 出会い → 協調作業
   

   View Slide

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

   View Slide

7. お絵かきアプリだ！
   

   View Slide

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

   View Slide

9. screenshot
   

   View Slide

10. 普通じゃね？
    

    View Slide

11. 面白い所：
    HTMLもJavaScriptも
    書いてない！
    

    View Slide

12. Haml？ TypeScript？
    

    View Slide

13. いえいえ
    

    View Slide

14. 全てOCamlです！
    

    View Slide

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

    View Slide

16. 謝罪
    

    View Slide

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

    View Slide

18. Ocsigen
    http://ocsigen.org/
    

    View Slide

19. 基本記法
    {shared{
    type message = string
    }}
    {client{
    let _ = Eliom_lib.alert
    "Hello!"
    }}
    let main_service =
    (* ... *)
    共通コード
    クライアントコード
    サーバーコード
    

    View Slide

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型の値を生成
    

    View Slide

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じゃない)
    

    View Slide

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

    View Slide

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

    View Slide

24. サーバー変数埋め込み
    let message = 0
    {client{
    let _ = Eliom_lib.alert “%s”
    (string_of_int %message)
    }} ↑
    これならオーケー
    

    View Slide

25. 他にも…
    • Bus, React
    – イベントをやりとりする
    – 前者がEvent Driven, 後者がReactive
    – 型が合わないとコンパイル時にエラー
    • Ajaxでのjsonとかの呼び出し
    – service定義を参照してurlを生成
    – 型が合わないとコンパイル時にエラー
    

    View Slide

26. まとめ
    • Ocsigenだと全部Ocamlで書ける
    • コンパイル時点で型起因のバグは弾く
    • コードが割と短くなる
    • 学習コストは結構高い
    • 名古屋こわい
    • ことりちゃんかわいい
    http://tkotori.github.io/
    

    View Slide

27. 終わり
    from @mzp
    

    View Slide

28. 以下予備スライド
    

    View Slide

29. Ocsigenプロジェクト
    • OcsigenServer : Webサーバ
    • Eliom : Webフレームワーク
    • Js_of_ocaml : JSコンパイラ
    • Lwt : 並列計算ライブラリ
    • 他色々
    – http://ocsigen.org/overview/framework
    

    View Slide

30. ページサイズ
    • HTML : 3.39KB
    – 通信用の識別子とかが埋め込まれている
    • JavaScript : 282.39KB
    – OCamlバイトコード => JavaScriptコード
    – 直接読むのは多分辛い
    – 実行はかなり高速らしい
    • VM実行OCamlよりも速い場合があるとのこと
    

    View Slide

31. ことりちゃん？
    • 高階ことり
    • モナドの薄い本のイメージキャラクター
    – @dico_lequeさんの本(予定)
    – @bleisさんと@mzpさんの差し金
    • ことりちゃん可愛い
    • http://tkotori.github.io/
    

    View Slide

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
    

    View Slide