$30 off During Our Annual Pro Sale. View Details »

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

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

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

kokuyouwind

July 14, 2014
Tweet

More Decks by kokuyouwind

Other Decks in Programming

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