UI Component 作ってますか？

Transcript

1. UI Component 作ってますか？ 2018/08/29 Riot.js LT大会@Tokyo #1
2. HELLO! 井上 暢己（いのうえ のぶき） @black_trooper フリーのWebエンジニア フロントエンドとサーバサイドどっちもやって ます。 2
3. Component 分割してますか？ Riot.js はコンポーネント志向のUIフレームワークです 3
4. 1 Page 1 Component 4 <sample> <div class="menu"> <a class="header item" href="home"> <img src="images/logo.png" alt="" />Sampleサービス </a> <a class="item" href="contact">お問い合わせ</a> </div> <div class="tweet" each="{ tweet in tweets }"> <div class="item-header">{ tweet.full_name }</div> <div class="item"> { tweet.text } </div> <div class="item-footer"> <span class="reply">{ tweet.reply }件の返信</span> <span class="retweet">{ tweet.retweet }件のリツイート</span> <span class="favorite">{ tweet.favorite } いいね</span> </div> </div> </sample>
5. 分割された Component 5 <common-header class="menu"> <a class="header item" href="home"> <img src="images/logo.png" alt="" />Sampleサービス </a> <a class="item" href="contact">お問い合わせ</a> </common-header> <item-footer class="item-footer"> <span class="reply">{ opts.tweet.reply }件の返信</span> <span class="retweet">{ opts.tweet.retweet }件のリツイート</span> <span class="favorite">{ opts.tweet.favorite } いいね</span> </item-footer> <sample> <common-header></common-header> <div class="tweet" each="{ tweet in tweets }"> <div class="item-header">{ tweet.full_name }</div> <div class="item"> { tweet.text } </div> <item-footer tweet="{ tweet }"></item-footer> </div> </sample>
6. Component 公開してますか？ 「自サイトに特化してるから他では使い道ないよ」 6 「たいしたもの作ってないし・・・」
7. 他で使い道ないよ の例 Checkbox Component 初期値に戻す reset メ ソッド 初期値から変更された かを確認する changed メソッド 7 <xx-checkbox> <label> <input type="checkbox" checked="{ checked }" onclick="{ click }" /> <yield /> </label> <script> this.checked = false this.defaultChecked = this.checked this.click = () => { this.checked = !this.checked } this.reset = () => { this.checked = this.defaultChecked } this.changed = () => { return this.checked !== this.defaultChecked } </script> </xx-checkbox> <xx-checkbox>利用規約に同意します </xx-checkbox> CSSの都合でこんな要望があることも - <yield /> は <span> で囲みたい - <input> に xxx というクラスを追加したい
8. CSSとセットじゃないと使いにくい 8
9. CSS Framework 使ってますか？ 9 CSS Framework に特化した Component でいいじゃん！
10. CSS Framework の特徴 10 ▸ カンタンにカッコイイWebサイト が作成できる ▸ レスポンシブデザインに対応し ている ▸ JavaScript（主にJQuery）で DOMを直接いじる ▸ 仮装DOMでページを構成する UI Framework とは相性が悪い ▸ 対策として Component set が 作られた
11. Component set の一例 11 Angular React Vue Riot Bootstrap ngbootstrap reactstrap Bootstrap + Vue Riot-bootstrap (v3) Semantic UI Semantic UI Angular (1.x) Semantic UI React Semantic UI Vue Semantic UI Riot Material Angular Material MATERIAL-UI Vue Material Riot MaterialUI Other RiotGear (for Braze CSS) (Riot 2.x)
12. Semantic UI Riot https://github.com/black-tr ooper/semantic-ui-riot Place your screenshot here 12
13. <su-radio-group ref="radio"> <su-radio value="1">Radio choice1</su-radio> <su-radio value="2">Radio choice2</su-radio> </su-radio-group> <script> const getRadioValue = () => { return this.refs.radio.value } </script> Radio 13 <div class="ui radio checkbox"> <input type="radio" name="radio" ref="radio1" value="1"> <label>Radio choice1</label> </div> <div class="ui radio checkbox"> <input type="radio" name="radio" ref="radio2" value="2"> <label>Radio choice</label> </div> <script> const getRadioValuebyJQuery = () => { return $("[name=radio]:checked").val() } const getRadioValueByRiotRefs = () => { return this.refs.radio1.checked ? this.refs.radio1.value : (this.refs.radio2.checked ? this.refs.radio2.value : null) } </script> Before After 値の取得も簡単に！ refsだけで頑張るとツラい TagとCSSの記述が簡潔
14. npm trends から見る UI Componentの 需要 どの UI Component も需要があるっぽい 14
15. まとめ ▸ Riot.js の Component を積極的に公開し よう❗ ▸ CSS Framework に特化した Component も結構需要あるよ！ ▸ 既存 Component set にない機能を作るも よし、推しCSS Framework向けの Component setを作るもよし ▸ Semantic UI Riot も使ってみてね 15 https://github.com/black-trooper/semantic-ui-riot
16. 16 THANKS! ご清聴ありがとうございました。