Present and Next Riot.js

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
February 22, 2018
Technology
2
990

Present and Next Riot.js

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

February 22, 2018
Tweet

Want more?

3135a28c51dfa27396bb525e9972db95?s=48 clown0082
2
110
3135a28c51dfa27396bb525e9972db95?s=48 clown0082
0
30
3135a28c51dfa27396bb525e9972db95?s=48 clown0082
3
310
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
13
800
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
4
430
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
270
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
570
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
310
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
350
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
830
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
220
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
290

Transcript

  1. 1.

    PRESENT AND NEXT RIOT.JS We are JavaScripters! @16thʲॳ৺ऀ׻ܴLTେձʳ

  2. 2.

    Who I am

  3. 3.

    Basic Information const my_info = { ɹ Name: ‘܂ݪ੟ਔ’, ɹ

    Twitter: ‘@kuwahara_jsri’, ɹ GitHub: ‘k-kuwahara’, ɹ Qiita: ‘clown0082’, ɹ Workplace: ‘Yumemi, Inc.’ }
  4. 4.

    Communities translator staff staff

  5. 5.

    Communities github.com/k-kuwahara

  6. 6.

    ⚠Caution⚠ will appear frequently in this slide.

  7. 7.

    What is ?

  8. 8.
    None
  9. 9.

    Characteristics 1. Custom tags 2. Simple and minimalistic

  10. 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. 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. 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. 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. 14.

    Current status of riotjs

  15. 15.

    Current status of Riot.js ‣ version: 3.9.0 ‣ github star:

    12782 ‣ size: 10.74 kb
  16. 16.

    Comparison on numbers “Github Star” URL: https://k-kuwahara.github.io/pages/gh-stars/

  17. 17.

    Comparison on numbers “Framework Size” URL: https://github.com/riot/riot

  18. 18.

    Made with riot

  19. 19.

    Made with riot

  20. 20.

    Made with riot URL: http://riotjs.com/made-with-riot/

  21. 21.

    Improved performance of riotjs

  22. 22.

    Rendering time 10,000 rows of DOM elements

  23. 23.

    Ecosystem for

  24. 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. 25.

    Next (version 4)

  26. 26.

    Pick up some of the roadmap v4 ‣ “this.tags” ‣

    “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler
  27. 27.

    “Riot 4 will be released during this year (Summer?) but

    not anytime soon”
  28. 28.

    Let’s Create Web Application by Riot.js !!

  29. 29.
    None