creating single page web app using backbone js
DESCRIPTION
This was presented during the workshop on the topic. The complete code of the app that was created during the workshop is available at Github https://github.com/mathurakshay/explore-venuesTRANSCRIPT
![Page 1: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/1.jpg)
Creating Single Page Web Appusing
Akshay Mathur
![Page 2: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/2.jpg)
@akshaymathu 2
Akshay Mathur
• Founding Team Member of– ShopSocially (Enabling “social” for retailers)– AirTight Neworks (Global leader of WIPS)
• 15+ years in IT industry– Currently Principal Architect at ShopSocially– Mostly worked with Startups• From Conceptualization to Stabilization• At different functions i.e. development, testing, release• With multiple technologies
![Page 3: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/3.jpg)
What have we learnt
• Creating basic web pages– HTML tags– CSS
• Basic JavaScript and jQuery– Reading and writing DOM– Getting data using AJAX calls– Responding to browser events– jQuery templates
• CoffeeScript• Object Oriented JavaScript
– JS Classes– Extending classes using prototypes
![Page 4: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/4.jpg)
@akshaymathu 4
BackboneJS
• Provides MVC structure for JavaScript• Built on top of UnderscoreJS• Other than Model, View and Controller
(Router) also provides Event and Collection objects– Using custom events help writing good code and
eliminates use of global variables– Array of Models with same structure can be
combined into Collection for ease of handling
![Page 5: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/5.jpg)
@akshaymathu 5
UnderscoreJS
• Has nothing to do with MVC• Provides many useful functions on– Arrays– Objects– Array of Objects
• BackboneJS directly extends a few functions for its objects (Classes)
![Page 6: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/6.jpg)
@akshaymathu 6
BackboneJS codeclass LoginModel extends Backbone.Modelclass LoginView extends Backbone.View
initialize: =>@template = $(’#login_template').template()@render()
render: =>$(@el).html $.tmpl(@template, @model.toJSON())
events: =>'click #login_btn' : ’login_handler’
login_handler: (ev) =>window.mpq_track ’Login Click’
class LoginController extends Backbone.Routerinitialize: =>
@l_model = new LoginModel window.app_info@l_view = new LoginView model: model, el:
’#login_div’
![Page 7: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/7.jpg)
@akshaymathu 7
Backbone View
• A View is created by extending a Backbone’s view class
• A View always have 2 properties:– el: An HTML element that is in the root of the
View– model: Model that powers data to the View
![Page 8: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/8.jpg)
@akshaymathu 8
Creating Viewclass LoginView extends Backbone.View
initialize: =>@template = $.template($(’#login_template’))@render()render: =>$(@el).html $.tmpl(@template,
@model.toJSON())
class LoginController extends Backbone.Routerinitialize: =>@l_model = new LoginModel window.app_info@l_view = new LoginView model: @l_model, el: ’#login_div’
![Page 9: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/9.jpg)
@akshaymathu 9
Rendering HTML
• Typically a view has a template• In the render method, the template should be filled
with data and inserted into el– The el can be attached to DOM before or after filling HTML
class LoginView extends Backbone.Viewinitialize: =>
@template = $.template $(’#login_template’)
render: =>$(@el).html $.tmpl(@template,
@model.toJSON())
![Page 10: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/10.jpg)
@akshaymathu 10
Browser Events
• Defining events object within a view automatically connects functions to event handlers
class LoginView extends Backbone.Viewevents:
'click #login_btn' : ’login_handler’
login_handler: (ev) =>window.mpq_track ’Login Click’
![Page 11: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/11.jpg)
@akshaymathu 11
Design Views for
• http://explore-venues.appspot.com/
![Page 12: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/12.jpg)
@akshaymathu 12
Thinking of Views
• Create a view for whole page– Base view that can handle anything as needed– It may be rendered by server
• A view for each unit that is logically different– Event handling is needed within
• Keep separate model for each view
![Page 13: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/13.jpg)
@akshaymathu 13
Zombie Views
• When new views are created from a view class and attached to DOM in a way that it replaces HTML of an old view– The old view object and its events remain attached and
create issues$(“#button”).click ->
@view = new SomeView
Class SomeView extends backbone.Viewrender: =>
$(“container”).html template_html
![Page 14: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/14.jpg)
@akshaymathu 14
Handling Zombies
• Don’t let zombies create• Use .destroy() on the View instance• Cleanup associated model if needed$(“#button”).click ->
@view = new SomeView
$(“#close_button”).click ->@view.destroy()
![Page 15: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/15.jpg)
@akshaymathu 15
![Page 16: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/16.jpg)
@akshaymathu 16
Backbone Model
• Model is defined extending the Backbone’s Model Class
• The Model object can be created with the data coming from the server (database)
• The data can be read later using .get() and set using .set() methods
• Transient data (not intended to be synced with server) can be stored separately
![Page 17: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/17.jpg)
@akshaymathu 17
Creating Model
app_info = {type: 4, name: ‘Internal
Application’, protected: true
}class LoginModel extends Backbone.Model
initialize: =>@is_changed = false
class LoginRouter extends Backbone.Routerinitialize: =>
@l_model = new LoginModel app_info
![Page 18: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/18.jpg)
@akshaymathu 18
Data Manipulation
• Readold_name = @model.get ‘name’
• Writenew_name = old_name.toLower()@model.set ‘name’, [email protected]_changed = true
![Page 19: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/19.jpg)
@akshaymathu 19
Model Events
• Model object raises events on change in data– changed– remove
• These events may be captured (by view) and acted upon accordingly– A few properties are also set within the Model– Old and new values of the Model are also
available
![Page 20: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/20.jpg)
@akshaymathu 20
Keeping UI Up-to-Dateclass LoginView extends Backbone.View
initialize: =>@model.bind(‘change’, @render)@render()
render: =>$(@el).html $.tmpl(@template,
@model.toJSON())
class LoginRouter extends Backbone.Routerinitialize: =>@l_model = new LoginModel app_info@l_view = new LoginView model:@l_model
![Page 21: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/21.jpg)
@akshaymathu 21
Syncing with Server
• For having better control over data, one should collect data from the Model and make an AJAX call
• One can also attach a URL to the Model and RESTful AJAX calls are automatically done
![Page 22: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/22.jpg)
@akshaymathu 22
Collections
• Simple data structure for storing many instances of same model– Array of Model objects
• Provides methods and properties for managing the list
• Can be created by extending Collection class of Backbone
![Page 23: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/23.jpg)
@akshaymathu 23
Creating Collectionclass VenueModel extends Backbone.Model
class VenueCollection extends Backbone.Collectionmodel: VenueModel
class VenueListModel extends Backbone.Modelinitialize: =>
@e_list = new VenueCollection
class VenueListView extends Backbone.Viewinitialize: =>
@model.e_list.bind('add', @add_venue)
add_venue: (venue_model) =>
![Page 24: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/24.jpg)
@akshaymathu 24
![Page 25: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/25.jpg)
@akshaymathu 25
Backbone Router
• It routes URLs to respective methods• A Router is created by extending a Backbone’s
router class• Route configuration can be passed while
creating the router object instance
![Page 26: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/26.jpg)
@akshaymathu 26
Creating Router
class LoginController extends Backbone.Routerinitialize: =>
@l_model = new LoginModel window.app_info
@l_view = new LoginView model: model, el: ’#login_div’
routes:“help”: “help”
$(document).ready ->l_router = new LoginController()
![Page 27: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/27.jpg)
@akshaymathu 27
Route Configuration
• Rout configuration is a JavaScript object mapping URLs to functions– URL patterns may be used as key– Data can be read from URLs and passed to
functions as parameters
![Page 28: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/28.jpg)
@akshaymathu 28
Routes at Work
routes: "help": "help” // #help "search/:query": "search",
// #search/kiwis "search/:query/p:page": "search"
// #search/kiwis/p7
help: -> search: (query, page)->
![Page 29: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/29.jpg)
@akshaymathu 29
Catch All
• Router is sometimes used for putting methods not belonging to any other Model or View
• Router also acts as a glue for all other objects– Typically all basic views are initialized in router so
any cross-view functionality can be implemented in router
![Page 30: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/30.jpg)
@akshaymathu 30
![Page 31: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/31.jpg)
@akshaymathu 31
Events
• Events facilitate communication amongst different objects– Data can be passed along with events
• Browser raises events on user actions• Publish-Subscribe architecture avoids tight
coupling between objects
![Page 32: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/32.jpg)
@akshaymathu 32
Backbone Events
• Backbone objects also raise events on various actions– add: when a model is added to a collection. – remove: when a model is removed from a collection. – reset: when the collection's entire contents have been
replaced. – change: when a model's attributes have changed. – change: when a specific attribute has been updated. – destroy: when a model is destroyed.
![Page 33: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/33.jpg)
@akshaymathu 33
Custom Events
• Backbone’s event module can be mixed with an object– The the objects gets the ability to raise events
programmatically– The object also gets the ability to listen to the
events
![Page 34: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/34.jpg)
@akshaymathu 34
Defining Custom Events
EventDispatcher =SHOW_VENUE: 'show_venue'CLEAN: 'clean'
_.extend(EventDispatcher,
Backbone.Events)
![Page 35: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/35.jpg)
@akshaymathu 35
Using Custom EventsED = EventDispatcherclass VenuetView extends Backbone.View
initialize: =>ED.bind ED.CLEAN, @remove_self
class VenueListView extends Backbone.Viewinitialize: =>
@model.e_list.bind('add', @add_venue)ED.bind ED.CLEAN, @reset_col
clean_old_list: =>@venue_list_model.e_list.reset()ED.trigger ED.CLEAN
![Page 36: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/36.jpg)
@akshaymathu 36
![Page 37: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/37.jpg)
Go Hands-on
Explore FourSquare Venueshttp://explore-venues.appspot.com/
![Page 38: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/38.jpg)
@akshaymathu 38
![Page 39: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/39.jpg)
@akshaymathu 39
Design Views
• Page view– Accordion– Google Map
• Venue list view– All venue tiles
• Venue view– Single venue tile
• Venue details view (do later)– Popup with details of the venue
![Page 40: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/40.jpg)
@akshaymathu 40
Design Models
• As a thumb rule, a model can be kept for each view– Page model– Venue list model– Venue model– Venue details model (do later)
![Page 41: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/41.jpg)
@akshaymathu 41
Create Base HTML
• Head– Include Bootstrap CSS– Include JS
• Google Map API, jQuery’s , jQuery template• Bootstrap, Underscore, Backbone, App’s custom
• Top bar– Use navbar’s HTML from Bootstrap
• Accordion– Use Bootstrap jQuery plugin’s HTML– Create accordion headers– Keep accordion bodies blank
![Page 42: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/42.jpg)
@akshaymathu 42
Create jQuery Templates
• No template for Google Map– Map UI is completely rendered by Google APIs
• Venue template– Each venue tile
• Venue details template (do later)– Venue details popup– Use Bootstrap modal jQuery plugin’s HTML
![Page 43: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/43.jpg)
@akshaymathu 43
![Page 44: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/44.jpg)
Create CoffeeScript
![Page 45: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/45.jpg)
@akshaymathu 45
Basic Skeletonclass VenueModel extends Backbone.Modelclass VenueCollection extends Backbone.Collection
model: VenueModel
class VenueListModel extends Backbone.Modelinitialize: =>
@e_list = new VenueCollectionclass VenueListView extends Backbone.View
initialize: =>@model.e_list.bind('add', @add_venue)
class VenueView extends Backbone.View
class PageModel extends Backbone.Modelclass PageView extends Backbone.View
class VenueController extends Backbone.Router
![Page 46: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/46.jpg)
@akshaymathu 46
Start Execution• On DOM ready event, instantiate the router
$(document).ready ->venue_controller = new VenueController
• Create an instance of page model and view in initialize routine of routerclass VenueController extends
Backbone.Routerinitialize: =>
@page_model = new PageModel@page_view = new PageView (
el: $("#maindiv"), model: @page_model)
![Page 47: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/47.jpg)
@akshaymathu 47
Initialize Page View
• Page view initializes automatically when its instance gets created in router
• Initialize venue list
class PageView extends Backbone.Viewinitialize: =>
@venue_list_model = new VenueListModel@venue_list_view = new VenueListView(
el: $("#venue_list"), model: @venue_list_model)
![Page 48: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/48.jpg)
@akshaymathu 48
Google Map• In page view, create Google Map object and render it in the div created for
that• Register event handler for Google Map click event
@map = new google.maps.Map($(’#map-canvas’)[0]),map_options)
google.maps.event.addListener @map, 'click', (ev) =>
@get_venues(ev.latLng.lat(), ev.latLng.lng())
![Page 49: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/49.jpg)
@akshaymathu 49
Get Venues
• Make a JSONP AJAX call to FourSquare for getting venues near the clicked location
• Create a model from each venue in result and add to collection
venue_model = new VenueModel item.venue
@venue_list_model.e_list.add venue_model
![Page 50: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/50.jpg)
@akshaymathu 50
Render Venue Tile
• As venue model adds into collection, the add event handler on collection is fired in venue list view
@model.e_list.bind('add', @add_venue)
• Handlers gets the venue view rendered and attaches it to the DOM
add_venue: (venue_model) =>venue_view = new VenueView(model: venue_model)tile_html = venue_view.render()$("#venue_col).append tile_html
![Page 51: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/51.jpg)
@akshaymathu 51
Click on Venue Tile
• Venue view registers click handler by defining event mapclass VenueView extends
Backbone.Viewevents:"click" : 'show_details’
• Venue detail popup is to be shown outside base element (el) of the venue view so it raises an event
show_details: =>ED.trigger ED.SHOW_VENUE, @model
![Page 52: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/52.jpg)
@akshaymathu 52
Showing Details Popup
• Page view listens to the event and renders details popup
class PageView extends Backbone.Viewinitialize: =>ED.bind ED.SHOW_VENUE, @show_popup
show_popup: (venue_model) =>@detail_view = new VenueDetailView model: venue_model$(@el).append @detail_view.render()
![Page 53: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/53.jpg)
@akshaymathu 53
![Page 54: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/54.jpg)
@akshaymathu 54
Optimization
• Venue model and Venue detail model represent exactly same entity– There is always 1-1 relation
• Same model may be used for both– First render should not be slow for bringing details
![Page 55: Creating Single Page Web App using Backbone JS](https://reader035.vdocuments.us/reader035/viewer/2022062303/554bcd36b4c9058f6c8b4855/html5/thumbnails/55.jpg)
@akshaymathu 55
Thanks
@akshaymathu