Best of Brew City (BOB)Mobile Web App - SPA, Backbone.js, Zepto.

js, HTML5, CSS3, JSON API

-Ezekiel Chentnik

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

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

1. conception/discovery2. time estimates, requirements, project approval3. project: 2 week sprints, daily standups (soft launch, hard launch)4. maintenance/v2

My role● Lead developer (full tech stack)● UI/UX guy● Manager, Teacher, Liaison

Bird’s Eye View of project

Performance

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

PerformanceGoal: make as fast as possibleAccomplished: 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)

Buttery Smooth UIGoal: make super fast feeling, with native like UIFeatures● ios style page transitions● pull to refresh● momentum scrolling w/ios document jumping

bug fixedTechniques:● curbing user expectations● hardware acceleration● memory management - lightweight views● panel rendering, active state

http://youtu.be/iPL5-9vWTLU

Demo - Pull to refresh, page transitions, momentum scrolling, overflow rubber-band effect

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]

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

JSON/P APIJSON API, JSONP, or Data Bootstraping

JSON/P APIconsumed by BOB

lucene .net search service - xml

zvents - event search service - xml

Clickability CMS Data

wizardry & magical mashing

http://m.jsonline.com/api/v1/?bust=y&custom=bl_get_promotions&type=JI.BusinessListing&page_size=50&servicedebug=true&day=Wednesday&latitude=43.042723795&longitude=-87.91450082&sortByField=distance&_=1385574878454

http://youtu.be/Ov69uMrB20Q

Demo - Loading data, fading images, direct url entry points

Code snippet - Panel Renderinglistings: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

fetchCollectionAndRenderView:function(view,collection,params){//helper methodvar 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");

}});}

}

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

The Control Panel

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

Looking forward - V2Features:

● 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]