What it takes to build great mobile web applications

deliriousattackInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

60 εμφανίσεις

What it takes to build
great mobile web
applications
Zach Legein @zlegein
Zach Lendon @zachlendon
Minnewebcon 2013
Monday, April 15, 13
Lead Developers at Virtuwell, a
HealthPartners-funded startup, founded in 2010
In 2012 we led the development for a Virtuwell mobile
website
Our Short Story
We are:
Full-stack developers
Who are:
Passionate about building great products, the right way
Monday, April 15, 13

Principles

Patterns

Design and Architecture

Implementation
Talk Overview
Monday, April 15, 13
Defining “Mobile Web
Apps”
Website delivered to a user through a web browser on a
handheld device - i.e., typically a tablet or phone
Monday, April 15, 13
Uncanny Valley
Monday, April 15, 13
Monday, April 15, 13
Good Mobile Web Apps
Monday, April 15, 13

Consistent, Intuitive, Elegant User Interface

App works flawlessly for the user

App performs amazingly for the user

App adds features yet gets simpler
Four Principles of Better
Mobile Web Apps
Monday, April 15, 13

Stand on the shoulders of “giants” - big and
small

Create a strong software design and
architecture to support your endeavors

Surround yourself with the people and
processes that can execute your vision

Be Daring

Leverage strong analytics to help you create
robust software that is performant
Patterns for Building
Better Mobile Web Apps
Monday, April 15, 13
The “New” 3-Tier Web Architecture
Presentation
Proxy
APIs
HTTP
HTTP
Logic
Gap
Monday, April 15, 13
Virtuwell “New” 3-Tier Web Architecture
Jasmine/
Testem
Proxy
APIs
HTTP
HTTP
Grails
Dust.js
(Templating)
Backbone.js
 Plugins
Monday, April 15, 13
Presentation
Monday, April 15, 13
Giant: JQuery Mobile
Monday, April 15, 13
JQuery Mobile

Leading Mobile Framework
A mobile framework involves a combination of Javascript, CSS,
and other assets that aid in the styling of the mobile experience
Monday, April 15, 13
JQuery Mobile
Mobile First UI Tools built to work responsively
across most web browsers regardless of device
Monday, April 15, 13
Using JQuery Mobile “Alone”

Typically leveraging JQuery so not really alone

Much of what other “frameworks” provide can
indeed be “hand-rolled”

And if you’re a good developer, and have a
unique business case, perhaps it can be done
better
Monday, April 15, 13
Using JQuery Mobile
“Alone” (cont)

Other frameworks/libraries (typically /
hopefully) exist to solve a problem many people
have

If it solves a problem (or problems) you are
having or foresee having, consider using that
framework or library

