Backbone.js in a real life application

Slide 1

Slide 1 text

Backbone.js in a real-life application Sebastiano Armeli-Battana @sebarmeli https://github.com/sebarmeli December 14 , 2011 MelbJS, Melbourne Monday, 3 June 13

Slide 2

Slide 2 text

JavaScript MVC Framework Model - View - Collections Lightweight RESTful JSON Interface Backbone.js Monday, 3 June 13

Slide 3

Slide 3 text

AJAX applications Desktop-like applications State vs Page Hash tag / pushState Single Page Application Monday, 3 June 13

Slide 4

Slide 4 text

Online Purchasing System https://web01.archicentre.com.au/websales/nrma High Responsive Data-driven Approach Events-oriented Monday, 3 June 13

Slide 5

Slide 5 text

Source code structure /js application.js models views controllers routers helpers lib live Monday, 3 June 13

Slide 6

Slide 6 text

Source code structure /js application.js models views controllers routers helpers lib live $(function){ AC.app_router = new AC.Routers.AppRouter(); Backbone.history.start({root: location.pathname}); }) Monday, 3 June 13

Slide 7

Slide 7 text

Router STATE ACTION Monday, 3 June 13

Slide 8

Slide 8 text

Router / index() FormPostcodeView STATE ACTION Monday, 3 June 13

Slide 9

Slide 9 text

Router / index() /#/postcode/xxxx FormPostcodeView selectRooms() FormRoomsView STATE ACTION Monday, 3 June 13

Slide 10

Slide 10 text

Router / index() /#/postcode/xxxx FormPostcodeView selectRooms() FormRoomsView extrasDetails() FormExtrasView STATE ACTION /#/postcode/xxxx/product/yyy/rooms/zzz Monday, 3 June 13

Slide 11

Slide 11 text

FormPostcodeView FormPostcodeView PostcodeView Monday, 3 June 13

Slide 12

Slide 12 text

FormPostcodeView FormPostcodeModel PostcodeModel Monday, 3 June 13

Slide 13

Slide 13 text

FormRoomsView FormRoomsView PriceView(s) Monday, 3 June 13

Slide 14

Slide 14 text

FormRoomsView FormRoomsModel ProductQuotesCollection ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel Monday, 3 June 13

Slide 15

Slide 15 text

FormExtrasView FormExtrasView ParameterBView ParameterBView ParameterBView ParameterNView QuotePriceView Monday, 3 June 13

Slide 16

Slide 16 text

FormExtrasView FormExtrasModel ProductQuote Model Parameter Parameter Parameter Parameter Monday, 3 June 13

Slide 17

Slide 17 text

Models Backbone.Model Key-value pairs fetch() / save() RESTful JSON API Validation Monday, 3 June 13

Slide 18

Slide 18 text

Collections Backbone.Collection models attribute fetch() / save() url attribute parse() Monday, 3 June 13

Slide 19

Slide 19 text

Views Backbone.View el / model / events attributes initialize() / render() HTML templating ICanHaz.js Monday, 3 June 13

Slide 20

Slide 20 text

Testing Jasmine-jquery SinonJS Monday, 3 June 13

Slide 21

Slide 21 text

http://documentcloud.github.com/backbone/ http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html Resources Monday, 3 June 13