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.4k
Present and Next Riot.js
kkeeth
February 22, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Visually experience the beauty of mathematics with p5.js
clown0082
0
2.1k
Rediscover the joy of coding with Creative Coding
clown0082
0
1k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
460
JavaScript × Mathematics go to Digital Art
clown0082
1
230
In-house study group at YUMEMI
clown0082
0
110
Playing Ionic Logo by p5.js
clown0082
0
130
Skills that employers recommend students to acquire
clown0082
0
190
Walking through the source code of an OSS Library(ESLint))
clown0082
0
280
Web components these days
clown0082
1
170
Other Decks in Technology
See All in Technology
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
460
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
150
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2k
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
240
統計的学習理論読み Chapter 2
kmatsui
1
190
大規模データとの戦い方
knih
1
460
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
私のRSpecの書き方 / How I write RSpec
tmtms
4
820
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
320
Featured
See All Featured
Navigating Team Friction
lara
177
13k
Faster Mobile Websites
deanohume
296
30k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Web Components: a chance to create the future
zenorocha
304
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Into the Great Unknown - MozCon
thekraken
10
830
Code Reviewing Like a Champion
maltzj
512
39k
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