An introduction of the Backbone.js

An introduction of the Backbone.js

Introduction of the Backbone.js for a private meeting in my company.

4f8c3a1aedaf9aafd6c74ab077d9ad18?s=128

shigeru. nakajima

May 13, 2016
Tweet

Transcript

  1. Backbone.js ͷ঺հ 2016/05/13 גࣜձࣾϥάβΠΞ தౡ࣎

  2. Backbone.js ͱ͸ • ΫϥΠΞϯταΠυJavaScriptϑϨʔϜϫʔΫ • ϒϥ΢βͰಈ͘ • Single Page ApplicationΛ࡞ΔͨΊʹ࢖͏

  3. ओͳ࢖༻ྫ • Hulu • Airbnb • Foursquare • ͦͷଞ

  4. Single Page Applicationͱ͸ • ୯ҰϖʔδʹΑΔWebΞϓϦέʔγϣϯ • ྫɿGoogleϚοϓɺGmail • ϖʔδ͸DOMͷૢ࡞ʹΑΓ੾Γସ͑Λߦ͏ •

    αʔόͱͷ΍ΓͱΓ͸Ajax΍WebSocketʹΑΓ ߦ͏
  5. σϞ έ◦ΩʔϥΠηϯε؅ཧΞϓϦέʔγϣϯ • Rails::API • Backbone.js

  6. ಛ௃ 1 ރΕ͍ͯΔ • 2010೥ੜ·Ε • ࡞ऀ • Jeremy Ashkenas

    • CoffeeScriptͱUnderscore.jsͷ࡞ऀ • ͜ͷઌɺେ͖ͳมߋ͕ͳ͍ • ϓϥάΠϯ͕ॆ࣮
  7. ಛ௃ 2 ໾ׂ෼୲͕໌֬ • ViewͱModelʹ෼͚Δ • View • Πϕϯτϋϯυϥʔͷએݴ •

    DOMͷੜ੒ • Model • σʔλͷอ࣋ • RESTfulAPIͱͷ௨৴
  8. ಛ௃ 3 RESTful APIΛ࢖͍΍͍͢ • RESTful API਌࿨ੑ • ModelʹAPIͷurlΛઃఆ •

    ModelͷfetchϝιουͰऔಘ • saveϝιουͰอଘ • CREATEͱUPDATEΛࣗಈ൑ผ
  9. دΓಓ 1 CRUD • CRUD • σʔλૢ࡞ͷछྨʢྫ͑͹σʔλϕʔεʣ • Create •

    INSERT • Read • SELECT • Update • Delete
  10. دΓಓ 2 REST • REST (Representational State Transfer) • HTTPϝιουͱURLͰCRUDΛදݱ

    • Create : POST /users • Read : GET /users ɾ GET /users/:id • Update : PUT /users/:id • Delete : Delete /users/:id
  11. دΓಓ 3 RESTͱσʔλϕʔεૢ࡞ • URLͱσʔλϕʔεૢ࡞͕ରԠ • Create : POST /users

    : INSERT • Read : GET /users : SELECT • Update : PUT /users/:id : UPDATE • Delete : Delete /users/:id : DELETE
  12. دΓಓ 4 RESTful API • REST ͳ URL ͷ API

    • Ϩεϙϯε͕JSONܗࣜ • JavaScriptϓϩάϥϛϯάͰѻ͍΍͍͢ • Html͸ѻ͍ʹ͍͘
  13. γʔέϯεʹԊͬͯιʔείʔυղઆ

  14. ޲͍͍ͯΔҊ݅ • RESTful API͕͋Δ • ը໘ͷσβΠϯ͕֬ఆࡁΈ • jQueryΛ࢖͏ • Internet

    ExplorerରԠ
  15. ޲͍͍ͯͳ͍Ҋ݅ • JavaScriptͰσʔλΛѻ͏ίʔυ͕গͳ͍ • ྫʣtextae͸8739ߦத978ߦʢ11%ʣ

  16. ࢀߟࢿྉ • backbonejs.org • ࠷৽API͕Θ͔Δ • Backbone.jsೖ໳ (શ22ճ) - ϓϩάϥϛϯ

    άͳΒυοτΠϯετʔϧ • ϓϩάϥϛϯάͷखॱ͕Θ͔Δ • ೖ໳Backbone.js • શମ૾͕͔ͭΊΔ