Present and Next Riot.js

Transcript

1. PRESENT AND NEXT RIOT.JS We are JavaScripters! @16thʲॳ৺ऀ׻ܴLTେձʳ
2. Who I am
3. Basic Information const my_info = { ɹ Name: ‘܂ݪ੟ਔ’, ɹ Twitter: ‘@kuwahara_jsri’, ɹ GitHub: ‘k-kuwahara’, ɹ Qiita: ‘clown0082’, ɹ Workplace: ‘Yumemi, Inc.’ }
4. Communities translator staff staff
5. Communities github.com/k-kuwahara
6. ⚠Caution⚠ will appear frequently in this slide.
7. What is ?
9. Characteristics 1. Custom tags 2. Simple and minimalistic
10. Custom tag <app> <h3>{ message }</h3> <ul> <li each={ techs }>{ name }</li> </ul> <script> this.message = 'Hello, Riot!' this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app>
11. Custom tag <app> <h3>{ message }</h3> <ul> <li each={ techs }>{ name }</li> </ul> <script> this.message = 'Hello, Riot!' this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app> HTML JS CSS
12. Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“riot/tag”></script> <script> riot.mount(‘app’) </script> </body> </html>
13. Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“riot/tag”></script> <script> riot.mount(‘app’) </script> </body> </html>
14. Current status of riotjs
15. Current status of Riot.js ‣ version: 3.9.0 ‣ github star: 12782 ‣ size: 10.74 kb
16. Comparison on numbers “Github Star” URL: https://k-kuwahara.github.io/pages/gh-stars/
17. Comparison on numbers “Framework Size” URL: https://github.com/riot/riot
18. Made with riot
19. Made with riot
20. Made with riot URL: http://riotjs.com/made-with-riot/
21. Improved performance of riotjs
22. Rendering time 10,000 rows of DOM elements
23. Ecosystem for
24. Ecosystem ɾriot ɾriot-clI ɾriot-compiler ɾriot-observable ɾriot-tmpl Basics SPA (routing) ɾriot-route ɾriot-view-router ɾriot-routehandler ɾriotgear-router ɾredux-riot-router State management ɾRiotControl ɾriotify ɾriotx ɾobseriot Compile ɾgulp-riot ɾriot-tag-loader ɾriotjs-loader ɾriotify ɾrollup-plugin-riot Designs, Animations ɾriot-mui ɾnest-ui ɾriot-bootstrap ɾriot-fontawesome ɾriot-bootstrap ɾriot-animate ɾriot-flipcard ɾbabel-preset-es2015-riot ɾriot-placeholder ɾkarma-riot ɾriot-hot-reload ɾeslint-config-riot Others
25. Next (version 4)
26. Pick up some of the roadmap v4 ‣ “this.tags” ‣ “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler
27. “Riot 4 will be released during this year (Summer?) but not anytime soon”
28. Let’s Create Web Application by Riot.js !!