Building Mobile Applica1ons with Backbone.js and jquery Mobile

Transcription

1 Building Mobile Applica1ons with Backbone.js and jquery Mobile Jimmy Rivera So#ware Engineer

2 HTML5 and Mobile Mobile market is constantly growing HTML5 s:ll evolving HTML5 aims to achieve na:ve App like func:onality from the web browsers Na:ve packaging frameworks created to fill the gap between the device features and what HTML5 provides out of the box UX and performance are s:ll some of the major concerns 2

3 HMTL5 Mobile Frameworks Pioneers Sencha Touch jqtouch Inovators KendoUI LungoJS 3

4 jquery Mobile Unified, HTML5- based user interface system for all popular mobile device planorms Built on the rock- solid jquery and jquery UI founda:on. Lightweight code built with progressive markup enhancement Flexible, easily themeable design 4

5 Built on top of jquery De facto library for most of the web developers Element traversing/dom manipula:on Event handling Anima:ng AJAX interac:on Support for vast variety of browsers ThemeRoller support 5

6 Lightweight code Just 24KB minified and Gzipped Mul:ple CDN hos:ng different versions and even bleeding edge versions AMD support 6

7 Progressive enhancement Markup progressive enhancement approach Fallback behavior on browsers where no all enhancement are supported Lazy ini:aliza:on possible 7

8 Flexibility Open Source Flexible licensing Thousands of third party extensions (free and paid) Ability to build the library with just required func:onality 8

9 Javascript and spaghetti code Nested pile of callbacks Referring DOM elements from everywhere Code is everywhere No apparent real structure for our applica:ons 9

10 Backbone.js Minimal client side MVC javascript library Lightweight (around 6KB minified and gzipped) Simple and extensible RESTful oriented (but not strongly :ed) Only hard dependency is the Underscore.js u:lity library Can use either jquery or Zepto for DOM manipula:on 10

11 Backbone Model Models contains the data result of the interac:on of the applica:on users as well as data coming from remote servers Backbone models provides a basic set of func:onality for managing changes The Backbone.Model already provides convenient ways to perform CRUD opera:ons taking advantage of the Backbone.Sync implementa:on to interact with RESTful JSON API Easily extensible with domain specific methods. 11

12 Backbone Collection Collec:ons are in essence ordered sets of models encapsu- lated in a class that exposes methods to leverage the han- dling of more than one model at the same :me. Main features: Multiple model fetching with single request Mapping functions to multiple models Query capabilities over model collections 12

13 Backbone View Backbone.js is not a UI widget library! Backbone views are almost more conven:on than they are code General idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the en:re page Markup completely separated from code using a template engine Perfect fit with jquery Mobile 13

14 Backbone Sync Backbone.sync is the method that Backbone calls every :me it agempts to read or save a model to the server Works out of the box with RESTful APIs Some other persistence and service strategies: XML services WebSockets LocalStorage/WebSQL Native storage options on an hybrid container Remote methods exposed on a non-restful service 14

15 Backbone Router Provides the ability to have linkable, bookmarkable, shareable URLs for important loca:ons in the app Support either through fragments (#page) or through history state in modern browsers Ability to have single page apps, that means that you will actually never move to a different url/document and instead you will serve all the contents using AJAX requests and manipula:ng the page DOM to display requested content 15

16 Templates Markup por:ons that you will use to populate your views Use by default the Underscore.js template method to asynchronously load template files Perform simple opera:ons like condi:onal drawing or itera:ng over collec:ons within the template itself without any external DOM manipula:on Backbone can easily integrate with any other template engine like Mustache 16

17 Q&A 17

18 Por favor no olvide llenar su encuesta y pedir un 3cket para los sorteos de NetBooks y mochilas. 18

19 19