Riot - Introduction (Japanese) - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ೖ໳ͱౙٳΈͷ॓୊

Slide 2

Slide 2 text

Riot.js?

Slide 3

Slide 3 text

ϢʔβʔΠϯλʔϑΣʔε ϚΠΫϩϥΠϒϥϦʔ UI

Slide 4

Slide 4 text

K2VFSZ

Slide 5

Slide 5 text

มԽΛఆٛ K2VFSZ ݟͨ໨Λఆٛ

Slide 6

Slide 6 text

React Angular Vue Polymer

Slide 7

Slide 7 text

React Angular Vue Polymer +BWB4DSJQUϋʔυίΞ )5.-ϋʔυίΞ ະདྷ೿ ΏͱΓੈ୅ ωΠςΟϒΏͱΓੈ୅

Slide 8

Slide 8 text

΍͢Β͔ʹɺK2VFSZ

Slide 9

Slide 9 text

ࢼͯ͠ΈΑ͏ɻ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

bit.ly/riot-1

Slide 12

Slide 12 text

• Custom tags = Component • Enjoyable syntax • Virtual DOM • Tiny size: library, learning cost, your code ͳΜͰ3JPU

Slide 13

Slide 13 text

18KB riot.min.js gzip 8KB ͪͬͪΌ͍

Slide 14

Slide 14 text

Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB Riot 18KB ൺ΂ͯΈΔ

Slide 15

Slide 15 text

3FBDU 3JPU +4JO)5.-

Slide 16

Slide 16 text

• CSS with scope • independent • no more BEM! 4DPQFE$44

Slide 17

Slide 17 text

%0.ʹϚ΢ϯτ

Slide 18

Slide 18 text

TAG ﬁle JS $ npm install -g riot $ riot filename.tag ίϯύΠϧ

Slide 19

Slide 19 text

{ message }

p { color:white } … riot.tag(‘my-tag’, ‘

{ message }

’, ‘p { color:white }’, function(opts) {…} ) ίϯύΠϧ

Slide 20

Slide 20 text

• gulp-riot • riotify • riotjs-loader ϓϦίϯύΠϧ

Slide 21

Slide 21 text

karma-riot ςετ

Slide 22

Slide 22 text

views parts reusables ૊Έཱͯ

Slide 23

Slide 23 text

views parts reusables route data store observable ૊Έཱͯ

Slide 24

Slide 24 text

Flux Redux Jade Page.js ES6 Less ͋ͳ͍ͨͩ͠

Slide 25

Slide 25 text

github.com/riot/examples ެࣜ༻ྫू

Slide 26

Slide 26 text

EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

ࠓ͔Β࢖͑Δ

Slide 31

Slide 31 text

ౙٳΈͷ॓୊3JPU

Slide 32

Slide 32 text

Thank you!