introduction of riotjs
TRANSCRIPT
PROFILE
@mizuki_r
Twitter: @mizuki_r Github: ry_mizuki npm : mizuki_r
Angular, RiotJSまわりの使い手.
最近はフロントエンドのアーキテクチャを考えることが多い.
2
INTRODUCTION
it’s not joke!
▸ Riot is very minimum
▸ Riot is very simple
▸ Riot is very easy
▸ Riot is very casual
13
<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
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>
<!-- 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
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 smallexample 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
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 is awesome
‣ Riot is very minimum
‣ Riot is very simple
‣ Riot is very easy
‣ Riot is very casual
27