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
740
2
Share
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
85
とある EM の初めての育休からの学び
clown0082
1
5.5k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
220
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
660
JavaScript × Mathematics go to Digital Art
clown0082
1
450
In-house study group at YUMEMI
clown0082
0
240
Playing Ionic Logo by p5.js
clown0082
0
340
Other Decks in Programming
See All in Programming
20260514_its_the_context_window_stupid.pdf
heita
0
1k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
1
180
【ディップ|26年新卒研修資料】TDD実装演習
dip_tech
PRO
0
190
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
linyows
3
420
サークル参加から学ぶ、小さな事業の回し方
yuzneri
0
200
AIを導入する前にやるべきこと
negima
2
360
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
0
120
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
rio432
0
160
Agentic Elixir
whatyouhide
0
450
関係性から理解する"同一性"の型用語たち
pvcresin
1
210
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
har1101
3
630
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
tigertora7571
0
210
Featured
See All Featured
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
180
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
810
Odyssey Design
rkendrick25
PRO
2
620
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
370
Being A Developer After 40
akosma
91
590k
ラッコキーワード サービス紹介資料
rakko
1
3.3M
The Cult of Friendly URLs
andyhume
79
6.9k
Documentation Writing (for coders)
carmenintech
77
5.3k
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