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
160
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
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Catch Up: Go Style Guide Update
andpad
0
250
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
AkarengaLT vol.38
hashimoto_kei
1
120
CSC305 Lecture 08
javiergs
PRO
0
280
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
品質ワークショップをやってみた
nealle
0
630
NIKKEI Tech Talk#38
cipepser
0
230
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
A better future with KSS
kneath
239
18k
A Tale of Four Properties
chriscoyier
161
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Six Lessons from altMBA
skipperchong
29
4k
Producing Creativity
orderedlist
PRO
347
40k
The Invisible Side of Design
smashingmag
302
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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!