ReactとLoopbackことはじめ / React.js meets Loopback

LoopbackのライトなREST API開発環境とReact.jsを使ってサクっとするにはというような内容です。

こちらは、React.js meet up #3のLTで発表したスライドです。
http://reactjs-meetup.connpass.com/event/26229/

Transcript

1. 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
2. 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
3. A G E N D A ؆୯ʹ-PPQCBDLΛ঺հ   3FBDUKTͱ-PPQCBDLΛܨ͙   ·ͱΊ  
4.  ؆ ୯ ʹ - P P Q C B D L Λ ঺ հ 
5. ؆ ୯ ʹ - P P Q C B D L Loopback
6. 4USPOH-PPQࣾʢ*#.ʣͷ/PEFKT
   8FC
   'SBNFXPSL ؆ ୯ ʹ - P P Q C B D L $ npm i -g strongloop loopback.io ͪ͜Β͔Βೖख
7. 特徴 ؆ ୯ ʹ - P P Q C B D L
8. ந৅ԽϞσϧ͔Β3&45
   "1*ΛࣗಈͰੜ੒ ؆ ୯ ʹ - P P Q C B D L MPPQCBDLFYQMPSFS͕૊Έࠐ·Ε͍ͯΔͷͰ3&45
   "1* ͷ"1*υΩϡϝϯτͷੜ੒΋΍ͬͯ͘ΕΔɻ MODEL REST API POST GET PUT DELETE HEAD
9. loopback-explorer ؆ ୯ ʹ - P P Q C B D L
10. loopback-explorer ؆ ୯ ʹ - P P Q C B D L
11. loopback-explorer ؆ ୯ ʹ - P P Q C B D L
12. loopback-explorer ؆ ୯ ʹ - P P Q C B D L モックデータくらいなら 非エンジニアでも登録できる
13. $-*Ͱ࡞͍͚ͬͯΔͷͰׂͱ؆୯ ؆ ୯ ʹ - P P Q C B D L $ slc loopback ΞϓϦέʔγϣϯΛͭ͘ΔίϚϯυ ଞͷίϚϯυ͸ίνϥ͔Β‎ https://docs.strongloop.com/x/eYk6
14. σʔλιʔεͱϞσϧͷ࿈ܞΛ͍͍ײ͡ʹ ؆ ୯ ʹ - P P Q C B D L %#΍֎෦"1*ͳͲͷσʔλιʔεʹؔ͢ΔίωΫλʔ ΞυΦϯ͕͋Δ MODEL DATA SOURCE DATABASE REST API MongoDB MySQL PostgreSQL Redis
15. ؆ ୯ ʹ - P P Q C B D L ֎෦"1*ͳͲΛσʔλιʔεͱͯ͠໪࿦ѻ͑ΔͷͰʜ ϑϩϯτΤϯυαʔόతͳѻ͍͕Ͱ͖Δ
16. ͦͷ΄͔ɺ৭ʑ͋Δ༷ࢠ ؆ ୯ ʹ - P P Q C B D L
    w
    "OESPJE
    4%,΍J04
    4%,͕༻ҙ͞Εͯ͋Δ
    w
    1VTI௨஌΍αʔυύʔςΟϩάΠϯͳͲ΋༻ҙ͞Ε͍ͯΔ
    "1*
    &YQMPSFS
    0"VUI
    1VTI
    /PUJpDBUJPOT
    4UPSBHF
    5IJSEQBSUZ
    MPHJO
    1BTTQPSU
    w
    4USPOH-PPQ
    "SDͱ͍͏(6*πʔϧ΋͋Δ
    https://strongloop.com/node-js/arc/ ࢖Θͳͯ͘΋શ͘໰୊ͳ͍ɻ
17. ؆ ୯ ʹ - P P Q C B D L ϓϩτλΠϓ։ൃʹ͸ϥΠτʹಋೖ Ͱ͖ͯྑ͍ҹ৅
18.  3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ 
19. "1*͕-PPQCBDLͰαΫͬͱ༻ҙͰ͖ΔͷͰ ͋ͱ͸3FBDUKTͱ࿈ܞ͢Δ͚ͩ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
20. ͨͩͷ"1*ͳͷͰ'FUDIͯ͠3FEVYͷͤΕ͹͑͑΍Μʜ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
21. ਖ਼௚ɺ3FEVYͱ͔
    ϓϩτλΠϐϯάʹ͸ॏ͍ʜ UIデザイナーの自分からすると、 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ 勿論、ちゃんと開発するってなったらやるYo!
22. "1*ΛαΫͬͱੜ΍ͯ͠
    ࣮૷ʹΑΓ͍ۙΠϯλϥΫγϣϯΛ
    ϓϩτλΠϐϯάͰ࣮ݱ͍ͨ͠ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
23. 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ ͍͍ͷϞϊ͕͋ͬͨ
24. 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ React-Loopback
25. $ 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 Λ ܨ ͙
26. 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 Λ ܨ ͙
27. 3FBDU-PPQCBDL͸ʜ Inspired by Facebook's Relay. Relayにインスパイヤされている 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
28. αϯϓϧͷ5PEPKTYΛݟͯΈΔ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
29. import React, { PropTypes } from 'react'; import { createDataLoader } from 'react-loopback'; let Todos = React.createClass({ propTypes: { todos: PropTypes.array }, render() { const {todos} = this.props; return ( <ul> {todos.map(todo => ( todo.jsx
30. render() { const {todos} = this.props; return ( <ul> {todos.map(todo => ( <li> <input type="checkbox" checked={todo.done} /> {todo.description} </li> ))} </ul> ); } }); todo.jsx
31. ); } }); Todos = createDataLoader(Todos, { queries: [{ endpoint: 'todos', filter: { where: {archived: false} } }] }); export default Todos; todo.jsx
32. ࢓૊Έ "1*ͷ&OE1PJOUΛ
    ·ͱΊͯऔΓʹߦ͘
    'FUDI
    8SBQQFS
    $PNQPOFOU props 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて
33. ࢓૊Έ "1*ͷ&OE1PJOUΛ·ͱΊͯ
    औΓʹߦ͘
    'FUDI
    8SBQQFS
    $PNQPOFOU props 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて 確かに Relayぽさがある
34.  · ͱ Ί 
35. · ͱ Ί SFBDUMPPQCBDLͷਓ΋ݴ͍ͬͯΔ௨Γ3FMBZతͳ
    Ξϓϩʔνɻ
    MPPQCBDLΛ͢Ͱʹ࠾༻͍ͯͨ͠Γࠓޙ࠾༻༧ఆ͕͋Δ ৔߹͸ྑ͍͔΋͠Εͳ͍ɻ !
36. · ͱ Ί ΋ͪΖΜ3FBDU-PPQCBDLͰͳͯ͘΋ɺ3FEVY΍'MVY ͱͷڞଘ΋౰ͨΓલʹͰ͖Δɻ
    ϓϩτλΠϓʹ͸-PPQCBDL͸͔ͳΓ͍͍͔΋ײɻ !
37. · ͱ Ί -PPQCBDLͰͷ։ൃ͸ϋοΧιϯ΍ϓϩτλΠϓͷ
    ։ൃʹ޲͍͍ͯΔͳͱࢥ͍·ͨ͠ɻ ॴײ
38. αΫͬͱ࡞ΔͳΒ 3FBDU-PPQCBDL͍͍͔΋ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