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
910
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
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
データの品質が低いと何が困るのか
kzykmyzw
6
1k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Featured
See All Featured
Side Projects
sachag
452
42k
A Philosophy of Restraint
colly
203
16k
How GitHub (no longer) Works
holman
313
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
A Modern Web Designer's Workflow
chriscoyier
693
190k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
RailsConf 2023
tenderlove
29
1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
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