Introduction of RiotJS
•
0 likes•1,927 views
RiotJS is introduced as a front-end framework that is very minimum, simple, easy to learn and use. It allows developing user interfaces with custom tags that contain HTML markup for layout, and a <script> tag for logic. Tags can be separated into small, reusable components. RiotJS is compared to React and reasons for using it include being easy to learn due to a simple lifecycle and API, templates written directly in HTML, and suitability for building small apps by decomposing them into separate tags.
More Related Content
Similar to Introduction of RiotJS
Similar to Introduction of RiotJS (20)
More from Ryo Iinuma
Recently uploaded
Recently uploaded (20)
Introduction of RiotJS
- 1. Introduction of RiotJS 2016/03/11 Gotanda.js #3 @mizuki_r 1
- 2. PROFILE @mizuki_r Twitter: @mizuki_r Github: ry_mizuki npm : mizuki_r Angular, RiotJSまわりの使い手. 最近はフロントエンドのアーキテ クチャを考えることが多い. 2
- 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
- 9. ~Fin~ 9
- 10. tell the spirit of Riot 10
- 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
- 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
- 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
- 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