RiotJS + CSS #meguroes - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

RIOTJSͱ͸ INTRODUCTION

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

{ opts.title }

{ item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' }

Slide 7

Slide 7 text

{ opts.title }

{ item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } ίϯϙʔωϯτΛఆٛ

Slide 8

Slide 8 text

{ opts.title }

{ item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } DOMͷఆٛ

Slide 9

Slide 9 text

{ opts.title }

{ item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } ৼΔ෣͍ͷఆٛ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

RIOTJS+CSS RIOTJSʹ͓͚ΔCSSͷར༻ํ๏

Slide 13

Slide 13 text

RIOTJS + CSS CSSͷهड़ ▸ λάͷதʹ `` Λهड़͢Δ ▸ `<style>` ͷதʹCSSΛهड़͢Δ

Slide 14

Slide 14 text

RIOTJS + CSS CSSͷهड़

{ opts.title }

todo { display: block } todo h3 { font-size: 120% }

Slide 15

Slide 15 text

RIOTJS + CSS Scoped CSSͷهड़ ▸ λάͷதʹ `` Λهड़͢Δ ▸ `<style>` ͷதʹCSSΛهड़͢Δ ▸ `:scope` ͷٖࣅཁૉʹελΠϧΛ౰ͯΔ

Slide 16

Slide 16 text

RIOTJS + CSS Scoped CSSͷهड़

{ opts.title }

scope: { display: block } h3 { font-size: 120% }

Slide 17

Slide 17 text

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

{ opts.title }

todo { display: block } todo h3 { font-size: 120% }

{ opts.title }

scope: { display: block } h3 { font-size: 120% }

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

RIOTJS + CSS ·ͱΊ ▸ λάͷதʹ `` Λهड़͠ɺͦ͜ʹCSSΛॻ͘ ▸ `<style>` ͸ `<head>` ͷ຤ඌʹૠೖ͞ΕΔ ▸ `<style scoped>` Λ࢖͏͜ͱͰɺλά໊ͷهࡌΛলུͰ͖Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

RIOTJS + CSS + WEBPACK CSS͸༷ʑͳϥΠϒϥϦʹࢧ͑ΒΕ͍ͯΔ ▸ autopreﬁxer ▸ meta css ▸ postcss ▸ etc… ͜ΕΒͷԸܙΛ͋·ͣ͞ड͚͍ͨ!!!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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') ]

Slide 24

Slide 24 text

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

{ opts.title }

{ style }

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

CONCLUSION ·ͱΊͱɺ͜Ε͔ΒͷCSSઃܭ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

{ opts.title }

Slide 7

Slide 7 text

{ opts.title }

Slide 8

Slide 8 text

{ opts.title }

Slide 9

Slide 9 text

{ opts.title }

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

{ opts.title }

Slide 15

Slide 15 text

Slide 16

Slide 16 text

{ opts.title }

Slide 17

Slide 17 text

{ opts.title }

{ opts.title }

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

{ opts.title }

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text