Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
2
710
On the evolution and changes of Riotjs@4
kkeeth
March 22, 2019
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
57
とある EM の初めての育休からの学び
clown0082
1
4.8k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
200
Visually experience the beauty of mathematics with p5.js
clown0082
1
3.2k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.8k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
640
JavaScript × Mathematics go to Digital Art
clown0082
1
430
In-house study group at YUMEMI
clown0082
0
220
Playing Ionic Logo by p5.js
clown0082
0
310
Other Decks in Programming
See All in Programming
愛される翻訳の秘訣
kishikawakatsumi
3
350
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
4
970
Java 25, Nuevas características
czelabueno
0
110
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
460
Rubyで鍛える仕組み化プロヂュース力
muryoimpl
0
180
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
tinykitten
PRO
0
160
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
140
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
420
gunshi
kazupon
1
120
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
mouson
0
210
Go コードベースの構成と AI コンテキスト定義
andpad
0
140
AIエージェントの設計で注意するべきポイント6選
har1101
5
2.4k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
31
5.7k
What does AI have to do with Human Rights?
axbom
PRO
0
1.9k
Producing Creativity
orderedlist
PRO
348
40k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
35
The Spectacular Lies of Maps
axbom
PRO
1
400
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
0
65
Code Review Best Practice
trishagee
74
19k
Deep Space Network (abreviated)
tonyrice
0
21
Information Architects: The Missing Link in Design Systems
soysaucechin
0
720
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
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