Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
120
とある EM の初めての育休からの学び
Avatar for kkeeth clown0082
1
6k
The history of Javascript frameworks: changes in front-end design philosophy
Avatar for kkeeth clown0082
2
250
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
680
JavaScript × Mathematics go to Digital Art
Avatar for kkeeth clown0082
1
480
In-house study group at YUMEMI
Avatar for kkeeth clown0082
0
250
Playing Ionic Logo by p5.js
Avatar for kkeeth clown0082
0
370

Other Decks in Programming

See All in Programming
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
160
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
510
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
170
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
130
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
870
AIに “答え“を書かせるのを やめてみた
Avatar for akari ___akari11
0
110
mrbgem 三角測量 開発
Avatar for ogom ogom
0
220
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
140
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
120
パーソナライズPodcastを作った話
Avatar for repunit11 repunit11
0
130
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
350
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
300
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
580
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
66k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
350
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
740
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k

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