Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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
User interface micro-library
Slide 4
Slide 4 text
React Angular Vue Polymer
Slide 5
Slide 5 text
OK, try it
Slide 6
Slide 6 text
bit.ly/riot-1
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
bit.ly/riot-2
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
• Custom tags = Component • Enjoyable syntax • Virtual DOM • Tiny size: library, learning cost, your code Why Riot?
Slide 11
Slide 11 text
18KB riot.min.js Tiny size gzip 8KB
Slide 12
Slide 12 text
Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB Riot 18KB Compare
Slide 13
Slide 13 text
3FBDU JS in HTML 3JPU
Slide 14
Slide 14 text
Scoped CSS • CSS with scope • independent • no more BEM!
Slide 15
Slide 15 text
Mount a riot
Slide 16
Slide 16 text
TAG file JS Compile $ npm install -g riot $ riot filename.tag
Slide 17
Slide 17 text
{ message }
p { color:white } … riot.tag(‘my-tag’, ‘
{ message }
’, ‘p { color:white }’, function(opts) {…} ) Compile
Slide 18
Slide 18 text
Pre-comp • gulp-riot • riotify • riotjs-loader
Slide 19
Slide 19 text
Test karma-riot
Slide 20
Slide 20 text
Build up views parts reusables
Slide 21
Slide 21 text
Build up views parts reusables route data store observable
Slide 22
Slide 22 text
Up to you Flux Redux Jade Page.js ES6 Less
Slide 23
Slide 23 text
Examples github.com/riot/examples
Slide 24
Slide 24 text
EN ES FR JA RU ZH DE Riot Docs riotjs.com
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Ready to use
Slide 29
Slide 29 text
Thank you!