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
150
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
94
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
920
Felt - a simple web server with the power of the future
cognitom
0
300
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
880
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Programming
See All in Programming
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
840
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
5.3k
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
310
Modernisation Progressive d’Applications PHP
hhamon
0
160
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
2
170
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
120
CSC509 Lecture 01
javiergs
PRO
1
190
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
840
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.3k
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
100
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
110
Iteratorでページネーションを実現する
sonatard
3
700
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Six Lessons from altMBA
skipperchong
26
3.4k
BBQ
matthewcrist
83
9.2k
Happy Clients
brianwarren
96
6.6k
The Invisible Side of Design
smashingmag
296
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Web Components: a chance to create the future
zenorocha
309
42k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.7k
Practical Orchestrator
shlominoach
185
10k
Web development in the modern age
philhawksworth
205
10k
For a Future-Friendly Web
brad_frost
174
9.3k
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!