StructuringwebapplicationswithBackbone.js

DiegoCardozo

github.com/diegocard/backbone-presentation

GoalsThispresentationisn'tonlyaBackbonetutorialWe'llfocusoncomplexclientdesignUsingBackboneasthemaintoolMostconceptswon'tbetool-specificCanbeappliedtoothertoolslikeAngularorKnockoutWe'lllearnBackbonethroughexamples

WhatdoIwantyoutolearn?UsefulconceptsforcomplexwebclientdesignBasicBackboneknowledgeMotivationtokeeplearning

ForthosewhoalreadyknowBackbone

GoodpracticesCombinationwithothertools

Agenda1. Introduction2. Architecture3. Example4. Backbonecomponents5. Structuringawebapplication

Introduction(1)WebclientshavebetterresourceseverydayWecannowbuildsmartclientsButcomplexapplicationswithjQuery...

ArehardtobuildLackstructureDonotfavorreutilizationCreatingyourownstructureisreinventingthewheel

Introduction(2)

Introduction(3)Backbonegivesus

Structureforourclient-sideJavaScriptcodeSeveralutilities

Basically,itisaMV*frameworkWeorganizecodeindifferentcomponents

ModelsCollectionsViewsTemplatesRouters

Architecture(1)

Architecture(2)Advantages

MaintainabilityLoaddistributionQuickerstarttothedevelopmentprocessUIisonlyanotherclientGreatfortestingPerfectforcombiningwithmobileapps

Examplegithub.com/diegocard/backbone-presentation/demo

Components(1)Model

varUser=Backbone.Model.extend({urlRoot:'/users'});

Components(2)Collection

varUsers=Backbone.Collection.extend({url:'/users'});

Components(3)View

varUserListView=Backbone.View.extend({el:'.page',render:function(){varthat=this;varusers=newUsers();users.fetch({success:function(users){vartemplate=_.template($('#user-list-template').html(),{users:users.models});that.$el.html(template);}})}});

Components(4)Eventhandling

varUserEditView=Backbone.View.extend({el:'.page',events:{'submit.edit-user-form':'saveUser','click.delete':'deleteUser'},saveUser:function(ev){varuserDetails=$(ev.currentTarget).serializeObject();varuser=newUser();user.save(userDetails,{success:function(user){router.navigate('',{trigger:true});}});}});

Components(5)Template

<scripttype="text/template"id="user-list-template"><ahref="#/new"class="btnbtn-primary">New</a><hr/><tableclass="tablestriped"><thead><tr><th>FirstName</th><th>LastName</th><th>Age</th><th></th></tr></thead><tbody><%_.each(users,function(user){%><tr><td><%=htmlEncode(user.get('firstname'))%></td><td><%=htmlEncode(user.get('lastname'))%></td><td><%=htmlEncode(user.get('age'))%></td><td><aclass="btn"href="#/edit/<%=user.id%>">Edit</a></td></tr><%});%></tbody></table></script>

Components(6)Router

varRouter=Backbone.Router.extend({routes:{"":"home","edit/:id":"edit","new":"edit",}});

Structure(1)Usingbackbonedoesn'tguaranteegoodpracticesWeneedtoorganizeandmodularizeourapplicationWecanuseRequire.jstoachievethisIfoundagreatexampleat:

backbonetutorials.com/organizing-backbone-using-modules

Structure(2)Suggestedstructure

Root├──imgs├──css│└──style.css├──templates│├──projects││├──list.html││└──edit.html│└──users│├──list.html│└──edit.html├──js│├──libs││├──jquery│││├──jquery.min.js││├──backbone│││├──backbone.min.js││└──underscore│││├──underscore.min.js│├──models││├──users.js

Structure(3)Example:Proyectlist

define(['jquery','underscore','backbone',//Usingthetext!pluginforRequire.js,//wecanloadtemplatesasplaintext'text!templates/project/list.html'],function($,_,Backbone,projectListTemplate){varProjectListView=Backbone.View.extend({el:$('#container'),render:function(){//Compilethetemplatewithunderscore//andaddthetemplatetotheviewelementvardata={};varcompiledTemplate=_.template(projectListTemplate,data);this.$el.append(compiledTemplate);}});returnProjectListView;//Returntheview});

Resources

backbonejs.orgbackbonetutorials.comaddyosmani.github.io/backbone-fundamentalsgithub.com/diegocard/backbone-presentation

¿Questions?