Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Organización de aplicaciones web con Backbone.js

1,339 views

Published on

Charla sobre como estructurar aplicaciones web con Backbone.js, presentada en una Meetup local de JavaScript.

Published in: Software
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Organización de aplicaciones web con Backbone.js

  1. 1. Organización de aplicaciones con Backbone.js Diego Cardozo github.com/diegocard/backbone-presentation
  2. 2. Objetivos Esta charla no es un tutorial de Backbone Se centra en el diseño de clientes web inteligentes Vamos a usar Backbone como ejemplo Vemos conceptos independientes de la tecnología Aplicables a otras herramientas Y de paso aprendemos algo de Backbone
  3. 3. ¿Que espero que se lleven? Conceptos útiles para diseñar clientes complejos Conocimientos básicos de Backbone Ganas de aprender más Para los que conocen Backbone Buenas prácticas Combinación con otras herramientas
  4. 4. Agenda 1. Introducción 2. Arquitectura 3. Ejemplo 4. Componentes de Backbone 5. Estructurar una aplicación
  5. 5. Introducción (1) Los clientes web cuentan cada vez con mas recursos Permite construir clientes mas inteligentes Pero los clientes complejos con jQuery... Son difíciles de construír Carecen de estructura Dificultan la reutilización Crear tu propia estructura sería reinventar la rueda
  6. 6. Introducción (2)
  7. 7. Introducción (3) Backbone brinda Estructura al código JavaScript en el cliente Varias utilidades reutilizables Básicamente es un framework MV* Organizamos el código en distintos componentes Modelos Colecciones Vistas Templates Routers
  8. 8. Arquitectura (1)
  9. 9. Arquitectura (2) Ventajas Mantenimiento más sencillo Distribución de carga Comienzo del desarrollo más ágil La interfaz es simplemente otro cliente Se presta muy bien para testing Perfecto para combinar con aplicaciones móviles
  10. 10. Ejemplogithub.com/diegocard/backbone-presentation/demo
  11. 11. Componentes (1) Modelo var User = Backbone.Model.extend({ urlRoot: '/users' });
  12. 12. Componentes (2) Colección var Users = Backbone.Collection.extend({ url: '/users' });
  13. 13. Componentes (3) Vista var UserListView = Backbone.View.extend({ el: '.page', render: function () { var that = this; var users = new Users(); users.fetch({ success: function (users) { var template = _.template( $('#user-list-template').html(), {users: users.models} ); that.$el.html(template); } }) } });
  14. 14. Componentes (4) Manejo de eventos var UserEditView = Backbone.View.extend({ el: '.page', events: { 'submit .edit-user-form': 'saveUser', 'click .delete': 'deleteUser' }, saveUser: function (ev) { var userDetails = $(ev.currentTarget).serializeObject(); var user = new User(); user.save(userDetails, { success: function (user) { router.navigate('', {trigger:true}); } }); } });
  15. 15. Componentes (5) Template <script type="text/template" id="user-list-template"> <a href="#/new" class="btn btn-primary">New</a> <hr /> <table class="table striped"> <thead> <tr> <th>First Name</th><th>Last Name</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><a class="btn" href="#/edit/<%= user.id %>">Edit</a></td> </tr> <% }); %> </tbody> </table> </script>
  16. 16. Componentes (6) Router var Router = Backbone.Router.extend({ routes: { "": "home", "edit/:id": "edit", "new": "edit", } });
  17. 17. Estructura (1) Usar Backbone no es garantía de prolijidad Se precisa estructurar y modularizar la aplicación Para esto utilizamos Require.js Encontré un excelente ejemplo en: backbonetutorials.com/organizing-backbone-using-modules
  18. 18. Estructura (2) Estructura sugerida 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
  19. 19. Estructura (3) Ejemplo: Lista de proyectos define([ 'jquery', 'underscore', 'backbone', // Usando el plugin text! de Require.js, // cargamos las templates como texto plano 'text!templates/project/list.html' ], function($, _, Backbone, projectListTemplate){ var ProjectListView = Backbone.View.extend({ el: $('#container'), render: function(){ // Compilamos la template usando Underscore // y agregar la plantilla al elemento de la vista var data = {}; var compiledTemplate = _.template(projectListTemplate, data); this.$el.append(compiledTemplate); } }); return ProjectListView; // Retornar la vista });
  20. 20. Recursos backbonejs.org backbonetutorials.com addyosmani.github.io/backbone-fundamentals github.com/diegocard/backbone-presentation
  21. 21. ¿Preguntas?

×