XHPをはじめよう

Getting started with XHP

HHVM/Hack勉強会 vol.1 LT@2018/4/20

Transcript

1. XHP をはじめよう HHVM/Hack 勉強会 vol.1 LT 枠@2018-4-20
2. 自己紹介 Masaru Shiraishi istyle.inc 昔は海上自衛隊で船乗ってました
3. みなさんHack やってますか?
4. 一緒にXHP も使ってますか?
5. XHP Facebook で開発されたPHP/Hack 拡張のHTML テンプレー トエンジンの ようなもの。 (XML ベー スの)HTML 構文がPHP/Hack の式として評価されるため、 HTML そのものをオブジェクトとして扱うことが出来たり、 再利用が可 能になります。 Hack の利点であるTypechecker での厳密なチェックが有効になるのも特 徴の一つです。 JavaScript ライブラリのReact のベー スにもなっています。
6. とりあえず見た方が早い!!
7. XHP を使わない実装 <?hh $href = urlencode("http://...."); echo "<a href='${href}'>Hello World</a>"; XHP を使った実装 <?hh $href = "http://...."; $xhp = <a href={$href}>Hello World<a>; echo $xhp;
8. XHP を使わない実装 <?hh $href = urlencode("http://...."); echo "<a href='${href}'>Hello World</a>"; XHP を使った実装 <?hh $href = "http://...."; $xhp = <a href={$href}>Hello World<a>; echo $xhp; ※ HTML が文字列ではないことに注目!!
9. XHP の特徴 HTML 要素を文字列ではなく、 オブジェクトとして扱える HTML やその属性のエスケー プ処理(XSS 対策) が自動 XML がベー スなので仕様が厳格 閉じタグ必須 HTML 要素のネストの誤りはエラー Hack ではTypechecker でのエラー 検出が可能
10. もっと知りたい方はドキュメントを見てください!! https://docs.hhvm.com/hack/XHP/introduction
11. 今日はXHP をやってみたら見えてきた壁を さらっと紹介します
12. ひと手間が必要になる壁
13. そのままではCustome Elements が使えない XHP にはHTML の一般的なタグしか実装されていません。 そのため、Custom Elements を使うとコンパイルエラー になります。 <!-- "-" を含めなくてはならない命名規則がある --> <link rel="import" href="../custom-elements.html"> <custom-tag active></custom-tag> Custom Elements とは HTML の新しい型を定義できるWeb Components の機能。 “ “
14. 解決するには 自分でXHP クラスを実装する必要があります。 <?hh // strict class :custom-tag extends :xhp:html-element { children empty; category %flow; attribute bool active; protected string $tagName = 'custom-tag'; } ※ 正確にはchildren empty; の要素は:xhp:html-singleton をextends するのが正しい
15. これからぶつかるかもしれない壁
16. デザイナー との協業が難しそう Hack のコー ドと混ざってしまう。 public function render(string $name): \XHPRoot { return ( <div class="hello-name"> <p>Hello {$name}</p> </div> ); } 社内ツー ルの実装なので今はまだデザイナー 不在でやってますが....
17. コンクリー トよりも堅い壁
18. 何よりもXHP の情報が少ない!!
19. ほぼこの情報だけで頑張ってます... HHVM/Hack リファレンス https://docs.hhvm.com/hack/XHP/introduction XHP のソー スコー ド https://github.com/hhvm/xhp-lib XHP Bootstrap のソー スコー ド https://github.com/fbsamples/xhp-bootstrap
20. ということで...
21. みなさん一緒にXHP やりましょう!!
22. ご静聴ありがとうございました