Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Re-revolution to front-end with Riot.js

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for kkeeth kkeeth
November 17, 2018
Programming
310
3

Re-revolution to front-end with Riot.js

Avatar for kkeeth

kkeeth

November 17, 2018

More Decks by kkeeth

See All by kkeeth
Programming to play with p5.js
Avatar for kkeeth clown0082
0
110
とある EM の初めての育休からの学び
Avatar for kkeeth clown0082
1
5.9k
The history of Javascript frameworks: changes in front-end design philosophy
Avatar for kkeeth clown0082
2
240
Visually experience the beauty of mathematics with p5.js
Avatar for kkeeth clown0082
1
3.4k
Rediscover the joy of coding with Creative Coding
Avatar for kkeeth clown0082
0
2k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
Avatar for kkeeth clown0082
0
670
JavaScript × Mathematics go to Digital Art
Avatar for kkeeth clown0082
1
470
In-house study group at YUMEMI
Avatar for kkeeth clown0082
0
240
Playing Ionic Logo by p5.js
Avatar for kkeeth clown0082
0
360

Other Decks in Programming

See All in Programming
Deep dive into the select statement (GopherCon UK)
Avatar for Jesús Espino jespino
0
170
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
420
[DroidKaigi 26] How We Moved from Android Studio to Slack
Avatar for Ahmed Ali thisaay
0
190
Go 1.27からのGODEBUG / Go 1.27 リリースパーティ #go127party
Avatar for mazrean mazrean
0
290
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
660
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
250
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
0
300
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
PRO
0
160
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
330
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
490
私のClaude Code活用法 （個人開発編） - PHPerKaigi mini #4（2026/08/24）
Avatar for panda_program panda_program
1
210
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
810

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
320
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
490
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.7M
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
470

Transcript

  1. Re-revolution to front-end with Riot.js ळͷJavaScriptࡇ in ෋࢜௨Ϋϥ΢υςΫϊϩδʔζ

  2. About me

  3. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Workplace: ‘Yumemi

    Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }

  4. Communities translator staff staff

  5. Communities github.com/riot

  6. Sorry... " Plz feedback for me called “Masakari” about my

    English.

  7. Modern Frameworks and libraries are “Component oriented”

  8. None

  9. Today, I will introduce a more simple and elegant library

  10. None

  11. The charm of riotjs

  12. What is ?

  13. image by: https://riot.js.org/

  14. Characteristics ‣ Custom tags(Component based) ‣ Simple syntax and minimalistic

    ‣ Human-readable ‣ Small leaning curve

  15. Custom tag <app> <h3>{ opts.title }</h3> <ul> <li each={ techs

    }>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app>

  16. Custom tag <app> <h3>{ opts.title }</h3> <ul> <li each={ techs

    }>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app> HTML JS CSS

  17. Custom tag <app> <h3>{ opts.title }</h3> <ul> <li each={ techs

    }>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app> like ”props” in Vue.js or React.js

  18. Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”

    type=“riot/tag”></script> <script> riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) </script> </body> </html>

  19. Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”

    type=“riot/tag”></script> <script> riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) </script> </body> </html>

  20. Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”

    type=“riot/tag”></script> <script> riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) </script> </body> </html> pass to “opts”

  21. More example

  22. Stats of riotjs

  23. Stats of Riot.js ‣ version: 3.13.1 ‣ github star: 13329

    ‣ open issues: 30 ‣ size: 10.85 kb(gzip)

  24. BTW,

  25. Stats of Riot.js

  26. Stats of Riot.js about 1/3 size of Vue.js !!

  27. Made with riot (so-called showcase)

  28. Made with riot

  29. Made with riot URL: http://riot.js.org/made-with-riot/

  30. Comparison between riot and react

  31. None

  32. Why React is a rival ?

  33. Reason 1

  34. Reason 2

  35. Why is named ?

  36. Frameworks and libraries

  37. Frameworks and libraries TOO MANY THINGS TO REMEMBER, AND TOO

    COMPLICATED !!

  38. the mean of “riot” is a “riot” against its complexity

    of JavaScript frameworks.

  39. Changes about riot from @2 to @3

  40. Performance of riot.js

  41. Rendering time 10,000 rows of DOM elements URL: https://k-kuwahara.github.io/demo/riot/pitfalls/loop-benchmark/v3.html

  42. Rendering time 10,000 rows of DOM elements

  43. riot.route removed from riot core

  44. riot-route 10,000 rows of DOM elements

  45. There are some other changes, so please see the official

    website. URL: https://riot.js.org/guide/migration-from-riot2/

  46. Ecosystem for riot

  47. 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 ɾsemantic-ui-riot ɾriot-animate ɾriot-flipcard ɾbabel-preset-es2015-riot ɾriot-placeholder ɾkarma-riot ɾriot-hot-reload ɾeslint-config-riot Others

  48. Ecosystem

  49. The persona of riot

  50. Persona of riot ‣ Beginners of JavaScript ‣ Beginners of

    frameworks of JavaScript ‣ Designers ‣ Small-scale products developer

  51. The roadmap about leaning of JavaScript frameworks.

  52. Roadmap of JS frameworks

  53. Next @4

  54. Pick up some of the roadmap @4 ‣ “this.tags” ‣

    “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler ‣ “export default” ← new!!

  55. Progress Two modules released!! ‣ dom-bindings → v0.4.0 ‣ parser

    → v0.7.0 Demo: https://codesandbox.io/s/rr3k4pmzrq

  56. Conclusion

  57. Closing ‣ Riot.js is hard to become the main framework

    of application development ‣ Using as a stepping stone ‣ Riot.js is a library that supports step-upof JavaScript engineer

  58. Let’s Create Web Application with Riot.js !!

  59. Publicity

  60. We’re looking for Engineers!!

  61. None
  62. None