お盆にポータルサイトをSPAでリリースした

Transcript

1. ͓ຍʹϙʔλϧαΠτΛϦϦʔεͨ͠ 2016/08/17 @Speee LTେձ

2. ࣗݾ঺հ • @hatappi (yusaku.hatanaka) • ذෞग़਎ • ࠷ۙ͸Angular2Λॻ͍ͨΓRailsॻ͍ͨ Γͯ͠·͢

3. ੈͷதʹ͋Γ;ΕΔ֤ۀքͷϙʔλϧ αΠτ

4. ͳΜ͔୳͠ʹ͍͘ɾɾɾ

5. ࡞Ζ͏ʂʂ

6. ࡞ͬͨ!! • ׬੒ͨ͠΋ͷ͸༁͋ͬͯݟͤΒΕ·ͤΜ

7. ·ͣ͸ڝ߹ͷ෼ੳ͔Β

8. None
9. None

10. ٕज़બఆɹ • Rails5 api mode • Angular2.rc4 • GCP

11. Rails5 api mode ݩʑ͸gemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ • helper΍assets, views͕ͬͦ͝Γফ͑ͯΔ • cookieͱ͔session storeͷఆٛ΋ͳ͚Ε͹assets΋ͳ͍

12. Angular2 Google੡ͷJSϑϨʔϜϫʔΫ ݩʑ͋ͬͨAngular1ͷޙܧ͕ͩޓ׵ੑ͸΄ͱΜͲͳ͍ͱͷ͜ͱ! ਖ਼ࣜϦϦʔε͸͞Ε͓ͯΒͣ࠷৽͸rc5 rc6͕ग़ΔΒ͍͕͠େ͖ͳΞοϓσʔτ͸rc5ͰऴΘΓΒ͍͠

13. GCP • railsͱangularʹؔͯ͠͸GCE(AWSͰ͍ ͏EC2) • ը૾ͷ഑৴ʹؔͯ͠͸GCS(AWSͰ͍͏ ͱ͜ͷS3)ʹ͓͖ɺͦͷ··CDNͱ͠ ͯ࢖͏ • GCE͸let's

    encryptͰূ໌ॻΛͱͬͯɺ http/2Ͱఏڙ

14. ࠓճ͸Railsͱ͍͏͔JSONΑΓͷ࿩

15. Έͳ͞Μ͸RailsͰJSONͷϨεϙϯε Λฦ͢͜ͱ͕͋Γ·͔͢ʁ

16. ༻్͸༷ʑ • ΞϓϦͱ͔Ͱ࢖༻͢ΔAPIαʔόʔͷߏங࣌ • AJAXͰ௨৴Λ͢Δ࣌ • etc...

17. RFC4627,7159ʹJSONͷ࢓༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ͸ [ ɺऴྃʹ͸ ] • ஋ͷ۠੾Γʹ͸ ,

    • string͸ " Ͱғ΋͏ • etc...

18. RFC4627,7159ʹJSONͷ࢓༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ͸ [ ɺऴྃʹ͸ ] • ஋ͷ۠੾Γʹ͸ ,

    • string͸ " Ͱғ΋͏ • etc... ࢓༷कͬͯ͋Ε͹ޙ͸ࣗ༝

19. /users { "result":[ { "id":1, "name":"yusaku.hatanaka" }, { "id":2, "name":"hoge.taro"

    } ] }

20. /users { "response":{ "status":200, "users":[ { "id":1, "name":"yusaku.hatanaka" }, {

    "id":2, "name":"hoge.taro" } ] } }

21. ϑΥʔϚοτ͕ఆ·Βͳ͍!

22. ϑϩϯτܹ͓͜! • API͝ͱʹϨεϙϯεͷܗ͕ࣜҟͳΔͷͰɺͦΕͧΕͰύʔαʔ Λॻ͔ͳ͍ͱ͍͚ͳ͍

23. ੈͷதʹ͸JSONͷϑΥʔϚοτΛఆ Ίͨ΋ͷ͕͋Δ

24. HAL

25. { "_links": { "self": { "href": "/comments/1" } }, "id":

    1, "message": "LTେձʹࢀՃͯ͠·͢", "_embedded": { "user": { "_links": { "self": { "href": "/users/7" } }, "id": 7, "name": "yusaku.hatanaka" } } }

26. JSON:API

27. { "data":{ "id":"1", "type":"users", "links":{ "self":"http://hoge.com/users/1" }, "attributes":{ "name":"yusaku.hatanaka" },

    "relationships":{ "comments":{ "links":{ "self":"http://hoge.com/users/1/relationships/comments", "related":"http://hoge.com/users/1/comments" }, "data":{ "type":"comments", "id":"8" } } }, "included":[ { "id":"8", "type":"comments", "links":{ "self":"http://hoge.com/comments/8" }, "attributes":{ "context":"LTେձʹࢀՃͯ͠·͢" }, "relationships":{ } } ] } }

28. JSON:APIͱHAL • HAL • intergent draftʹೖ͍ͬͯΔ • AWSͷAPIGatewayͰ࢖༻͞Ε͍ͯΔ࣮੷ • JSON:API

    • error࣌ͷϨεϙϯεͳͲͷݴٴ΋͋Δ • ձࣾͷϓϩμΫτͰ࢖༻͞Ε͍ͯΔ࣮੷ • GET͚ͩͰͳ͘ɺPOST΍DELETEͳͲCRUD΁ͷݴٴ΋͋Δ

29. ͦΕͧΕͷϑΥʔϚοτͰϨεϙϯε Λฦ͠΍͘͢͢Δgem΋͋Δ • HAL => apotonick/roar • JSON:API => cerebris/jsonapi-resources

30. ·ͱΊ • ෳ਺ਓͰ։ൃ͢Δࡍʹ͸JSONͷϑΥʔϚοτΛ͖Ί͓ͯ͘ͱɺ ϑϩϯτͱ஥ྑ͘ͳΕΔʢ͔΋͠Εͳ͍ʣ • νʔϜ಺ͰܾΊͯ΋ྑ͍͕ɺάμάμʹͳΒͳ͍Α͏ʹ

31. ࠷ޙʹ

32. None

33. ΞΫηε͸·ͩ·ͩ

34. index͸1݅ɾɾɾɾ ͜͜͸·༷ͩࢠݟ ΋͔ͨ͠͠ΒSPAͰ࡞ͬͨ͜ͱʹΑΓbot͕͏·͘ճ༡ग़དྷͯͳ͍ ͔΋͠Εͳ͍

35. ౰໘͸index਺Λ૿΍͍ͯ͘͠