introduction of riotjs

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

Upload: ryo-iinuma

Post on 09-Jan-2017

726 views

Category:

Technology


0 download

TRANSCRIPT

Introduction of RiotJS2016/03/11 Gotanda.js #3 @mizuki_r

1

PROFILE

@mizuki_r

Twitter: @mizuki_r Github: ry_mizuki npm : mizuki_r

Angular, RiotJSまわりの使い手.

最近はフロントエンドのアーキテクチャを考えることが多い.

2

INTRODUCTIONRIOT-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>

<!-- 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

VS REACTRIOT-JS

15

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

16

WHY RIOTRIOT-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>

<!-- 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 CASERIOT-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

CONCLUSIONRIOT-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