Evolving Mobile Architectures and Testing Hybrid Apps

Evolving Mobile
Architectures Stewart Gleadow
http://stewgleadow.com
@stewgleadow

Martin Fowler
http://martinfowler.com
@martinfowler

Good products evolve over time

http://www.ﬂickr.com/photos/autohistorian/6902804230/

Remember the early days
of the web?

http://www.icehousedesigns.com/webarchive/images/ﬂshbk_COLLAGE2.gif

›❯ Apps for multiple mobile platforms

›❯ Evolving hybrid architectures

›❯ Mobile backend systems

›❯ Testing hybrid applications

All Native

✓ Easy to Begin
✓ Good UX

There is nothing worse than
a good mobile application

invest in UX

reuse UX

All Native

✓ Easy to Begin
✓ Good UX

✘ Expensive

Cross Platform

✘ Slightly worse UX
✓ Low cost

Cross Platform

✘ Slightly worse UX
✓ Low cost

Write Once Run Anywhere

Translated UI

Controls Overall UX

Controls

Lowest Common
1. Use Native Denominator

Not quite right
2. Mimic

Uncanny Valley

?
Portable Platform
Cross

Translated UI

Frankenstein UI

✗ Missing Features ✗ App Store
✗ Worse UX ✓ App Store
✗ Javascript

UX

Hybrid

low cost

UI Body

Separated Presentation

✓ Focus ✓ Testing

Portability

Easy
Hard

rich experience cost
native feel time to market
responsive technology stack
native features cross platform

being being
awesome realistic

rich experience

platform coverage

rich experience

Laser

platform coverage

rich experience

Cover your bases

platform coverage

Instagram Jump-in The Guardian Democracy Now!

NATIVE HYBRID WEB

LinkedIn Facebook BBC Olympics

using PhoneGap

Victory for native or
cover-your-bases in action?

What would we do diﬀerently?

Don’t lock yourself into doing
everything natively or
everything using the web

and
or

Sharing between platforms

Shared logic using Javascript
Shared presentation using HTML/CSS

User Interface Client Logic

iPhone Objective C Objective C

Mobile Web
HTML / CSS Javascript


Calatrava
Objective C Objective C


A bridge between native and web

Calatrava

Technology choice per feature
More an approach than a framework
Will soon be open source
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

NSDictionary *person = @{ @"name": @"Stew", @"address": @"Melbourne" };

GRMustacheTemplate *template = ...;
NSString *renderedContent = [template renderObject:person];

[webView loadHTMLString:renderedContent baseURL:...];

Should we populate templates on the
client or server?

Signal when the UIWebView has loaded

<body onload="window.location = 'myapp://ready'">

- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(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;
}

...
}

Implementing javascript logic

Inside a UIWebView

Use JavaScriptCore directly?

[webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];


Calatrava
Objective C Objective C


So were is this kind of architecture well suited?

Apps are just the
tip of the iceberg
Call Centre Retail

Legacy Thing Message Hub

Database Mainframe

Some expensive and proprietary system

How do we build simpler apps
and smarter backends?

App API Backend

Principles of REST

Serving data and style

Product-aligned teams

Forcing logic to the server

What if you could only use NSDictionary
objects for your domain model?

http://www.ﬂickr.com/photos/jakecaptive/3205277810

UI

Integration

Kiwi Jasmine Unit

UI

Kiwi RSpec Integration

Kiwi Jasmine Unit

Frank (PublicAutomation) UI
Zucchini

Kiwi RSpec Integration

Kiwi Jasmine Unit

business-level platform-specific
requirements mapping UI client logic

e.g.
Frank

e.g.
Business-level Shared business
Native-
specs logic
Driver

e.g.
Web-
Driver

Testing

UI Client Logic

Acceptance
Shared Logic
Tests

Full-Stack and Subcutaneous Testing

Try out your approach,
use short iterations,
measure and learn.

Don’t lock yourself into doing
everything natively or
everything using the web

and

Separate your presentation
from your logic

UI Body

The app is just the
tip of the iceberg

Evolving Mobile Architectures and Testing Hybrid Apps

Evolving Mobile Architectures and Testing Hybrid Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Evolving Mobile Architectures and Testing Hybrid Apps

Similar to Evolving Mobile Architectures and Testing Hybrid Apps (20)

More from sgleadow

More from sgleadow (12)

Recently uploaded

Recently uploaded (20)

Evolving Mobile Architectures and Testing Hybrid Apps