OrganizacióndeaplicacionesconBackbone.js

DiegoCardozo

github.com/diegocard/backbone-presentation

ObjetivosEstacharlanoesuntutorialdeBackboneSecentraeneldiseñodeclienteswebinteligentesVamosausarBackbonecomoejemploVemosconceptosindependientesdelatecnologíaAplicablesaotrasherramientasYdepasoaprendemosalgodeBackbone

¿Queesperoqueselleven?ConceptosútilesparadiseñarclientescomplejosConocimientosbásicosdeBackboneGanasdeaprendermás

ParalosqueconocenBackbone

BuenasprácticasCombinaciónconotrasherramientas

Agenda1. Introducción2. Arquitectura3. Ejemplo4. ComponentesdeBackbone5. Estructurarunaaplicación

Introducción(1)LosclienteswebcuentancadavezconmasrecursosPermiteconstruirclientesmasinteligentesPerolosclientescomplejosconjQuery...

SondifícilesdeconstruírCarecendeestructuraDificultanlareutilizaciónCreartupropiaestructuraseríareinventarlarueda

Introducción(2)

Introducción(3)Backbonebrinda

EstructuraalcódigoJavaScriptenelclienteVariasutilidadesreutilizables

BásicamenteesunframeworkMV*Organizamoselcódigoendistintoscomponentes

ModelosColeccionesVistasTemplatesRouters

Arquitectura(1)

Arquitectura(2)Ventajas

MantenimientomássencilloDistribucióndecargaComienzodeldesarrollomáságilLainterfazessimplementeotroclienteSeprestamuybienparatestingPerfectoparacombinarconaplicacionesmóviles

Ejemplogithub.com/diegocard/backbone-presentation/demo

Componentes(1)Modelo

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

Componentes(2)Colección

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

Componentes(3)Vista

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);}})}});

Componentes(4)Manejodeeventos

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});}});}});

Componentes(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>

Componentes(6)Router

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

Estructura(1)UsarBackbonenoesgarantíadeprolijidadSeprecisaestructurarymodularizarlaaplicaciónParaestoutilizamosRequire.jsEncontréunexcelenteejemploen:

backbonetutorials.com/organizing-backbone-using-modules

Estructura(2)Estructurasugerida

Raíz├──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

Estructura(3)Ejemplo:Listadeproyectos

define(['jquery','underscore','backbone',//Usandoelplugintext!deRequire.js,//cargamoslastemplatescomotextoplano'text!templates/project/list.html'],function($,_,Backbone,projectListTemplate){varProjectListView=Backbone.View.extend({el:$('#container'),render:function(){//CompilamoslatemplateusandoUnderscore//yagregarlaplantillaalelementodelavistavardata={};varcompiledTemplate=_.template(projectListTemplate,data);this.$el.append(compiledTemplate);}});returnProjectListView;//Retornarlavista});

Recursos

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

¿Preguntas?