Riot - Introduction and Hands on

#TKJS XMAS @TokyoSquareGarden
http://www.meetup.com/tokyojs/events/226903404/

Transcript

1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa
2. Riot.js?
3. User interface micro-library
4. React Angular Vue Polymer
5. OK, try it
6. bit.ly/riot-1
8. bit.ly/riot-2
10. • Custom tags = Component • Enjoyable syntax • Virtual DOM • Tiny size: library, learning cost, your code Why Riot?
11. 18KB riot.min.js Tiny size gzip 8KB
12. Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB Riot 18KB Compare
13. 3FBDU JS in HTML 3JPU
14. Scoped CSS • CSS with scope • independent • no more BEM!
15. Mount a riot
16. TAG file JS Compile $ npm install -g riot $ riot filename.tag
17. <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) {…} ) Compile
18. Pre-comp • gulp-riot • riotify • riotjs-loader
19. Test karma-riot
20. Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts reusables
21. Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts reusables route data store observable
22. Up to you Flux Redux Jade Page.js ES6 Less
23. Examples github.com/riot/examples
24. EN ES FR JA RU ZH DE Riot Docs riotjs.com
28. Ready to use
29. Thank you!