evolving mobile architectures
DESCRIPTION
A talk that Martin Fowler and I gave at the Swipe iOS conference in Sydney, September 2012TRANSCRIPT
Evolving Mobile Architectures Stewart Gleadow
http://stewgleadow.com@stewgleadow
Martin Fowlerhttp://martinfowler.com@martinfowler
http://www.flickr.com/photos/autohistorian/6902804230/
Good products evolve over time
http://www.icehousedesigns.com/webarchive/images/flshbk_COLLAGE2.gif
Remember the early days of the web?
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
✓ Easy to Begin
✓ Good UX
All Native
invest in UX
reuse UX
There is nothing worse than a good mobile application
✓ Easy to Begin
✓ Good UX
✘ Expensive
All Native
✘ Slightly worse UX
✓ Low cost
Cross Platform
Write Once Run Anywhere
Cross Platform
✘ Slightly worse UX
✓ Low cost
Translated UI
Controls Overall UX
Translated UI
Use Native
Mimic
Lowest Common Denominator
Not quite right
Uncanny Valley
Controls
1.
2.
Controls Overall UX
Translated UI
Overall UX
reuse UX
Translated UI
Controls Overall UX
?Cross Platform
?Cross PlatformPortable
Translated UI
Frankenstein UI
Portable Platform
Web App
✗ Worse UX
✗ Missing Features ✗ App Store
✓ App Store
✗ Javascript
UX
low cost
UX
low cost
Hybrid
Separated Presentation
UI Body
✓ Focus ✓ Testing
Portability
HardEasy
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
rich experience
responsive
native feel
native features cross platform
technology stack
time to market
cost
being awesome
being realistic
platform coverage
rich experience
platform coverage
rich experience
Laser
platform coverage
rich experience
Cover your bases
Native or web?
using PhoneGap
The Guardian
NATIVE HYBRID WEB
Democracy Now!
BBC OlympicsFacebookLinkedIn
Instagram Jump-in
Victory for native orcover-your-bases in action?
What would we do differently?
Don’t lock yourself into doing everything natively or
everything using the web
andor
Shared presentation using HTML/CSS
Shared logic using Javascript
Sharing between platforms
Objective C Objective C
HTML / CSS Javascript
User Interface Client Logic
iPhone
Mobile Web
Cal
atra
vaObjective C Objective C
HTML / CSS Javascript
User Interface Client Logic
A bridge between native and web
More an approach than a framework
Technology choice per feature
Will soon be open source
Calatrava
http://en.wikipedia.org/wiki/Puente_del_Alamillo
Populating web views from templates: GRMoustache
<div class="person"> <span class=”name”>{{name}}</span>
{{#address}} <div class="address"> {{.}} </div> {{/address}}
... and all the other stuff
</div>
Populating web views from templates: GRMoustache
Should we populate templates on the client or server?
NSDictionary *person = @{ @"name": @"Stew", @"address": @"Melbourne" }; GRMustacheTemplate *template = ...;NSString *renderedContent = [template renderObject:person]; [webView loadHTMLString:renderedContent baseURL:...];
<body onload="window.location = 'myapp://ready'">
- (BOOL)webView:(UIWebView *)webViewshouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ([request.URL.scheme isEqualToString:@"myapp"] && [request.URL.host isEqualToString:@"ready"]) { // We're done, you can display the content now return NO; } ...}
Signal when the UIWebView has loaded
[webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
Implementing javascript logic
Inside a UIWebView
Use JavaScriptCore directly?
Cal
atra
vaObjective C Objective C
HTML / CSS Javascript
User Interface Client Logic
So were is this kind of architecture well suited?
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
Some expensive and proprietary system
MainframeDatabase
Message Hub
RetailCall Centre
Legacy Thing
Apps are just the tip of the iceberg
App Backend
App BackendAPI
APIApp Backend
How do we build simpler apps and smarter backends?
Product-aligned teams
Principles of REST
Serving data and style
http://www.flickr.com/photos/jakecaptive/3205277810
Forcing logic to the server
What if you could only use NSDictionary objects for your domain model?
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
Unit
Integration
UI
Unit
Integration
UI
Kiwi Jasmine
Unit
Integration
UI
Kiwi
Kiwi RSpec
Jasmine
Unit
Integration
UI
Kiwi
Kiwi RSpec
Zucchini
Jasmine
Frank (PublicAutomation)
Testing
Shared business logic
platform-specificmapping
e.g. Frank
e.g. Native-Driver
e.g.Web-Driver
business-levelrequirements client logicUI
Business-levelspecs
Full-Stack and Subcutaneous Testing
Shared LogicAcceptance
Tests
Client LogicUI
Apps for multiple mobile platforms
Evolving hybrid architectures
Mobile backend systems
Testing hybrid applications
›❯
›❯
›❯
›❯
Try out your approach, use short iterations, measure and learn.
UX
low cost
Don’t lock yourself into doing everything natively or
everything using the web
and
UI Body
Separate your presentation from your logic
The app is just the tip of the iceberg
Stewart Gleadowhttp://stewgleadow.com@stewgleadow
Martin Fowlerhttp://martinfowler.com@martinfowler
Evolving Mobile Architectures
