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.5k
Present and Next Riot.js
kkeeth
February 22, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
とある EM の初めての育休からの学び
clown0082
1
1.1k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
130
Visually experience the beauty of mathematics with p5.js
clown0082
1
2.8k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.4k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
570
JavaScript × Mathematics go to Digital Art
clown0082
1
340
In-house study group at YUMEMI
clown0082
0
180
Playing Ionic Logo by p5.js
clown0082
0
240
Skills that employers recommend students to acquire
clown0082
1
280
Other Decks in Technology
See All in Technology
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
16
6.3k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
180
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
230
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
330
RSNA2024振り返り
nanachi
0
530
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
490
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
180
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
500
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
480
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
120
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
370
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Embracing the Ebb and Flow
colly
84
4.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
KATA
mclloyd
29
14k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Practical Orchestrator
shlominoach
186
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
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