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

Re-revolution to front-end with Riot.js

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
100
とある EM の初めての育休からの学び
Avatar for kkeeth clown0082
1
5.7k
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.3k
Rediscover the joy of coding with Creative Coding
Avatar for kkeeth clown0082
0
1.9k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
Avatar for kkeeth clown0082
0
670
JavaScript × Mathematics go to Digital Art
Avatar for kkeeth clown0082
1
460
In-house study group at YUMEMI
Avatar for kkeeth clown0082
0
240
Playing Ionic Logo by p5.js
Avatar for kkeeth clown0082
0
350

Other Decks in Programming

See All in Programming
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
120
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
210
ランチタイムLT会3周年！ランチタイムLT会を3年間続けられたお話
Avatar for y-ohgi y0hgi
1
140
フィードバックで育てるAI開発
Avatar for Kota Minato kotaminato
1
110
Embedded SREと共に達成した会員管理システムのAWS移行 - SRE NEXT 2026 ランチスポンサーセッション
Avatar for ニフティ株式会社 niftycorp
PRO
1
2.3k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
150
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
240
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
140
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
150
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.8k
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
Avatar for sushichan044 sushichan044
0
220

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
210
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
370
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
330
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
430
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
170
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.4k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
830
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k

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