Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Present and Next Riot.js
Search
kkeeth
February 22, 2018
Technology
2
1.6k
Present and Next Riot.js
kkeeth
February 22, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
41
とある EM の初めての育休からの学び
clown0082
1
4.4k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
190
Visually experience the beauty of mathematics with p5.js
clown0082
1
3.1k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.7k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
630
JavaScript × Mathematics go to Digital Art
clown0082
1
410
In-house study group at YUMEMI
clown0082
0
210
Playing Ionic Logo by p5.js
clown0082
0
300
Other Decks in Technology
See All in Technology
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
1
140
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
350
初めてのDatabricks Apps開発
taka_aki
1
370
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
2
440
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
340
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
13
82k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
660
Introdução a Service Mesh usando o Istio
aeciopires
1
280
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
10k
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
120
Featured
See All Featured
Done Done
chrislema
185
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Making Projects Easy
brettharned
120
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Building an army of robots
kneath
305
46k
Transcript
PRESENT AND NEXT RIOT.JS We are JavaScripters! @16thʲॳ৺ऀܴLTେձʳ
Who I am
Basic Information const my_info = { ɹ Name: ‘܂ݪਔ’, ɹ
Twitter: ‘@kuwahara_jsri’, ɹ GitHub: ‘k-kuwahara’, ɹ Qiita: ‘clown0082’, ɹ Workplace: ‘Yumemi, Inc.’ }
Communities translator staff staff
Communities github.com/k-kuwahara
⚠Caution⚠ will appear frequently in this slide.
What is ?
None
Characteristics 1. Custom tags 2. Simple and minimalistic
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>
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
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>
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>
Current status of riotjs
Current status of Riot.js ‣ version: 3.9.0 ‣ github star:
12782 ‣ size: 10.74 kb
Comparison on numbers “Github Star” URL: https://k-kuwahara.github.io/pages/gh-stars/
Comparison on numbers “Framework Size” URL: https://github.com/riot/riot
Made with riot
Made with riot
Made with riot URL: http://riotjs.com/made-with-riot/
Improved performance of riotjs
Rendering time 10,000 rows of DOM elements
Ecosystem for
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
Next (version 4)
Pick up some of the roadmap v4 ‣ “this.tags” ‣
“riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler
“Riot 4 will be released during this year (Summer?) but
not anytime soon”
Let’s Create Web Application by Riot.js !!
None