Often, but not always, using those frameworks
or libraries will help us leverage patterns that are
either proven or have strong evidence to support
them
Monday, April 15, 13
Mobile
JQuery
Sencha
Architecture
Patterns
sub)
Patterns (pub/
Communicatin
browser
storage
persistent
Cross-
& Optimization
Build Process
Feature
HTML5/CSS3
Detection
Management
Browser State
Widgets
Widgets
Using JQuery Mobile
“Alone” (cont)
Monday, April 15, 13
Why Software Design Matters
Good
Bad
More maintainable
Increases reusability
Testable
Better Performance
Changes cause bugs
Tedious to add features
Hard to test
Code Repetition
Monday, April 15, 13
e.stockCheck  function (b, c, d) {
d &&
(h  a(".ui-page-active local_store").val(), h ! "" && e.setStore(h));
var h  a(".ui-page-active local_store :selected").val();
h ! "" && (a(".ui-page-active div.ikea-stockcheck-result").remove(), a(".ui-page-active div.ikea-stockcheck-loading").css({
display: "block"
}), a(".ui-page-active div.ikea-initial-stockcheck-unavailable").css({
display: "none"
}), a.ajax({
type: "GET",
url: a.mobile.baseStockUrl,
data: {
storeCode: h,
itemType: b,
itemNo: c,
change: d
},
cache: !1,
dataType: "text",
timeout: 45E3,
error: function () {
a(".ui-page-active div.ikea-stockcheck-loading").css({
display: "none"
});
a(".ui-page-active div.ikea-initial-stockcheck-unavailable").css({
display: "block"
});
a(".buttonTemplateInner").removeClass("loading");
a(".ui-page-active div.ikea-stockcheck-result").remove();
a(".ui-page-active .ui-listview").listview("refresh")
},
success: function (d) {
a(".ui-page-active div.ikea-stockcheck-loading").css({
display: "none"
});
a(".ui-page-active stockCheckInfoInner").html(d).trigger("create");
a(".ui-page-active stockCheckInfoInner").find(".refreshButton2").click(function () {
e.refreshStockCheck(b,
c, !1)
});
a(".ui-page-active .ui-listview").listview("refresh")
}
}))
};
Values from DOM instead of
of Models
Update view via DOM manipulation
and css
Chained with ajax call for instock info
Good: most of needed data was
passed into function, hopefuly from
model and not DOM retrieval
Bad: No separation of concerns. Not
testable or modular.
More DOM manipulation via CSS and
javascript. Extremely hard-coded dom
references, including .ui-page-active
JQuery references repeatedly
Monday, April 15, 13
Mobile
JQuery
Patterns
Architecture
Patterns (pub/
sub)
Communicatin
browser
Cross-
persistent
storage
& Optimization
Build Process
HTML5/CSS3
Detection
Feature
Browser State
Management
Backbone
Angular
Ember
Knockout.js
Thorax
Roll Your Own
Rendr
Spine.js
Backbone.Marionette
Widgets
Chaplin
Store.js
Intro.js
HeadJS
hood.ie
Monday, April 15, 13
What the presentation
“frameworks” we chose provided us
JQuery Mobile
UI widgets, responsive design
Backbone.js
Structure (MV*), Pub/Sub
Communication handling
Dust.js
Separation of HTML from
Javascript, an approach for
melding JSON and HTML
Jasmine
Unit test coverage
Monday, April 15, 13
What your presentation
“frameworks” could provide you
Sencha
UI widgets, structure, pub/
sub, cross-browser persistent
storage, HTML5 feature
detection, browser state
management, Structure
(MV*), and more
Siesta
Unit test coverage
Monday, April 15, 13
What your hipster presentation
“frameworks” could provide you
JQuery Mobile
Responsive UI Tools
Coffeescript
cleaner syntax, ?better?
javascript
Angular.js
pub/sub communication,
Structure (MV*), 2-way data
binding, and more
Mocha
Unit test coverage
Monday, April 15, 13
APIs
Monday, April 15, 13
APIs are the essential glue
Apps
Packaged
Packaged
Apps
Apps
Packaged
APIs
PaaS Powered
Mobile-Enabled
Self Service
Modern IT
Socially Integrated
Monday, April 15, 13
DO
DON’T
REST
SOAP
RETURN JSON
RETURN XML / HTML
In regards to API Design
Monday, April 15, 13
REST BASICS
GET /items
Find all items
200 (OK)
POST /items
Create new items
201 (Created)
GET /items/123
Find Item 123
200 (OK)
PUT /items/123
Update item 123
200 (OK)
DELETE /items/123
Delete Item 123
200 (No
Content)
Monday, April 15, 13
Document
Monday, April 15, 13
Status
[status.your-api.com]

https://status.twilio.com

https://developers.facebook.com/
live_status
Monday, April 15, 13
Provide Clear Errors
Statuses
400 Bad Request
401 Unauthorized
404 Not Found
405 Method Not Allowed
409 Conflict
410 Gone
500 Internal Server Error
503 Service Unavailable
Messages
“error”: {
“status”: “401”,
“type”: “invalid_request_error”,
“message”: “You did not provide
an API key in your Authorization
header...”
}
Monday, April 15, 13
Other Considerations

Pagination (current page, offset, last offset)

Caching headers

Rate limits

Versioning

Security

HTTPS

CORS/JSON-P (enable-cors.org)

And Many More...
Monday, April 15, 13
Proxy
Monday, April 15, 13
Actions of Proxy Layer

Orchestrate Service Calls

It may make more sense for the presentation
layer to call an API that acts as a proxy to other
APIs

Perform business logic that makes more sense
on the server

Help enforce security

Help tailor responses between what APIs
respond with and what client needs
Monday, April 15, 13
Other Considerations

Technologies: Rails, Node, PHP, Java, Grails -
Options really run the gamut

Team: what can you use to iterate with quickly
and create robust solutions with?
Monday, April 15, 13
Monday, April 15, 13

Assemble the players

Don’t overload the size of the team

Isolate team members from external tasks
Monday, April 15, 13
Monday, April 15, 13

Collaborate

Iterate

Refactor
Monday, April 15, 13
Monday, April 15, 13
"It is professionally irresponsible to write code
without tests" - Neal Ford
Monday, April 15, 13

The code base is shifting, your tests need
to as well

Introduce black box testing

Setup a continuous integration
environment
Monday, April 15, 13
Logging, simple we do it really well on the server side, not very well for client side.
We need this feedback for the ux, when
trade off between getting that feedback vs performance
flow how logging helps find a solution
Monday, April 15, 13
Monday, April 15, 13
Hey, someone called and
said their Windows 8 phone
doesn’t work with our site, can you
fix that?
Did they mention what the
problem was?
Monday, April 15, 13
Um, No.
Fun!
Monday, April 15, 13
Monday, April 15, 13
“Adding half a second to a search
results page can decrease traffic and
ad revenues by 20 percent”
“Amazon found that every additional
100
milliseconds
of load time decreased
sales by 1 percent”
“Users expect pages to load in two
seconds—and after three seconds,
up to 40 percent will simply leave.”
http://alistapart.com/article/improving-ux-through-front-end-performance
Monday, April 15, 13

Mobile devices have energy saving states
that may add 1-2 seconds to web browsing

Mobile devices rarely get the maximum
speeds of the network
http://goo.gl/n4RD8
Monday, April 15, 13
The Speed Index is the average time at which
visible parts of the page are displayed.
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
Monday, April 15, 13
Monday, April 15, 13
http://webpagetest.org
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13

http://browserdiet.com

http://developers.google.com/speed/
pagespeed/

http://httparchive.org/

http://goo.gl/cd2tk
Performance Resources
Monday, April 15, 13
Additional Resources


https://github.com/zlegein/jslogger

https://saucelabs.com/

https://www.optimizely.com/
Monday, April 15, 13
Monday, April 15, 13
Thank You
Zach Legein zlegein
Zach Lendon zachlendon
Monday, April 15, 13