XHPをはじめよう - Speaker Deck

XHPをはじめよう

by shirotter

Slide 1

Slide 1 text

XHP をはじめよう HHVM/Hack 勉強会 vol.1 LT 枠@2018-4-20

Slide 2

Slide 2 text

自己紹介 Masaru Shiraishi istyle.inc 昔は海上自衛隊で船乗ってました

Slide 3

Slide 3 text

みなさんHack やってますか?

Slide 4

Slide 4 text

一緒にXHP も使ってますか?

Slide 5

Slide 5 text

XHP Facebook で開発されたPHP/Hack 拡張のHTML テンプレートエンジンのようなもの。 (XML ベースの)HTML 構文がPHP/Hack の式として評価されるため、 HTML そのものをオブジェクトとして扱うことが出来たり、再利用が可能になります。 Hack の利点であるTypechecker での厳密なチェックが有効になるのも特徴の一つです。 JavaScript ライブラリのReact のベースにもなっています。

Slide 6

Slide 6 text

とりあえず見た方が早い!!

Slide 7

Slide 7 text

XHP を使わない実装 Hello World"; XHP を使った実装 Hello World; echo $xhp;

Slide 8

Slide 8 text

XHP を使わない実装 Hello World"; XHP を使った実装 Hello World; echo $xhp; ※ HTML が文字列ではないことに注目!!

Slide 9

Slide 9 text

XHP の特徴 HTML 要素を文字列ではなく、オブジェクトとして扱える HTML やその属性のエスケープ処理(XSS 対策) が自動 XML がベースなので仕様が厳格閉じタグ必須 HTML 要素のネストの誤りはエラー Hack ではTypechecker でのエラー検出が可能

Slide 10

Slide 10 text

もっと知りたい方はドキュメントを見てください!! https://docs.hhvm.com/hack/XHP/introduction

Slide 11

Slide 11 text

今日はXHP をやってみたら見えてきた壁をさらっと紹介します

Slide 12

Slide 12 text

ひと手間が必要になる壁

Slide 13

Slide 13 text

そのままではCustome Elements が使えない XHP にはHTML の一般的なタグしか実装されていません。そのため、Custom Elements を使うとコンパイルエラーになります。 Custom Elements とは HTML の新しい型を定義できるWeb Components の機能。 “ “

Slide 14

Slide 14 text

解決するには自分でXHP クラスを実装する必要があります。

Slide 15

Slide 15 text

これからぶつかるかもしれない壁

Slide 16

Slide 16 text

デザイナーとの協業が難しそう Hack のコードと混ざってしまう。 public function render(string $name): \XHPRoot { return (

Hello {$name}

); } 社内ツールの実装なので今はまだデザイナー不在でやってますが....

Slide 17

Slide 17 text

コンクリートよりも堅い壁

Slide 18

Slide 18 text

何よりもXHP の情報が少ない!!

Slide 19

Slide 19 text

ほぼこの情報だけで頑張ってます... HHVM/Hack リファレンス https://docs.hhvm.com/hack/XHP/introduction XHP のソースコード https://github.com/hhvm/xhp-lib XHP Bootstrap のソースコード https://github.com/fbsamples/xhp-bootstrap