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

jade template

Avatar for oted oted
August 22, 2014
Technology
0
520

jade template

Avatar for oted

oted

August 22, 2014
Tweet

Other Decks in Technology

See All in Technology
なぜ今、コスト最適化（倹約）が必要なのか？ ～AWSでのコスト最適化の進め方「目的編」～
Avatar for Hayato Tan htan
1
110
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.1k
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
160
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
550
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
2.6k
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.3k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
590
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
120
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.1k
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
100
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
140

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
300
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k

Transcript

  1. © IMJ Corporation. All Rights Reserved. jadeで作るclient template

  2. © IMJ Corporation. All Rights Reserved. 太田 智彬 TTOOMMOOAAKKII OOTTAA

    テクニカルディレクター // エンジニア 22001122年1122月-- 22001133年66月 WWeebb DDeessiiggnniinngg ((jjQQuueerryy LLaabb..)) 22001133年55月1177日 現場で役立つCCSSSS33デザインパーツライブラリ

  3. © IMJ Corporation. All Rights Reserved. client templateとは

  4. © IMJ Corporation. All Rights Reserved. データとテンプレートを合体させ、文字列 を作る仕組みのこと。

  5. © IMJ Corporation. All Rights Reserved. どんなものがあるのか？

  6. © IMJ Corporation. All Rights Reserved. Mustache / Hogan.js <script

    type=“text/template”> <h1>Hello {{ name }}!</h1> </script>

  7. © IMJ Corporation. All Rights Reserved. Underscore.js / EJS <script

    type=“text/template”> <h1>Hello <%= name %></h1> </script>

  8. © IMJ Corporation. All Rights Reserved. Polymer / platform.js (HTML5

    template) <template id=“greeting”> <h1>Hello {{ name }}!</h1> </template>

  9. © IMJ Corporation. All Rights Reserved. 偉大なる先人達が作り上げたライブラリは どれも素晴らしい。

  10. © IMJ Corporation. All Rights Reserved. だが待ってください。

  11. © IMJ Corporation. All Rights Reserved. jadeを使うという選択肢もあります。

  12. © IMJ Corporation. All Rights Reserved. そもそもjadeとは何なのか？

  13. © IMJ Corporation. All Rights Reserved. HTMLのテンプレートエンジンです。

  14. © IMJ Corporation. All Rights Reserved. jadeを使えばHTML/HTML templateどちらも jadeで書けます。 しかも、ライブラリが一切必要ない。

    さらに、templateを外部ファイルで持てる ため、component管理が可能。

  15. © IMJ Corporation. All Rights Reserved. コンパイル前 / .jade #triton.js

    p= HTML5minutes！ コンパイル後 / .html <div id="triton" class="js"> <p>HTML5minutes！</p> </div>

  16. © IMJ Corporation. All Rights Reserved. jadeはコンパイルオプションを指定すれば、 JavaScriptにもコンパイル出来ます。

  17. © IMJ Corporation. All Rights Reserved. HTMLにコンパイルする時と同様の記法で jadeファイルを作成します。 #triton.js p=

    msg ※msgは変数名です。

  18. © IMJ Corporation. All Rights Reserved. コンパイルすると、objectを引数にとって HTMLを返す関数が生成されます。 function template(object)

    { return ( "<div id=\"triton\" class=\"js\"><p>" + object.msg + "</p></div>” ); };

  19. © IMJ Corporation. All Rights Reserved. では、このコンパイルしたjsファイルをどう使う のか？

  20. © IMJ Corporation. All Rights Reserved. browserifyを使用します。 ※browserifyとは、node.jsのrequireと同等の機能 をclient side

    JavaScriptでも提供してくれるツール です。

  21. © IMJ Corporation. All Rights Reserved. 先ほど作ったjade templateをrequireします。 $ =

    require(‘jQuery’); tmpl = require('./_template.jade');

  22. © IMJ Corporation. All Rights Reserved. 引数にobjectを渡してappendします。 $(‘body’).append( tmpl({ msg:

    'HTML5minutes!' }) );

  23. © IMJ Corporation. All Rights Reserved. <body> <div id="triton" class="js">

    <p>HTML5minutes!</p> </div> </body>

  24. © IMJ Corporation. All Rights Reserved. データバインディング機能を持つMV*フ レームワークと組み合わせると、さらに便 利です。

  25. © IMJ Corporation. All Rights Reserved. 今流行りのVue.jsと連携

  26. © IMJ Corporation. All Rights Reserved. Vue.jsとは

  27. © IMJ Corporation. All Rights Reserved. MVVMというMVCの派生を設計基盤として 構築されたJavascriptフレームワーク。 Viewに特化しており、Angular.js同様データ バインディング機能をもつ。

  28. © IMJ Corporation. All Rights Reserved. _template.jade div p {{name}}

  29. © IMJ Corporation. All Rights Reserved. Vue = require("vue"); tmpl

    = require(“./_template.jade”); Vue.component('test', Vue.extend({ template: tmpl(), data: { name: ”うおーーーー” } })); ~ 省略 ~

  30. © IMJ Corporation. All Rights Reserved. <div> <p>うおーーーー</p> </div>

  31. © IMJ Corporation. All Rights Reserved. API連携やcomponent管理が必要な場合は 是非導入�を検討してみてください。 SPAなど、JavaScriptでコンテンツを丸ごと 差し替える場合は、威力を発揮します。

  32. © IMJ Corporation. All Rights Reserved. サンプルはこちらです。 https://github.com/tk-ota/jade-template

  33. © IMJ Corporation. All Rights Reserved. ご清聴ありがとうございました。