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

RiotJS + CSS #meguroes

mizuki_r
April 19, 2016
Technology
2
640

RiotJS + CSS #meguroes

Meguro.es #3 でのトーク内容です

mizuki_r

April 19, 2016
Tweet

More Decks by mizuki_r

See All by mizuki_r
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
200
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
420
モダンとレガシー #gotandaem
rymizuki
0
380
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
88
DockerでNodeの開発は厳しいのか？ #gotandajs
rymizuki
3
310
マネージャー！きみは何者だ！ #gotandaem
rymizuki
0
1.4k
物語を楽しむための物語論
rymizuki
0
420
失敗と向き合う
rymizuki
0
1k
社内勉強会と組織の成長を考える
rymizuki
1
2.1k

Other Decks in Technology

See All in Technology
ノーコードAI開発プラットフォーム「AIMINA」のシステム設計コンセプトと技術的チャレンジ
sbtechnight
PRO
0
340
開幕LT
makamaka
0
350
実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway
ywada526
0
240
"Accelerate State of DevOps" ウェブアプリケーションのdeliveryを考えるとき、今何をすればいいのか
renjikari
3
250
AWS CDKで作るCloudWatch Dashboard
harukasakihara
3
420
BIMIとメールセキュリティ
sbtechnight
PRO
0
400
エンジニアのためのドキュメントライティング / Docs for Developers
iwashi86
20
6.4k
Kafka Consumers at Naver
dongjin
0
180
Wrangler って何だ？-ちょっとよく分からないのでCloudflareのCLIツールを深掘りしてみる-
kentosuzuki
0
200
CloudFront + S3環境から Cloudflare R2 + Workers環境に移行した話
teckl
3
1.3k
ジョブキューシステムFireworqのアーキテクチャ設計と運用時のベストプラクティス
tarao
1
730
権威DNSサービスへのDDoSと
ハイパフォーマンスなベンチマーカ / DNS Pseudo random subdomain attack and High performance Benchmarker
kazeburo
3
840

Featured

See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
Why Our Code Smells
bkeepers
PRO
326
55k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
A designer walks into a library…
pauljervisheath
199
16k
Music & Morning Musume
bryan
37
4.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.5k
Designing for Performance
lara
600
65k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Bash Introduction
62gerente
602
210k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.4k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.6k

