Organización de aplicaciones web con Backbone.js
-
Upload
diego-cardozo -
Category
Software
-
view
404 -
download
4
description
Transcript of Organización de aplicaciones web con Backbone.js
![Page 1: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/1.jpg)
OrganizacióndeaplicacionesconBackbone.js
DiegoCardozo
github.com/diegocard/backbone-presentation
![Page 2: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/2.jpg)
ObjetivosEstacharlanoesuntutorialdeBackboneSecentraeneldiseñodeclienteswebinteligentesVamosausarBackbonecomoejemploVemosconceptosindependientesdelatecnologíaAplicablesaotrasherramientasYdepasoaprendemosalgodeBackbone
![Page 3: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/3.jpg)
¿Queesperoqueselleven?ConceptosútilesparadiseñarclientescomplejosConocimientosbásicosdeBackboneGanasdeaprendermás
ParalosqueconocenBackbone
BuenasprácticasCombinaciónconotrasherramientas
![Page 4: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/4.jpg)
Agenda1. Introducción2. Arquitectura3. Ejemplo4. ComponentesdeBackbone5. Estructurarunaaplicación
![Page 5: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/5.jpg)
Introducción(1)LosclienteswebcuentancadavezconmasrecursosPermiteconstruirclientesmasinteligentesPerolosclientescomplejosconjQuery...
SondifícilesdeconstruírCarecendeestructuraDificultanlareutilizaciónCreartupropiaestructuraseríareinventarlarueda
![Page 6: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/6.jpg)
Introducción(2)
![Page 7: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/7.jpg)
Introducción(3)Backbonebrinda
EstructuraalcódigoJavaScriptenelclienteVariasutilidadesreutilizables
BásicamenteesunframeworkMV*Organizamoselcódigoendistintoscomponentes
ModelosColeccionesVistasTemplatesRouters
![Page 8: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/8.jpg)
Arquitectura(1)
![Page 9: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/9.jpg)
Arquitectura(2)Ventajas
MantenimientomássencilloDistribucióndecargaComienzodeldesarrollomáságilLainterfazessimplementeotroclienteSeprestamuybienparatestingPerfectoparacombinarconaplicacionesmóviles
![Page 10: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/10.jpg)
Ejemplogithub.com/diegocard/backbone-presentation/demo
![Page 11: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/11.jpg)
Componentes(1)Modelo
varUser=Backbone.Model.extend({urlRoot:'/users'});
![Page 12: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/12.jpg)
Componentes(2)Colección
varUsers=Backbone.Collection.extend({url:'/users'});
![Page 13: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/13.jpg)
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);}})}});
![Page 14: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/14.jpg)
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});}});}});
![Page 15: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/15.jpg)
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>
![Page 16: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/16.jpg)
Componentes(6)Router
varRouter=Backbone.Router.extend({routes:{"":"home","edit/:id":"edit","new":"edit",}});
![Page 17: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/17.jpg)
Estructura(1)UsarBackbonenoesgarantíadeprolijidadSeprecisaestructurarymodularizarlaaplicaciónParaestoutilizamosRequire.jsEncontréunexcelenteejemploen:
backbonetutorials.com/organizing-backbone-using-modules
![Page 18: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/18.jpg)
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
![Page 19: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/19.jpg)
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});
![Page 20: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/20.jpg)
Recursos
backbonejs.orgbackbonetutorials.comaddyosmani.github.io/backbone-fundamentalsgithub.com/diegocard/backbone-presentation
![Page 21: Organización de aplicaciones web con Backbone.js](https://reader036.fdocuments.co/reader036/viewer/2022081401/559915b21a28aba7798b473a/html5/thumbnails/21.jpg)
¿Preguntas?