relay

Transcript

1. Relay
   Meguro.es #3
   

   View Slide

2. @hokaccha
   

   View Slide

3. Relay
   

   View Slide

4. React
   

   View Slide

5. GraphQL
   

   View Slide

6. View Slide

7. GraphQL
   

   View Slide

8. GraphQLͱ͸
   • Facebook͕։ൃͨ͠ΫΤϦݴޠ
   • ΫϥΠΞϯτ/αʔόʔؒͷ΍ΓऔΓʹ࢖ΘΕΔ
   • REST΍RPCͱൺֱ͞ΕΔ
   

   View Slide

9. http://example.com/products/1
   {
   "id": 1,
   "name": "foo",
   "description": "..."
   "image": {
   "uri": "http://...",
   "width": 120,
   "height": 120
   }
   }
   

   View Slide

10. http://example.com/graphql
    {
    "product" : {
    "id": 1,
    "name": "foo",
    "description": "..."
    "image": {
    "uri": "http://...",
    "width": 120,
    "height": 120
    }
    }
    }
    {
    product(id: 1) {
    id,
    name,
    description,
    image(size: 120) {
    uri,
    width,
    height
    }
    }
    }
    3FRVFTU 3FTQPOTF
    

    View Slide

11. ଓ͖͸WebͰ
    http://graphql.org/
    

    View Slide

12. Relay
    

    View Slide

13. A JavaScript framework for building
    data-driven React Applications
    

    View Slide

14. ैདྷͷख๏
    1. Πϕϯτ͕τϦΨʔ͞ΕΔ
    2. αʔόʔʹϦΫΤετ͢Δ
    3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ
    

    View Slide

15. $el.find('.select').on('selectProduct', id => {
    fetch(`/products/${id}`).then(product => {
    $('.name').text(product.name);
    $('.description').text(product.description);
    });
    });
    

    View Slide

16. ReactΛ࢖ͬͨ৔߹
    1. Πϕϯτ͕τϦΨʔ͞ΕΔ
    2. αʔόʔʹϦΫΤετ͢Δ
    3. ϨεϙϯεͷσʔλΛݩʹstateΛߋ৽͢Δ
    • ࣗಈͰView͕ߋ৽͞ΕΔ
    

    View Slide

17. class AppComponent extends React.Component {
    handleSelect(id) {
    fetch(`/products/{id}`).then(product => {
    // update state
    });
    }
    render() {
    return (
    let { name, description } = this.props.app.product;
    
    this.handleSelect(id)} />
    {name}
    {description}
    
    );
    }
    }
    ໋ྩత
    એݴత
    

    View Slide

18. RelayΛ࢖ͬͨ৔߹
    1. Πϕϯτ͕τϦΨʔ͞ΕΔ
    2. ϦΫΤετΛͭ͘ΔͨΊͷ஋Λߋ৽͢Δ
    • ࣗಈͰϦΫΤετΛૹΔ
    • ϨεϙϯεͷσʔλΛݩʹstateΛࣗಈͰߋ৽
    • View͕ࣗಈతʹߋ৽͞ΕΔ
    

    View Slide

19. class AppComponent extends React.Component {
    handleSelect(id) {
    this.props.relay.setVariables({ id });
    }
    render() {
    let { name, description } = this.props.app.product;
    return (
    // Reactͷྫͱಉ༷
    );
    }
    }
    const AppContainer = Relay.createContainer(AppComponent, {
    initialVariables: { id: 1 },
    fragments: {
    app: () => Relay.QL`
    fragment on App {
    product(id: $id) {
    name, description
    }
    }
    `,
    },
    });
    એݴత
    

    View Slide

20. ଞʹ΋ɾɾɾ
    • ΫΤϦͷߏ଄Խ
    • ΫΤϦͷ੩తܕνΣοΫ
    • σʔλͷߋ৽
    • ϩʔσΟϯάͷ੍ޚ
    • Ωϟογϡ
    • ϖʔδωʔγϣϯ
    • ͳͲͳͲ੝Γͩ͘͞Μ
    

    View Slide

21. RelayͷͭΒ͍ͱ͜Ζ
    

    View Slide

22. • GraphQL/Reactͷ஌͕ࣝલఏ
    • babelΛ࢖ͬͨϏϧυ؀ڥඞਢ
    • React΄ͲγϯϓϧͰ͸ͳ͍
    • ͪΐͬͱࢼ͚ͩ͢Ͱ΋ෑډߴ͍
    • ݱ࣌఺Ͱ͸ࢿྉ΍ࢀߟΞϓϦ͕ઈ๬తʹগͳ͍
    

    View Slide

23. fin.
    

    View Slide