Organización de aplicaciones web con Backbone.js
-
Upload
diego-cardozo -
Category
Software
-
view
406 -
download
4
description
Transcript of Organización de aplicaciones web con Backbone.js
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?