Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An introduction of the Backbone.js

An introduction of the Backbone.js

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

shigeru. nakajima

May 13, 2016
Tweet

More Decks by shigeru. nakajima

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. σϞ
    έ○ΩʔϥΠηϯε؅ཧΞϓϦέʔγϣϯ
    • Rails::API
    • Backbone.js

    View full-size slide

  6. ಛ௃ 1 ރΕ͍ͯΔ
    • 2010೥ੜ·Ε
    • ࡞ऀ
    • Jeremy Ashkenas
    • CoffeeScriptͱUnderscore.jsͷ࡞ऀ
    • ͜ͷઌɺେ͖ͳมߋ͕ͳ͍
    • ϓϥάΠϯ͕ॆ࣮

    View full-size slide

  7. ಛ௃ 2 ໾ׂ෼୲͕໌֬
    • ViewͱModelʹ෼͚Δ
    • View
    • Πϕϯτϋϯυϥʔͷએݴ
    • DOMͷੜ੒
    • Model
    • σʔλͷอ࣋
    • RESTfulAPIͱͷ௨৴

    View full-size slide

  8. ಛ௃ 3 RESTful APIΛ࢖͍΍͍͢
    • RESTful API਌࿨ੑ
    • ModelʹAPIͷurlΛઃఆ
    • ModelͷfetchϝιουͰऔಘ
    • saveϝιουͰอଘ
    • CREATEͱUPDATEΛࣗಈ൑ผ

    View full-size slide

  9. دΓಓ 1 CRUD
    • CRUD
    • σʔλૢ࡞ͷछྨʢྫ͑͹σʔλϕʔεʣ
    • Create
    • INSERT
    • Read
    • SELECT
    • Update
    • Delete

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  12. دΓಓ 4 RESTful API
    • REST ͳ URL ͷ API
    • Ϩεϙϯε͕JSONܗࣜ
    • JavaScriptϓϩάϥϛϯάͰѻ͍΍͍͢
    • Html͸ѻ͍ʹ͍͘

    View full-size slide

  13. γʔέϯεʹԊͬͯιʔείʔυղઆ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ࢀߟࢿྉ
    • backbonejs.org
    • ࠷৽API͕Θ͔Δ
    • Backbone.jsೖ໳ (શ22ճ) - ϓϩάϥϛϯ
    άͳΒυοτΠϯετʔϧ
    • ϓϩάϥϛϯάͷखॱ͕Θ͔Δ
    • ೖ໳Backbone.js
    • શମ૾͕͔ͭΊΔ

    View full-size slide