Transcript

  1. RiotJSͱCSS
    2016/04/19 Meguro.es #3 @mizuki_r

    View Slide

  2. PROFILE
    @mizuki_r
    5XJUUFS!NJ[[email protected]
    ([email protected][VLJ
    OQNNJ[[email protected]
    "OHVMBS 3JPU+4·ΘΓͷ࢖͍ख
    (PUBOEB+4͔Β΍͖ͬͯ·ͨ͠
    2

    View Slide

  3. AGENDA
    ▸ RiotJSͱ͸
    ▸ RiotJS + CSS
    ▸ RiotJS + CSS + Webpack
    ▸ Conclusion

    View Slide

  4. RIOTJSͱ͸
    INTRODUCTION

    View Slide

  5. RIOTJSͱ͸
    A React-like user interface micro-library
    ▸ ReactͬΆ͍খ͞ͳUIϥΠϒϥϦ
    ▸ React͕38.56KBͰRiot͕8.61KBʢhttp://riotjs.com/ja/
    ▸ API͕গͳ͘ɺֶशίετ͕௿͍
    ▸ ඞཁ࠷௿ݶͷػೳͷΈͰߏ੒͞ΕͨɺϛχϚϜελʔτΞο
    ϓͳײ͡ͷϥΠϒϥϦ

    View Slide



  6. { opts.title }

    { item }



    Add #{ items.length + 1 }


    <br/>this.items = []<br/>add(e) {<br/>var input = e.target[0]<br/>this.items.push(input.value)<br/>input.value = ''<br/>}<br/>

    View Slide



  7. { opts.title }

    { item }



    Add #{ items.length + 1 }


    <br/>this.items = []<br/>add(e) {<br/>var input = e.target[0]<br/>this.items.push(input.value)<br/>input.value = ''<br/>}<br/>

    ίϯϙʔωϯτΛఆٛ

    View Slide



  8. { opts.title }

    { item }



    Add #{ items.length + 1 }


    <br/>this.items = []<br/>add(e) {<br/>var input = e.target[0]<br/>this.items.push(input.value)<br/>input.value = ''<br/>}<br/>

    DOMͷఆٛ

    View Slide



  9. { opts.title }

    { item }



    Add #{ items.length + 1 }


    <br/>this.items = []<br/>add(e) {<br/>var input = e.target[0]<br/>this.items.push(input.value)<br/>input.value = ''<br/>}<br/>

    ৼΔ෣͍ͷఆٛ

    View Slide

  10. RIOTJSͱ͸
    ؆୯ʹ࢖͑Δখ͞ͳϥΠϒϥϦ
    ▸ JavaScript in HTML
    ▸ ਺গͳ͍API
    ▸ lifecycle (mount, update, updated, unmount)
    ▸ update
    ▸ yield
    ▸ dom events

    View Slide

  11. RIOTJSͱ͸
    ·ͱΊ
    ▸ খͯ͘͞खૣ࢝͘ΊΒΕΔϛχϚϜͳUIϥΠϒϥϦ

    View Slide

  12. RIOTJS+CSS
    RIOTJSʹ͓͚ΔCSSͷར༻ํ๏

    View Slide

  13. RIOTJS + CSS
    CSSͷهड़
    ▸ λάͷதʹ `` Λهड़͢Δ<br/>▸ `<style>` ͷதʹCSSΛهड़͢Δ<br/>

    View Slide

  14. RIOTJS + CSS
    CSSͷهड़


    { opts.title }
    <br/>todo { display: block }<br/>todo h3 { font-size: 120% }<br/>

    View Slide

  15. RIOTJS + CSS
    Scoped CSSͷهड़
    ▸ λάͷதʹ `` Λهड़͢Δ<br/>▸ `<style>` ͷதʹCSSΛهड़͢Δ<br/>▸ `:scope` ͷٖࣅཁૉʹελΠϧΛ౰ͯΔ<br/>

    View Slide

  16. RIOTJS + CSS
    Scoped CSSͷهड़


    { opts.title }
    <br/>scope: { display: block }<br/>h3 { font-size: 120% }<br/>

    View Slide

  17. RIOTJS + CSS
    λάΛϕʔεͱͨ͠ελΠϦϯά
    ▸ ͜ͷ̎ͭͷॻ͖ํ͸ಉ݁͡ՌʹͳΔ


    { opts.title }
    <br/>todo { display: block }<br/>todo h3 { font-size: 120% }<br/>



    { opts.title }
    <br/>scope: { display: block }<br/>h3 { font-size: 120% }<br/>

    View Slide

  18. RIOTJS + CSS
    headλά΁ͷૠೖ
    ▸ λάͷ಺෦ʹهࡌ͞Εͨ `` ͸ `<head>` ͷ຤ඌʹૠ<br/>ೖ͞ΕΔ<br/>▸ Ұ౓ૠೖ͞ΕͨΒɺ࠶౓͸ૠೖ͞Εͳ͍<br/>▸ shadow-domͰ͸ͳ͍͕ɺ͍ۙΞϓϩʔνΛऔΔ<br/>

    View Slide

  19. RIOTJS + CSS
    ·ͱΊ
    ▸ λάͷதʹ `` Λهड़͠ɺͦ͜ʹCSSΛॻ͘<br/>▸ `<style>` ͸ `<head>` ͷ຤ඌʹૠೖ͞ΕΔ<br/>▸ `<style scoped>` Λ࢖͏͜ͱͰɺλά໊ͷهࡌΛলུͰ͖Δ<br/>

    View Slide

  20. RIOTJS+CSS+WEBPACK
    CSSϥΠϒϥϦͱͷ࿈ܞ

    View Slide

  21. RIOTJS + CSS + WEBPACK
    CSS͸༷ʑͳϥΠϒϥϦʹࢧ͑ΒΕ͍ͯΔ
    ▸ autoprefixer
    ▸ meta css
    ▸ postcss
    ▸ etc…
    ͜ΕΒͷԸܙΛ͋·ͣ͞ड͚͍ͨ!!!

    View Slide

  22. RIOTJS + CSS + WEBPACK
    webpackͷར༻
    ▸ ঺հ͸লུ
    ▸ riotjs-loader + style-loader + css-loader + anywhere

    View Slide

  23. RIOTJS + CSS + WEBPACK
    webpackͷར༻
    module: {
    preLoaders: [
    { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-
    loader' },
    ],
    loaders: [
    { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!
    css-loader!postcss-loader' }
    ]
    },
    postcss: () ->
    return [
    require('postcss-calc')
    require('postcss-nested')
    require('autoprefixer')
    ]

    View Slide

  24. RIOTJS + CSS + WEBPACK
    webpackͷར༻
    var style = require(‘./style’)


    { opts.title }
    { style }

    View Slide

  25. RIOTJS + CSS + WEBPACK
    webpackΛ࢖͏ϝϦοτ
    ▸ λάͷఆٛͱɺελΠϧͷఆٛΛҰॹʹ؅ཧͰ͖Δ
    ▸ σΟϨΫτϦʹࠝแͰ͖Δ
    ▸ ίϯϙʔωϯτͱͯ͠ɺ৘ใઃܭɾৼΔ෣͍ɾσβΠϯ͕ಠ
    ཱ͠ɺΞϓϦέʔγϣϯ͔Βૄ݁߹ʹͳΔ

    View Slide

  26. RIOTJS + CSS + WEBPACK
    ·ͱΊ
    ▸ webpack࢖͏ͱ͍͍Αʂ
    ▸ webpackΛ࢖͏ͱίϯϙʔωϯτʹσβΠϯ·Ͱ಺แͰ͖
    Δ
    ▸ ΞϓϦέʔγϣϯͱίϯϙʔωϯτΛૄʹͰ͖Δ

    View Slide

  27. CONCLUSION
    ·ͱΊͱɺ͜Ε͔ΒͷCSSઃܭ

    View Slide

  28. CONCLUSION
    RiotJSͱCSSΛ͍͍ײ͡ʹ࿈ܞͤ͞Δํ๏ͷ঺հ
    ▸ RiotJSͰCSSΛ࢖͏ʹ͸ɺλάʹ `` Λॻ͘<br/>▸ `<style>` ʹهࡌ͞ΕͨCSS͸ `<head>` ͷ຤ඌʹૠೖ<br/>▸ webpackΛ࢖ͬͯίϯϙʔωϯτʹσβΠϯΛ࣋ͨͤΔ<br/>

    View Slide

  29. CONCLUSION
    ίϯϙʔωϯτࢦ޲࣌୅ͷCSSઃܭ
    ▸ ίϯϙʔωϯτʹελΠϧΛӅṭ͢Δ࣌୅
    ▸ λάʹରͯ͠ελΠϧΛ౰ͯΔ
    ▸ ਌ˠࢠʹରͯ͠͸ɺmodifier౳Ͱίϯϙʔωϯτ֎͔Β͸
    ಺෦ߏ଄Λҙࣝ͠ͳ͍ૄ݁߹ͳελΠϧ੍ޚ
    ▸ ίϯϙʔωϯτͱͯ͠৘ใઃܭɾৼΔ෣͍ɾσβΠϯΛந৅
    Խ͢Δ͜ͱͰɺͦΕ୯ମͷࠩ͠ସ͑ΛΑΓ؆୯ʹ

    View Slide

  30. CONCLUSION
    ࠓޙͷ՝୊
    ▸ ίϯϙʔωϯτ͸Ͳ͜·ͰͷσβΠϯΛ࣋ͭ΂͖͔ʁ
    ▸ ৭ʁϨΠΞ΢τʁ༨നʁܗʁ
    ▸ ͜ͷลΓ͸DDDͷʮڥքΛҾ͘ʯ͋ͨΓͷφϨοδ͕ඞ
    ཁͦ͏
    ▸ ࠓ·ͰҎ্ʹσβΠφͱΤϯδχΞ͕ڠྗͯ͠ઃܭΛ٧Ίͯ
    ͍͘ඞཁ͕͋Γͦ͏

    View Slide

  31. CONCLUSION
    ࠷ޙʹ
    ▸ RiotJS͸؆୯ʹखૣ͘ϓϩτλΠϐϯάͰ͖ΔͷͰ͓͢͢Ί
    Ͱ͢ʂʂʂ

    View Slide

  32. ۓٸࠂ஌
    ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

    View Slide

  33. 6/3ʹGontanda.js #4 ͷ։
    ࠵Λ༧ఆͯ͠·͢ʂ
    @pine613
    ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

    View Slide

  34. ڵຯ͋Δํ͸ͥͻ
    gotanda.js.org ΁ʂ
    @pine613
    ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ

    View Slide

  35. THANKS!

    View Slide