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
On the evolution and changes of Riotjs@4
Search
kkeeth
March 22, 2019
Programming
760
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
On the evolution and changes of Riotjs@4
kkeeth
March 22, 2019
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
99
とある EM の初めての育休からの学び
clown0082
1
5.7k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
240
Visually experience the beauty of mathematics with p5.js
clown0082
1
3.3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.9k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
670
JavaScript × Mathematics go to Digital Art
clown0082
1
460
In-house study group at YUMEMI
clown0082
0
240
Playing Ionic Logo by p5.js
clown0082
0
350
Other Decks in Programming
See All in Programming
20260623_Loop Engineeringで自分の分身の問い合わせBotを作る
ryugen04
0
170
SLOをサービス品質の共通言語にするために 取り組んできたこと
wakana0222
0
380
symfony/aiとlaravel/boost
77web
0
120
自作OSでスライド発表する
uyuki234
1
3.7k
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会@東京 (2026-06-24)
suguruooki
2
150
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
120
Hunting Vulnerabilities in Symfony with LLMs
vinceamstoutz
0
570
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
150
Vue × Nuxt × Oxc どこまで使える?実運用の現在地
andpad
0
360
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.6k
Developing with AI Agents — Codex, Claude Code & Cowork Practical Guide
x5gtrn
PRO
0
1.3k
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
rkaga
2
1k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
260
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
The agentic SEO stack - context over prompts
schlessera
0
840
GitHub's CSS Performance
jonrohan
1033
470k
Navigating Weather and Climate Data
rabernat
0
280
Between Models and Reality
mayunak
4
360
How Software Deployment tools have changed in the past 20 years
geshan
0
34k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.6k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
180
Designing for Performance
lara
611
70k
Transcript
On the evolution and changes of Riotjs@4 We Are JavaScripters!
@30th ʲॳ৺ऀܴLTେձʳ
About me
Basic Information const my_info = { : ‘܂ݪਔ’, : ‘Yumemi
Inc’, : ‘kuwahara_jsri’, : ‘k-kuwahara’, : ‘k-kuwahara’, }
Communities translator staff staff
Sorry... $ Plz feedback for me called “Masakari” about my
English.
Have you ever used riotjs before?
before that …
What is ?
image by: https://riot.js.org/
Characteristics ‣ Custom tags(Component based) ‣ Simple syntax ‣ Human-readable
‣ Small leaning curve
More example
For more details, URL: https://speakerdeck.com/clown0082/re-revolution-to-front-end-with-riot-dot-js
Next @4
There are breaking changes. Let’s pick up some of them.
Change Riot4
Change Riot4 type, src, extension are changes
Change Riot4
Change Riot4 specifying a mount point by “div” is invalid
Change Riot4
Change Riot4 riot.compile() is probably required
Change Riot4 No error message is displayed in “console.log()”
Change Riot4 Specifying “*” results in an error
Change Riot4
Change Riot4 props, state parameters !?
Change Riot4 export default syntax !!
Change Riot4 props, state arguments !!
Display whole code again
Demo Riot4 Code1
Demo Riot4 Code2
Pick up some of the roadmap @4 ‣ “this.tags” ‣
“riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:host” ‣ parser/compiler ‣ high performance
Progress Two modules released!! ‣ riot → v4.0.0-beta.2 ‣ dom-bindings
→ v0.11.2 ‣ parser → v0.8.1 Demo: https://codesandbox.io/s/o452941pn6
⚠Caution⚠
It is still in beta, so specifications may change.
Please wait for the official release Riot.js@4!!
Publicity
We’re looking for Engineers!!
None