Introduction of RiotJS 2016/03/11 Gotanda.js #3 @mizuki_r 1

PROFILE @mizuki_r 5XJUUFS!NJ[VLJ@S (JUIVCSZ@NJ[VLJ OQNNJ[VLJ@S "OHVMBS 3JPU+4·ΘΓͷ࢖͍ख ࠷ۙ͸ϑϩϯτΤϯυͷΞʔΩς ΫνϟΛߟ͑Δ͜ͱ͕ଟ͍ 2

INTRODUCTION RIOT-JS 3

hmm… this is very difficult… ( ŋั﹏ŋั) I THOUGHT THE TALK 4

do you know Riot? 5

~Fin~ 6

tell the usage of Riot 7

http://riotjs.com/ja/guide/ 8

~Fin~ 9

tell the spirit of Riot 10

http://riotjs.com/ja/ 11

~Fin~ 12

INTRODUCTION it’s not joke! ▸ Riot is very minimum ▸ Riot is very simple ▸ Riot is very easy ▸ Riot is very casual 13

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } 14

VS REACT RIOT-JS 15

http://riotjs.com/ja/compare/ 16

WHY RIOT RIOT-JS 17

WHY RIOT why Riot ▸ easy to learn ▸ easy to use ▸ make small, summarize small 18

WHY RIOT easy to learn ▸ lifecycle (mount, update, updated, unmount) ▸ update ▸ yield ▸ dom events http://riotjs.com/ja/api/ 19

WHY RIOT easy to use ▸ script in html ▸ very simple usage

{ opts.title }

• { item }

Add #{ items.length + 1 } this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } riot.mount('todo') 20

WHY RIOT make small 1. create html ٩(๑´3ʆ๑)۶ 2. separate tags 3. ʮhum… it’s largeʯ(´ɾωɾʆ) 4. separate tags 5. repeat 1 … 4 ٩(๑`^´๑)۶ possible to turn a lot of small cycle!! 21

WHY RIOT sammrize small example of using webpack. view/app/components ᵓᴷᴷ ffp ᴹ ᵓᴷᴷ index.tag ᴹ ᵋᴷᴷ style.css ᵓᴷᴷ ffp-body ᴹ ᵓᴷᴷ index.tag ᴹ ᵓᴷᴷ store.js ᴹ ᵋᴷᴷ style.css ᵓᴷᴷ ffp-code-pretty ᴹ ᵓᴷᴷ index.tag ᴹ ᵓᴷᴷ store.js ᴹ ᵋᴷᴷ style.css ᵓᴷᴷ ffp-header ᴹ ᵓᴷᴷ index.tag ᴹ ᵋᴷᴷ style.css ᵓᴷᴷ ffp-input ᴹ ᵓᴷᴷ action-creator.js ᴹ ᵓᴷᴷ index.tag ᴹ ᵋᴷᴷ style.css ᵓᴷᴷ ffp-loading ᴹ ᵓᴷᴷ index.tag ᴹ ᵓᴷᴷ store.js ᴹ ᵋᴷᴷ style.css ᵋᴷᴷ ffp-result ᵓᴷᴷ index.tag ᵓᴷᴷ store.js ᵋᴷᴷ style.css https://github.com/rymizuki/electron- ffp/tree/master/view/app/ components possible to separate into component. 22

USE CASE RIOT-JS 23

USE CASE there is a problem also… ‣ take over all of the data on child becomes larger, there is danger of conflict!!! todoList.todos => { todos } todoList.tags.todo => { todos, name, description } todoList.tags.todo.tags.description => { todos, name, description, content } 24

USE CASE use case ‣ try quickly ideas ‣ make a small app ‣ when just want to write ‣ in combination with other libraries started small, until the scale of the moderate 25

CONCLUSION RIOT-JS 26

CONCLUSION Riot is awesome ‣ Riot is very minimum ‣ Riot is very simple ‣ Riot is very easy ‣ Riot is very casual 27

THANKS! 28