RiotJS + CSS #meguroes

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

Transcript

1. RiotJSͱCSS 2016/04/19 Meguro.es #3 @mizuki_r
2. PROFILE @mizuki_r 5XJUUFS
   
   !NJ[VLJ@S
   (JUIVC
   
   
   SZ@NJ[VLJ
   OQN
   
   
   
   
   
   NJ[VLJ@S
   "OHVMBS
   3JPU+4·ΘΓͷ࢖͍ख
   (PUBOEB+4͔Β΍͖ͬͯ·ͨ͠ 2
3. AGENDA ▸ RiotJSͱ͸ ▸ RiotJS + CSS ▸ RiotJS + CSS + Webpack ▸ Conclusion
4. RIOTJSͱ͸ INTRODUCTION
5. RIOTJSͱ͸ A React-like user interface micro-library ▸ ReactͬΆ͍খ͞ͳUIϥΠϒϥϦ ▸ React͕38.56KBͰRiot͕8.61KBʢhttp://riotjs.com/ja/ ▸ API͕গͳ͘ɺֶशίετ͕௿͍ ▸ ඞཁ࠷௿ݶͷػೳͷΈͰߏ੒͞ΕͨɺϛχϚϜελʔτΞο ϓͳײ͡ͷϥΠϒϥϦ
6. <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo>
7. <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> ίϯϙʔωϯτΛఆٛ
8. <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> DOMͷఆٛ
9. <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> ৼΔ෣͍ͷఆٛ
10. RIOTJSͱ͸ ؆୯ʹ࢖͑Δখ͞ͳϥΠϒϥϦ ▸ JavaScript in HTML ▸ ਺গͳ͍API ▸ lifecycle (mount, update, updated, unmount) ▸ update ▸ yield ▸ dom events
11. RIOTJSͱ͸ ·ͱΊ ▸ খͯ͘͞खૣ࢝͘ΊΒΕΔϛχϚϜͳUIϥΠϒϥϦ
12. RIOTJS+CSS RIOTJSʹ͓͚ΔCSSͷར༻ํ๏
13. RIOTJS + CSS CSSͷهड़ ▸ λάͷதʹ `<style>` Λهड़͢Δ ▸ `<style>` ͷதʹCSSΛهड़͢Δ
14. RIOTJS + CSS CSSͷهड़ <todo> <!-- layout --> <h3>{ opts.title }</h3> <style> todo { display: block } todo h3 { font-size: 120% } </style> <todo>
15. RIOTJS + CSS Scoped CSSͷهड़ ▸ λάͷதʹ `<style scoped>` Λهड़͢Δ ▸ `<style>` ͷதʹCSSΛهड़͢Δ ▸ `:scope` ͷٖࣅཁૉʹελΠϧΛ౰ͯΔ
16. RIOTJS + CSS Scoped CSSͷهड़ <todo> <!-- layout --> <h3>{ opts.title }</h3> <style scoped> scope: { display: block } h3 { font-size: 120% } </style> <todo>
17. RIOTJS + CSS λάΛϕʔεͱͨ͠ελΠϦϯά ▸ ͜ͷ̎ͭͷॻ͖ํ͸ಉ݁͡ՌʹͳΔ <todo> <!-- layout --> <h3>{ opts.title }</h3> <style> todo { display: block } todo h3 { font-size: 120% } </style> <todo> <todo> <!-- layout --> <h3>{ opts.title }</h3> <style scoped> scope: { display: block } h3 { font-size: 120% } </style> <todo>
18. RIOTJS + CSS headλά΁ͷૠೖ ▸ λάͷ಺෦ʹهࡌ͞Εͨ `<style>` ͸ `<head>` ͷ຤ඌʹૠ ೖ͞ΕΔ ▸ Ұ౓ૠೖ͞ΕͨΒɺ࠶౓͸ૠೖ͞Εͳ͍ ▸ shadow-domͰ͸ͳ͍͕ɺ͍ۙΞϓϩʔνΛऔΔ
19. RIOTJS + CSS ·ͱΊ ▸ λάͷதʹ `<style>` Λهड़͠ɺͦ͜ʹCSSΛॻ͘ ▸ `<style>` ͸ `<head>` ͷ຤ඌʹૠೖ͞ΕΔ ▸ `<style scoped>` Λ࢖͏͜ͱͰɺλά໊ͷهࡌΛলུͰ͖Δ
20. RIOTJS+CSS+WEBPACK CSSϥΠϒϥϦͱͷ࿈ܞ
21. RIOTJS + CSS + WEBPACK CSS͸༷ʑͳϥΠϒϥϦʹࢧ͑ΒΕ͍ͯΔ ▸ autoprefixer ▸ meta css ▸ postcss ▸ etc… ͜ΕΒͷԸܙΛ͋·ͣ͞ड͚͍ͨ!!!
22. RIOTJS + CSS + WEBPACK webpackͷར༻ ▸ ঺հ͸লུ ▸ riotjs-loader + style-loader + css-loader + anywhere
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') ]
24. RIOTJS + CSS + WEBPACK webpackͷར༻ var style = require(‘./style’) <todo> <!-- layout --> <h3>{ opts.title }</h3> <style>{ style }</style> <todo>
25. RIOTJS + CSS + WEBPACK webpackΛ࢖͏ϝϦοτ ▸ λάͷఆٛͱɺελΠϧͷఆٛΛҰॹʹ؅ཧͰ͖Δ ▸ σΟϨΫτϦʹࠝแͰ͖Δ ▸ ίϯϙʔωϯτͱͯ͠ɺ৘ใઃܭɾৼΔ෣͍ɾσβΠϯ͕ಠ ཱ͠ɺΞϓϦέʔγϣϯ͔Βૄ݁߹ʹͳΔ
26. RIOTJS + CSS + WEBPACK ·ͱΊ ▸ webpack࢖͏ͱ͍͍Αʂ ▸ webpackΛ࢖͏ͱίϯϙʔωϯτʹσβΠϯ·Ͱ಺แͰ͖ Δ ▸ ΞϓϦέʔγϣϯͱίϯϙʔωϯτΛૄʹͰ͖Δ
27. CONCLUSION ·ͱΊͱɺ͜Ε͔ΒͷCSSઃܭ
28. CONCLUSION RiotJSͱCSSΛ͍͍ײ͡ʹ࿈ܞͤ͞Δํ๏ͷ঺հ ▸ RiotJSͰCSSΛ࢖͏ʹ͸ɺλάʹ `<style>` Λॻ͘ ▸ `<style>` ʹهࡌ͞ΕͨCSS͸ `<head>` ͷ຤ඌʹૠೖ ▸ webpackΛ࢖ͬͯίϯϙʔωϯτʹσβΠϯΛ࣋ͨͤΔ
29. CONCLUSION ίϯϙʔωϯτࢦ޲࣌୅ͷCSSઃܭ ▸ ίϯϙʔωϯτʹελΠϧΛӅṭ͢Δ࣌୅ ▸ λάʹରͯ͠ελΠϧΛ౰ͯΔ ▸ ਌ˠࢠʹରͯ͠͸ɺmodifier౳Ͱίϯϙʔωϯτ֎͔Β͸ ಺෦ߏ଄Λҙࣝ͠ͳ͍ૄ݁߹ͳελΠϧ੍ޚ ▸ ίϯϙʔωϯτͱͯ͠৘ใઃܭɾৼΔ෣͍ɾσβΠϯΛந৅ Խ͢Δ͜ͱͰɺͦΕ୯ମͷࠩ͠ସ͑ΛΑΓ؆୯ʹ
30. CONCLUSION ࠓޙͷ՝୊ ▸ ίϯϙʔωϯτ͸Ͳ͜·ͰͷσβΠϯΛ࣋ͭ΂͖͔ʁ ▸ ৭ʁϨΠΞ΢τʁ༨നʁܗʁ ▸ ͜ͷลΓ͸DDDͷʮڥքΛҾ͘ʯ͋ͨΓͷφϨοδ͕ඞ ཁͦ͏ ▸ ࠓ·ͰҎ্ʹσβΠφͱΤϯδχΞ͕ڠྗͯ͠ઃܭΛ٧Ίͯ ͍͘ඞཁ͕͋Γͦ͏
31. CONCLUSION ࠷ޙʹ ▸ RiotJS͸؆୯ʹखૣ͘ϓϩτλΠϐϯάͰ͖ΔͷͰ͓͢͢Ί Ͱ͢ʂʂʂ
32. ۓٸࠂ஌ ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ
33. 6/3ʹGontanda.js #4 ͷ։ ࠵Λ༧ఆͯ͠·͢ʂ @pine613 ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ
34. ڵຯ͋Δํ͸ͥͻ gotanda.js.org ΁ʂ @pine613 ͨ͐͝͡ʔ͔Βͷ͓஌Βͤ
35. THANKS!