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
Realtime API 入門
riofujimon
0
110
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
980
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
offers_20241022_imakiire.pdf
imakurusu
2
360
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
役立つログに取り組もう
irof
26
8.7k
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
Featured
See All Featured
Music & Morning Musume
bryan
46
6.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Building Your Own Lightsaber
phodgson
102
6k
Designing for Performance
lara
604
68k
Optimizing for Happiness
mojombo
376
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
The Cult of Friendly URLs
andyhume
78
6k
Code Reviewing Like a Champion
maltzj
519
39k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
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!