An introduction of the Backbone.js

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

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 • શମ૾͕͔ͭΊΔ