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
95
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
120
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
890
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
580
Other Decks in Programming
See All in Programming
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
Realtime API 入門
riofujimon
0
110
CSC509 Lecture 08
javiergs
PRO
0
110
qmuntal/stateless のススメ
sgash708
0
120
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Agile that works and the tools we love
rasmusluckow
327
21k
RailsConf 2023
tenderlove
29
880
Fireside Chat
paigeccino
32
3k
A Modern Web Designer's Workflow
chriscoyier
692
190k
How GitHub (no longer) Works
holman
311
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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!