Riot - Introduction (Japanese)

「Riot入門と冬休みの宿題」CMU35
http://cmu.connpass.com/event/23769/

Transcript

1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ೖ໳ͱౙٳΈͷ॓୊
2. Riot.js?
3. ϢʔβʔΠϯλʔϑΣʔε ϚΠΫϩϥΠϒϥϦʔ UI
4. K2VFSZ
5. มԽΛఆٛ
   K2VFSZ ݟͨ໨Λఆٛ
6. React Angular Vue Polymer
7. React Angular Vue Polymer +BWB4DSJQUϋʔυίΞ )5.-ϋʔυίΞ ະདྷ೿ ΏͱΓੈ୅ ωΠςΟϒ
   ΏͱΓੈ୅
8. ΍͢Β͔ʹɺK2VFSZ
9. ࢼͯ͠ΈΑ͏ɻ
11. bit.ly/riot-1
12. • Custom tags = Component • Enjoyable syntax • Virtual DOM • Tiny size: library, learning cost, your code ͳΜͰ3JPU
13. 18KB riot.min.js gzip 8KB ͪͬͪΌ͍
14. Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB Riot 18KB ൺ΂ͯΈΔ
15. 3FBDU 3JPU +4
    JO
    )5.-
16. • CSS with scope • independent • no more BEM! 4DPQFE
    $44
17. %0.ʹϚ΢ϯτ
18. TAG file JS $ npm install -g riot $ riot filename.tag ίϯύΠϧ
19. <my-tag> <p>{ message }</p> <style>p { color:white }</style> <script>…</script> </my-tag> riot.tag(‘my-tag’, ‘<p>{ message }</p>’, ‘p { color:white }’, function(opts) {…} ) ίϯύΠϧ
20. • gulp-riot • riotify • riotjs-loader ϓϦίϯύΠϧ
21. karma-riot ςετ
22. <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts reusables ૊Έཱͯ
23. <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts reusables route data store observable ૊Έཱͯ
24. Flux Redux Jade Page.js ES6 Less ͋ͳ͍ͨͩ͠
25. github.com/riot/examples ެࣜ༻ྫू
26. EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτ
30. ࠓ͔Β࢖͑Δ
31. ౙٳΈͷ॓୊
    
    3JPU
32. Thank you!