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

Transcript

1. Introduction of RiotJS 2016/03/11 Gotanda.js #3 @mizuki_r 1
2. PROFILE @mizuki_r 5XJUUFS
   
   !NJ[VLJ@S
   (JUIVC
   
   
   SZ@NJ[VLJ
   OQN
   
   
   
   
   
   NJ[VLJ@S
   "OHVMBS
   3JPU+4·ΘΓͷ࢖͍ख
   ࠷ۙ͸ϑϩϯτΤϯυͷΞʔΩς ΫνϟΛߟ͑Δ͜ͱ͕ଟ͍ 2
3. INTRODUCTION RIOT-JS 3
4. hmm… this is very difficult… ( ŋั﹏ŋั) I THOUGHT THE TALK 4
5. do you know Riot? 5
6. ~Fin~ 6
7. tell the usage of Riot 7
8. http://riotjs.com/ja/guide/ 8
9. ~Fin~ 9
10. tell the spirit of Riot 10
11. http://riotjs.com/ja/ 11
12. ~Fin~ 12
13. INTRODUCTION it’s not joke! ▸ Riot is very minimum ▸ Riot is very simple ▸ Riot is very easy ▸ Riot is very casual 13
14. <todo> <!-- layout --> <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> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> 14
15. VS REACT RIOT-JS 15
16. http://riotjs.com/ja/compare/ 16
17. WHY RIOT RIOT-JS 17
18. WHY RIOT why Riot ▸ easy to learn ▸ easy to use ▸ make small, summarize small 18
19. WHY RIOT easy to learn ▸ lifecycle (mount, update, updated, unmount) ▸ update ▸ yield ▸ dom events http://riotjs.com/ja/api/ 19
20. WHY RIOT easy to use ▸ script in html ▸ very simple usage <todo> <!-- layout --> <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> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> <todo> <body> <!-- place the custom tag anywhere inside the body --> <todo></todo> <!-- include riot.js --> <script src="riot.min.js"></script> <!-- include the tag --> <script src="todo.js" type="riot/tag"></script> <!-- mount the tag --> <script>riot.mount('todo')</script> </body> 20
21. 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
22. 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
23. USE CASE RIOT-JS 23
24. 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
25. 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
26. CONCLUSION RIOT-JS 26
27. CONCLUSION Riot is awesome ‣ Riot is very minimum ‣ Riot is very simple ‣ Riot is very easy ‣ Riot is very casual 27
28. THANKS! 28