Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JAXBとテンプレートエンジンMixer2

 JAXBとテンプレートエンジンMixer2

日本Javaユーザーズグループ クロスコミュニティカンファレンス2013春 講演
WebデザイナーフレンドリーなJavaテンプレートエンジン"Mixer2"

Yu Watanabe

May 11, 2013
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

  1. テストページ 1
    1
    • 機内モード確認
    • ストップウォッチ スタート確認

    View full-size slide

  2. テストページ 2
    2
    • 機内モード確認
    • ストップウォッチ スタート確認

    View full-size slide

  3. プロローグ
    PROLOGUE
    3

    View full-size slide

  4. 1999
    Java Server Pages
    4

    View full-size slide

  5. 当時の業界記事
    Sun、「JavaServer Pages」の仕様を公開
    http://java.sun.com/products/jsp/
    Sun Microsystems社は2日、「JavaServer
    Pages(JSP)」技術を発表した。
    ...MicrosoftのActive Server Pages
    (ASP)に替わるテクノロジーとして...
    5
    出典:http://internet.watch.impress.co.jp/www/article/1999/0603/jsp.htm

    View full-size slide

  6. ©技術評論社

    View full-size slide

  7. Q. 実際、ビューとして何を使ってますか?
    A) JavaScript + JSON/XML
    B) Velocity, Mayaa, etc
    C) JSP

    View full-size slide

  8. 21世紀ですよ。

    View full-size slide

  9. JAXBとテンプレートエンジン
    Mixer2
    - さらばJSP -
    10
    JJUG CCC 2013 Spring
    日本Javaユーザーズグループ
    クロスコミュニティカンファレンス R5-1
    ベルサール西新宿
    2013-05-11

    View full-size slide

  10. 自己紹介
    • わたなべ
    • SI屋の技術屋さん
    • @nabedge
    • http://nabedge.blogspot.jp
    11

    View full-size slide

  11. 目次
    1.テンプレートエンジン
    2.JAXBとMixer2
    3.性能比較
    4.Mixer2の欠点
    5.ビューのテストをJUnitで
    6.エピローグ
    12

    View full-size slide

  12. テンプレートエンジン
    13
    JSP:一番身近なテンプレートエンジン
    こんにちは
    <% if (name == null) { %>
    ゲストさん
    <% } else { %>
    <%= name %>さん
    <% } %>
    通常のJava言語、EL式、カスタムタグで書く

    View full-size slide

  13. テンプレートエンジン
    14
    Velocity:老舗
    こんにちは
    #if (name == null) {
    ゲストさん
    #else
    ${name}さん
    #end
    VTL = Velocity Template Languageで書く

    View full-size slide

  14. テンプレートエンジン
    15
    FreeMarker:最近人気
    こんにちは
    <#if name?has_content>
    ${name}さん
    <#else>
    ゲストさん
    #if>
    FTL = Freemarker Template Languageで書く

    View full-size slide

  15. 要するに?
    たいていのテンプレートエンジンは、
    何らかの
    テンプレート記述言語(っぽいもの)
    を覚えなければならない
    16

    View full-size slide

  16. Mixer2
    17
    こんにちは
    ななしさん
    Span span = html.getById(“name”, Span.class);
    span.getContent.clear();
    span.getContent.add(“ヤマダ”);
    // これで ヤマダさん
    // が出力
    テンプレートは純粋なXHTMLとCSS
    値の埋め込みやロジックは普通のJava

    View full-size slide

  17. Take back control !
    Java-Webアプリケーションの
    Viewを、 本来の純粋な
    Javaプログラミングと
    htmlマークアップの世界に
    取り戻す!
    18

    View full-size slide

  18. 19
    1.テンプレートエンジン
    2.JAXBとMixer2
    3.性能比較
    4.Mixer2の欠点
    5.ビューのテストをJUnitで
    6.エピローグ

    View full-size slide

  19. JSR-222
    Java
    Architecture for
    XML
    Binding
    20

    View full-size slide

  20. JAXBによるmarshalとunmarshal
    21
    JAXB
    API

    aaa
    bbb
    ccc
    ddd

    root
    foo bar
    アンマーシャル
    マーシャル
    XML文字列 Javaオブジェクト

    View full-size slide

  21. Mixer2によるロードとセーブ
    22
    Mixer2
    &JAXB








    Html
    Head Body
    loadHtmlTemplate
    saveToString
    XHTML Javaオブジェクト

    View full-size slide

  22. Mixer2のHTMLタグとJava型
    23

    ⇔ org.mixer2.jaxb.xhtml.Html

    ⇔ org.mixer2.jaxb.xhtml.Div
    • Mixer2では HTMLタグと
    Javaオブジェクトを相互マッピング
    JAXBのXJCで自動生成した約120種
    のJavaクラスを利用

    View full-size slide

  23. タグの属性へのアクセス
    24
    • タグの属性はJavaオブジェクトの
    プロパティにマッピング。
    • setter/getterメソッドでアクセス。

    をテンプレートとしてロードすると
    String id = div.getId(); // これでidに”foo”
    (html4/5のすべての属性を実装済み)

    View full-size slide

  24. 複数要素はListになる
    25


    Hello World
    foo
    bar


    index 型
    0 P
    1 String
    2 Span
    Html html = mixer2Engine
    .loadHtmlTemplate(
    “template.html”);
    java.util.List
    list = html.getBody()
    .getContent();
    listの中身
    template.html

    View full-size slide

  25. 26
    デモ
    サンプルWebアプリ
    「フルーツショップ」
    https://github.com/nabedge/mixer2-
    sample/tree/master/mixer2-fruitshop-springmvc
    • 時間を確認
    • 15分~20分くらい?

    View full-size slide

  26. MVCフレームワークとMixer2
    1. ViewエンジンとしてのMixer2
    2. なんらかのMVCフレームワーク
    SpringMVC, Struts2, SAStruts...
    3. 組み合わせれば鬼に金棒
    Spring勉強会の資料も参考にどうぞ。
    http://nabedge.blogspot.jp/2013/02/spring-study.html
    27

    View full-size slide

  27. コアなファンのありがたい賛辞
    28

    View full-size slide

  28. 29
    1.テンプレートエンジン
    2.JAXBとMixer2
    3.性能比較
    4.Mixer2の欠点
    5.ビューのテストをJUnitで
    6.エピローグ

    View full-size slide

  29. コアなファンによる ざっくり比較
    30
    このツッコミもかなり当たってます

    View full-size slide

  30. 自分でもテストしてみた
    1. フルーツショップの商品詳細ページ
    →JSP, Velocity, Thymeleaf, Mixer2で
    同じ画面を作る
    2. ApacheJMeterでhttpアクセスを浴びせる
    31

    View full-size slide

  31. 前のページは正確な性能比較か?
    32
    START END
    1. 15ms以下だと観測誤差が大きい(CPU/OS次第)
    2. 総時間での比較はノイズありすぎ
    (でもjspと比較するにはこうするしかない)
    VIEW処理
    httpリクエスト
    コントローラ
    処理
    ビジネスロジック httpレスポンス

    View full-size slide

  32. とにかく、体感速度としてはどうなの?
    33

    View full-size slide

  33. 34
    1.テンプレートエンジン
    2.JAXBとMixer2
    3.性能比較
    4.Mixer2の欠点
    5.ビューのテストをJUnitで
    6.エピローグ

    View full-size slide

  34. Mixer2の欠点
    1. 性能
    →気にするほどの影響かどうか?がポイント
    2. HTML ではなく XHTML が必須
    →HTML5もXML文法で書けばOK
    3. は消えてしまう
    →どうでもいい?
    4. スクリプトレットが無い代わりにJavaコー
    ドが肥大化する
    →Ctrl+Space補完が効くならいいのでは?
    35

    View full-size slide

  35. ちょっと一息
    36
    • 水分補給
    • 時間を確認
    • 35分前後?

    View full-size slide

  36. 37
    1.テンプレートエンジン
    2.JAXBとMixer2
    3.性能比較
    4.Mixer2の欠点
    5.ビューのテストをJUnitで
    6.エピローグ

    View full-size slide

  37. よく見かける開発ルール、スローガン
    『ちゃんとJUnitでテスト書こうぜ!』
    ※ただしJSPは除く
    38

    View full-size slide

  38. SeleniumはUT用ではありません
    • selenium-java-2.*.jar
    • テスト対象をWebアプリとして
    APサーバ上で稼働させておくのが
    前提条件。
    • つまり、単体テストではなく
    結合テストの回帰実行をするための
    もの。
    39

    View full-size slide

  39. Mixer2とJUnitの基本
    40
    タグ型
    オブジェクト
    加工前
    タグ型
    オブジェクト
    加工後
    処理
    span.unsetContent();
    span.getContent().add(“Hello”);
    assertThat(
    span.getContent().get(0).toString()
    ,is(“Hello”));

    View full-size slide

  40. Mixer2によるViewヘルパーのテスト
    41
    実際のテストコードで説明します
    https://github.com/nabedge/mixer2-
    sample/blob/master/mixer2-fruitshop-
    springmvc/src/test/java/org/mixer2/samp
    le/web/

    View full-size slide

  41. エピローグ
    EPILOGUE
    42

    View full-size slide

  42. 「さらば JSP」?
    うん、あれは、釣りです。
    ごめんなさい。
    43

    View full-size slide

  43. ハサミは使いよう
    • 心配性の人は枯れてるJSPで。
    • Velocityが慣れている人は
    Velocityで。
    • TwitterやFacebookみたいな
    画面が必要ならJavaScriptで。
    44

    View full-size slide

  44. Mixer2の部分マーシャルの活用
    45
    Div div = html.getById(“foo”,Div.class);
    String str = m2Engine.saveToString(div);
    1. 特定のタグ(ここではdiv)だけを文字列化
    2. ほかのテンプレート形式に混ぜて出力可能
    <%-- JSP --%>


    <%=str %>




    .......


    View full-size slide

  45. 「選択肢のひとつ」としてのMixer2
    46

    View full-size slide

  46. ご静聴ありがとうございました!
    http://mixer2.org/
    47

    View full-size slide