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.8k
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
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
Building a Meta Ray-Ban display app
Avatar for Akio Itaya akkeylab
0
160
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
Avatar for Ryusei Ohkura 3l4l5
2
190
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
140
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
390
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
520
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
940
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
590
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
500
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
110
バグを直したら useEffect が消えた
Avatar for taki colorful12
2
450
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
220
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.7k

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
380
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
630
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
1.1k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.6k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
430
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
500
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Scaling GitHub
Avatar for Zach Holman holman
464
140k

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