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

Angular2とRails5 api modeで作成したポータルサイトの話

Transcript

1. ͓ຍʹϙʔλϧαΠτΛϦϦʔεͨ͠ 2016/08/17 @Speee LTେձ
2. ࣗݾ঺հ • @hatappi (yusaku.hatanaka) • ذෞग़਎ • ࠷ۙ͸Angular2Λॻ͍ͨΓRailsॻ͍ͨ Γͯ͠·͢
3. ੈͷதʹ͋Γ;ΕΔ֤ۀքͷϙʔλϧ αΠτ
4. ͳΜ͔୳͠ʹ͍͘ɾɾɾ
5. ࡞Ζ͏ʂʂ
6. ࡞ͬͨ!! • ׬੒ͨ͠΋ͷ͸༁͋ͬͯݟͤΒΕ·ͤΜ
7. ·ͣ͸ڝ߹ͷ෼ੳ͔Β
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. ࠷ޙʹ
33. ΞΫηε͸·ͩ·ͩ
34. index͸1݅ɾɾɾɾ ͜͜͸·༷ͩࢠݟ ΋͔ͨ͠͠ΒSPAͰ࡞ͬͨ͜ͱʹΑΓbot͕͏·͘ճ༡ग़དྷͯͳ͍ ͔΋͠Εͳ͍
35. ౰໘͸index਺Λ૿΍͍ͯ͘͠