2016-03-11.gotandajs.introduction-of-riot.pdf

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

<todo>  <h3>{ opts.title }</h3> <ul> <li each={
item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> 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 <todo>  <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form>  <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> <body>  <todo></todo>  <script src="riot.min.js"></script>  <script src="todo.js" type="riot/tag"></script>  <script>riot.mount('todo')</script> </body> 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- ﬀp/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 conﬂict!!! 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

2016-03-11.gotandajs.introduction-of-riot.pdf

2016-03-11.gotandajs.introduction-of-riot.pdf

mizuki_r

More Decks by mizuki_r

Other Decks in Technology

Featured

Transcript

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

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 ▸

<todo>  <h3>{ opts.title }</h3> <ul> <li each={

VS REACT RIOT-JS 15

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

WHY RIOT RIOT-JS 17

WHY RIOT why Riot ▸ easy to learn ▸ easy

WHY RIOT easy to learn ▸ lifecycle (mount, update, updated,

WHY RIOT easy to use ▸ script in html ▸

WHY RIOT make small 1. create html ٩(๑´3ʆ๑)۶ 2. separate

WHY RIOT sammrize small example of using webpack. view/app/components ᵓᴷᴷ

USE CASE RIOT-JS 23

USE CASE there is a problem also… ‣ take over

USE CASE use case ‣ try quickly ideas ‣ make

CONCLUSION RIOT-JS 26

CONCLUSION Riot is awesome ‣ Riot is very minimum ‣

THANKS! 28