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

jade template

oted
August 22, 2014
Technology
0
510

jade template

oted

August 22, 2014
Tweet

Other Decks in Technology

See All in Technology
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
820
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.8k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
480
Cracking the KubeCon CfP
inductor
2
220
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
Janus
bkuhlmann
1
490
JAWS-UG Bedrock Claude Night
yamahiro
3
530
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2.1k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Oracle Cloud Infrastructure：2024年4月度サービス・アップデート
oracle4engineer
PRO
1
180
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Making Projects Easy
brettharned
108
5.5k
A designer walks into a library…
pauljervisheath
200
23k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
GitHub's CSS Performance
jonrohan
1025
450k
Code Reviewing Like a Champion
maltzj
514
39k
It's Worth the Effort
3n
180
27k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
GraphQLとの向き合い方2022年版
quramy
32
12k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k

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. ご清聴ありがとうございました。