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
Riot - Introduction and Hands on
Search
Tsutomu Kawamura
December 14, 2015
Programming
0
140
Riot - Introduction and Hands on
#TKJS XMAS @TokyoSquareGarden
http://www.meetup.com/tokyojs/events/226903404/
Tsutomu Kawamura
December 14, 2015
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
88
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
870
Felt - a simple web server with the power of the future
cognitom
0
290
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
860
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
340
Snowflakeで眠ったデータを起こそう!
estie
0
160
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.2k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
GitHub Copilotのススメ
marcy731
1
240
Git Lint
bkuhlmann
4
770
Going beyond Apache Parquet's default settings
xhochy
0
140
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.6k
Site Reliability Engineering for GMO
pyama86
9
1.1k
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
570
Featured
See All Featured
Making Projects Easy
brettharned
109
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Happy Clients
brianwarren
92
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Teambox: Starting and Learning
jrom
128
8.4k
What's in a price? How to price your products and services
michaelherold
238
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Unsuck your backbone
ammeep
664
57k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
For a Future-Friendly Web
brad_frost
172
9k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa
Riot.js?
User interface micro-library
React Angular Vue Polymer
OK, try it
bit.ly/riot-1
None
bit.ly/riot-2
None
• Custom tags = Component • Enjoyable syntax • Virtual
DOM • Tiny size: library, learning cost, your code Why Riot?
18KB riot.min.js Tiny size gzip 8KB
Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB
Riot 18KB Compare
3FBDU JS in HTML 3JPU
Scoped CSS • CSS with scope • independent • no
more BEM!
Mount a riot
TAG file JS Compile $ npm install -g riot $
riot filename.tag
<my-tag> <p>{ message }</p> <style>p { color:white }</style> <script>…</script> </my-tag>
riot.tag(‘my-tag’, ‘<p>{ message }</p>’, ‘p { color:white }’, function(opts) {…} ) Compile
Pre-comp • gulp-riot • riotify • riotjs-loader
Test karma-riot
Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo>
views parts reusables
Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo>
views parts reusables route data store observable
Up to you Flux Redux Jade Page.js ES6 Less
Examples github.com/riot/examples
EN ES FR JA RU ZH DE Riot Docs riotjs.com
None
None
None
Ready to use
Thank you!