1. Best of Brew City (BOB)
Mobile Web App - SPA, Backbone.js, Zepto.
js, HTML5, CSS3, JSON API
-Ezekiel Chentnik

2. What’s this guy gonna talk about?
●
●
●
●
●
what is BOB?
birds eye view of project
technical features
lessons learned
future of project
http://www.jsonline.com/brewcity/?mode=preview

3. What is BOB?
● A comprehensive & friendly mobile web app that allows
you to find things to do in Milwaukee
● Single page app that acts like a native app
● Built with:
○ HTML5, CSS3, JavaScript,
○ Underscore.js, Backbone.js, Zepto.js,
○ JSON API
○ appMobi

4. Bird’s Eye View of project
1.
2.
3.
4.
conception/discovery
time estimates, requirements, project approval
project: 2 week sprints, daily standups (soft launch, hard launch)
maintenance/v2
My role
●
●
●
Lead developer (full tech stack)
UI/UX guy
Manager, Teacher, Liaison

5. Performance

6. http://gtmetrix.com/reports/m.jsonline.com/xVWam8Sv

7. Performance
Goal: make as fast as possible
Accomplished: under 1 second home page load .36s
○ embedded image data uri's & sprites
○ compressed css, html & js
○ reduced http requests
○ google web font optimization using condensed font face calls and data
uri embedded fonts
○ server loaded google analytic assets
○ reduced html markup and nested HTML nodes
Improving: (testing: blocking scripts/js, asset caching/fragments, sprites/webfont icons)

8. Buttery Smooth UI
Goal: make super fast feeling, with native like UI
Features
● ios style page transitions
● pull to refresh
● momentum scrolling w/ios document jumping
bug fixed
Techniques:
● curbing user expectations
● hardware acceleration
● memory management - lightweight views
● panel rendering, active state

9. http://youtu.be/iPL5-9vWTLU
Demo - Pull to refresh, page transitions, momentum scrolling, overflow
rubber-band effect

10. Code snippet - Scrolling
.scrollenabled .scrollable{overflow:auto;-webkit-overflow-scrolling:touch;}
.no-scrollenabled .scrollable{/*defaults handle this case, modernizr*/}
.scrollenabled .scrollable .rubberband{margin:-1px 0 0 0;overflow:auto;height:100%;}
.scrollenabled .scrollable .inner-rubberband{margin:1px 0 10px 0;min-height:100%;}
.scrollenabled .scrollable .inner-rubberband:after {content: "";display: table;clear: both;}
<div id="panels" class="navigation-transition">
<section class="active panel promotions">
<article class="active view">
<header> [blue nav bar]
<div class="content scrollable">
<div class="rubberband">
<div class="inner-rubberband">
<div class="refresh">[pull to refresh goes here]
<div class="guts">
[page content goes here]

11. BOB’s Data
●
●
●
●
●
data caching - localStorage memcache style
geo located results lists - watchPosition, distance threshold
offline error handling
panel rendering/boot-straping panel data
JSON API

12. JSON/P API
JSON API, JSONP, or Data Bootstraping
JSON/P API
consumed by
BOB
wizardry &
magical
mashing
lucene .net
search service xml
zvents - event
search service xml
Clickability CMS
Data
http://m.jsonline.
com/api/v1/?
bust=y&custom=bl
_get_promotions&t
ype=JI.
BusinessListing&p
age_size=50&serv
icedebug=true&da
y=Wednesday&lati
tude=43.
042723795&longit
ude=-87.91450082
&sortByField=dista
nce&_=138557487
8454

13. http://youtu.be/Ov69uMrB20Q
Demo - Loading data, fading images, direct url entry points

14. Code snippet - Panel Rendering
listings:function(splat,queryString){//our route handler
var self = this;
var params = BOB.parseQueryString(queryString);
$.extend(params,BOB.currentPosition);
params.sortByField = "distance";
var collection = new BOB.ListingsCollection([],{params:params});
var view = new BOB.ListingsView({section:self.currentSection,collection:collection,state:self.currentState});
self.fetchCollectionAndRenderView(view,collection,params);
}
●
●
●
●
listen for route change
initialize route data - create view, collection, state
render panel shell
try cached data, render data OR try fetch data, render data on success

15. fetchCollectionAndRenderView:function(view,collection,params){//helper method
var self = this;
view.renderPanel();
var storeUrl = _.isFunction(collection.url) ? collection.url() : collection.url;
var resp = self.storageManager.get(storeUrl);
if(resp){
collection.reset(collection.parse(resp),{silent:true});
collection.updateDistances(params.latitude,params.longitude);
collection.sortByField(params.sortByField);
view.renderCollection();
self.transitionManager.show(view);
BOB.stash.add(collection.models,{silent:true});
}else{
self.transitionManager.show(view);
collection.fetch({cache:false,reset:false,silent:true,success:function(c,r,o){
if(c.length > 0){
c.updateDistances(params.latitude,params.longitude);
c.sortByField(params.sortByField);
self.storageManager.set(storeUrl,r);
c.trigger("reset");
}else{
c.trigger("collection:zeroresults");
}
BOB.stash.add(c.models,{silent:true});
},error:function(xhr, errorType, error){
collection.trigger("collection:error");
}});

16. More features...
●
●
●
●
code base refreshing & idle aware app
last page aware, persistent login, prepped for full offline abilities
debug tools
admin control panel for producers or customers

18. The Control Panel

21. Lessons learned...
● too much time spent on non
impactful features, not enough time
spent on important features
● API needs more data architecting
● feeling is important (design is more
than...)
● css bloats, deadlines & other
people

22. Looking forward - V2
Features:
●
●
●
●
●
re-skin - IOS7 style, flat theme, icon updates
update homepage layout
advanced map controls, search, personality through content
cms interface for updating/adding sections
facebook integration
Code:
●
●
●
●
UI performance improvements (make it even faster) - faster views, smoother transitions
build out debug tools
refactor & modularize codebase - reusable library for other markets
restructure router/controller/pub-sub [explain on whiteboard]