Tweet
Tweet

Slide 1

Slide 1 text

React.js R e a c t と L o o p b a c k こ と は じ め meets Loopback R e a c t と L o o p b a c k こ と は じ め / R e a c t . j s m e e t L o o p b a c k

Slide 2

Slide 2 text

P R O F I L E 樋 口 剛 T S U Y O S H I H I G U C H I S e r v i c e D e s i g n e r & U I D e v e l o p e r ࠃ಺6*σβΠϯϑΝʔϜ(PPEQBUDIɺχϡʔεαʔϏε(VOPTZΛܦͯϑϦʔϥϯεத ελʔτΞοϓ΍৽͍͠ϓϩμΫτͷ αʔϏεσβΠϯͱઃܭɾ࣮૷·Ͱߦ͍ͬͯ·͢ɻ @tyshgc

Slide 3

Slide 3 text

A G E N D A ؆୯ʹ-PPQCBDLΛ঺հ 3FBDUKTͱ-PPQCBDLΛܨ͙ ·ͱΊ

Slide 4

Slide 4 text

؆ ୯ ʹ - P P Q C B D L Λ ঺ հ

Slide 5

Slide 5 text

؆ ୯ ʹ - P P Q C B D L Loopback

Slide 6

Slide 6 text

4USPOH-PPQࣾʢ*#.ʣͷ/PEFKT8FC'SBNFXPSL ؆ ୯ ʹ - P P Q C B D L $ npm i -g strongloop loopback.io ͪ͜Β͔Βೖख

Slide 7

Slide 7 text

特徴 ؆ ୯ ʹ - P P Q C B D L

Slide 8

Slide 8 text

ந৅ԽϞσϧ͔Β3&45"1*ΛࣗಈͰੜ੒ ؆ ୯ ʹ - P P Q C B D L MPPQCBDLFYQMPSFS͕૊Έࠐ·Ε͍ͯΔͷͰ3&45"1* ͷ"1*υΩϡϝϯτͷੜ੒΋΍ͬͯ͘ΕΔɻ MODEL REST API POST GET PUT DELETE HEAD

Slide 9

Slide 9 text

loopback-explorer ؆ ୯ ʹ - P P Q C B D L

Slide 10

Slide 10 text

loopback-explorer ؆ ୯ ʹ - P P Q C B D L

Slide 11

Slide 11 text

loopback-explorer ؆ ୯ ʹ - P P Q C B D L

Slide 12

Slide 12 text

loopback-explorer ؆ ୯ ʹ - P P Q C B D L モックデータくらいなら 非エンジニアでも登録できる

Slide 13

Slide 13 text

$-*Ͱ࡞͍͚ͬͯΔͷͰׂͱ؆୯ ؆ ୯ ʹ - P P Q C B D L $ slc loopback ΞϓϦέʔγϣϯΛͭ͘ΔίϚϯυ ଞͷίϚϯυ͸ίνϥ͔Β‎ https://docs.strongloop.com/x/eYk6

Slide 14

Slide 14 text

σʔλιʔεͱϞσϧͷ࿈ܞΛ͍͍ײ͡ʹ ؆ ୯ ʹ - P P Q C B D L %#΍֎෦"1*ͳͲͷσʔλιʔεʹؔ͢ΔίωΫλʔ ΞυΦϯ͕͋Δ MODEL DATA SOURCE DATABASE REST API MongoDB MySQL PostgreSQL Redis

Slide 15

Slide 15 text

؆ ୯ ʹ - P P Q C B D L ֎෦"1*ͳͲΛσʔλιʔεͱͯ͠໪࿦ѻ͑ΔͷͰʜ ϑϩϯτΤϯυαʔόతͳѻ͍͕Ͱ͖Δ

Slide 16

Slide 16 text

ͦͷ΄͔ɺ৭ʑ͋Δ༷ࢠ ؆ ୯ ʹ - P P Q C B D L w"OESPJE4%,΍J044%,͕༻ҙ͞Εͯ͋Δ w1VTI௨஌΍αʔυύʔςΟϩάΠϯͳͲ΋༻ҙ͞Ε͍ͯΔ "1*&YQMPSFS 0"VUI 1VTI/PUJpDBUJPOT 4UPSBHF 5IJSEQBSUZMPHJO 1BTTQPSU w4USPOH-PPQ"SDͱ͍͏(6*πʔϧ΋͋Δ https://strongloop.com/node-js/arc/ ࢖Θͳͯ͘΋શ͘໰୊ͳ͍ɻ

Slide 17

Slide 17 text

؆ ୯ ʹ - P P Q C B D L ϓϩτλΠϓ։ൃʹ͸ϥΠτʹಋೖ Ͱ͖ͯྑ͍ҹ৅

Slide 18

Slide 18 text

3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 19

Slide 19 text

"1*͕-PPQCBDLͰαΫͬͱ༻ҙͰ͖ΔͷͰ ͋ͱ͸3FBDUKTͱ࿈ܞ͢Δ͚ͩ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 20

Slide 20 text

ͨͩͷ"1*ͳͷͰ'FUDIͯ͠3FEVYͷͤΕ͹͑͑΍Μʜ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 21

Slide 21 text

ਖ਼௚ɺ3FEVYͱ͔ ϓϩτλΠϐϯάʹ͸ॏ͍ʜ UIデザイナーの自分からすると、 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙ 勿論、ちゃんと開発するってなったらやるYo!

Slide 22

Slide 22 text

"1*ΛαΫͬͱੜ΍ͯ͠ ࣮૷ʹΑΓ͍ۙΠϯλϥΫγϣϯΛ ϓϩτλΠϐϯάͰ࣮ݱ͍ͨ͠ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 23

Slide 23 text

3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙ ͍͍ͷϞϊ͕͋ͬͨ

Slide 24

Slide 24 text

3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙ React-Loopback

Slide 25

Slide 25 text

$ npm i react-loopback github.com/diogodoreto/react-loopback ͪ͜Β͔Βೖख $ npm i es6-promise whatwg-fetch 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 26

Slide 26 text

3FBDU-PPQCBDL͸ʜ A small library to connect React components to data in a LoopBack API without the need for Flux, Redux, etc. ReduxなどのFluxアーキテクチャを必要としない Loopbackの生やすREST APIに繋ぐライブラリ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 27

Slide 27 text

3FBDU-PPQCBDL͸ʜ Inspired by Facebook's Relay. Relayにインスパイヤされている 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 28

Slide 28 text

αϯϓϧͷ5PEPKTYΛݟͯΈΔ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙

Slide 29

Slide 29 text

import React, { PropTypes } from 'react'; import { createDataLoader } from 'react-loopback'; let Todos = React.createClass({ propTypes: { todos: PropTypes.array }, render() { const {todos} = this.props; return (
    {todos.map(todo => ( todo.jsx

Slide 30

Slide 30 text

render() { const {todos} = this.props; return (
    {todos.map(todo => (
  • {todo.description}
    • ))}
); } }); todo.jsx

Slide 31

Slide 31 text

); } }); Todos = createDataLoader(Todos, { queries: [{ endpoint: 'todos', filter: { where: {archived: false} } }] }); export default Todos; todo.jsx

Slide 32

Slide 32 text

࢓૊Έ "1*ͷ&OE1PJOUΛ ·ͱΊͯऔΓʹߦ͘ 'FUDI8SBQQFS$PNQPOFOU props 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて

Slide 33

Slide 33 text

࢓૊Έ "1*ͷ&OE1PJOUΛ·ͱΊͯ औΓʹߦ͘ 'FUDI8SBQQFS$PNQPOFOU props 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて 確かに Relayぽさがある

Slide 34

Slide 34 text

· ͱ Ί

Slide 35

Slide 35 text

· ͱ Ί SFBDUMPPQCBDLͷਓ΋ݴ͍ͬͯΔ௨Γ3FMBZతͳ Ξϓϩʔνɻ MPPQCBDLΛ͢Ͱʹ࠾༻͍ͯͨ͠Γࠓޙ࠾༻༧ఆ͕͋Δ ৔߹͸ྑ͍͔΋͠Εͳ͍ɻ !

Slide 36

Slide 36 text

· ͱ Ί ΋ͪΖΜ3FBDU-PPQCBDLͰͳͯ͘΋ɺ3FEVY΍'MVY ͱͷڞଘ΋౰ͨΓલʹͰ͖Δɻ ϓϩτλΠϓʹ͸-PPQCBDL͸͔ͳΓ͍͍͔΋ײɻ !

Slide 37

Slide 37 text

· ͱ Ί -PPQCBDLͰͷ։ൃ͸ϋοΧιϯ΍ϓϩτλΠϓͷ ։ൃʹ޲͍͍ͯΔͳͱࢥ͍·ͨ͠ɻ ॴײ

Slide 38

Slide 38 text

αΫͬͱ࡞ΔͳΒ 3FBDU-PPQCBDL͍͍͔΋ 3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