Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Evolving Mobile Architectures    Stewart Gleadow                  http://stewgleadow.com                  @stewgleadow    ...
Good products evolve over timehttp://www.flickr.com/photos/autohistorian/6902804230/
Remember the early daysof the web?http://www.icehousedesigns.com/webarchive/images/flshbk_COLLAGE2.gif
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
All Native             ✓ Easy to Begin             ✓   Good UX
There is nothing worse thana 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
Translated UIControls   Overall UX
Controls                       Lowest Common1. Use Native            Denominator                      Not quite right2. Mi...
Translated UIControls   Overall UX
Overall UXreuse UX
Translated UIControls   Overall UX
?    Cross Platform
?    Portable Platform       Cross
Translated UIFrankenstein UI
Web AppPortable Platform
✗ Missing Features ✗ App Store✗ Worse UX        ✓ App Store✗ Javascript
UX     low cost
UXHybrid              low cost
UI        Body        Separated Presentation✓   Focus            ✓   Testing
Portability                     EasyHard
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
rich experience        cost  native feel      time to market  responsive      technology stacknative features    cross pla...
rich experience                  platform coverage
rich experience           Laser                   platform coverage
rich experience    Cover your bases                       platform coverage
Native or web?
Instagram                Jump-in                      The Guardian   Democracy Now!     NATIVE                        HYBR...
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 weband or
Sharing between platformsShared logic using JavascriptShared presentation using HTML/CSS
User Interface   Client Logic iPhone        Objective C     Objective CMobile Web               HTML / CSS       Javascript
User Interface                  Client Logic                           Calatrava         Objective C                    Ob...
CalatravaTechnology choice per featureMore an approach than a frameworkWill soon be open sourcehttp://en.wikipedia.org/wik...
Populating web views from templates: GRMoustache<div class="person">  <span class=”name”>{{name}}</span> {{#address}}   <d...
Populating web views from templates: GRMoustache     NSDictionary *person = @{ @"name": @"Stew", @"address": @"Melbourne" ...
Signal when the UIWebView has loaded<body onload="window.location = myapp://ready">- (BOOL)webView:(UIWebView *)webViewsho...
Implementing javascript logicInside a UIWebViewUse JavaScriptCore directly?   [webView stringByEvaluatingJavaScriptFromStr...
User Interface                              Client Logic                                Calatrava          Objective C    ...
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
Apps are just the                                 tip of the iceberg    Call Centre                   RetailLegacy Thing  ...
App   Backend
App   API   Backend
How do we build simpler apps                                    and smarter backends?     App                 API         ...
Forcing logic to the server                                                     What if you could only use NSDictionary   ...
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
UIIntegration   Unit
UI                 IntegrationKiwi   Jasmine      Unit
UI   Kiwi   RSpec     IntegrationKiwi      Jasmine      Unit
Frank (PublicAutomation)   UI       Zucchini   Kiwi    RSpec             IntegrationKiwi       Jasmine                 Unit
business-level     platform-specificrequirements           mapping               UI   client logic                        ...
UI        Client LogicAcceptance                                 Shared Logic  Tests  Full-Stack and Subcutaneous Testing
›❯   Apps for multiple mobile platforms›❯   Evolving hybrid architectures›❯   Mobile backend systems›❯   Testing hybrid ap...
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 weband
Separate your presentation                from your logicUI     Body
The app is just thetip of the iceberg
Evolving Mobile Architectures    Stewart Gleadow                  http://stewgleadow.com                  @stewgleadow    ...
Evolving Mobile Architectures
Evolving Mobile Architectures
Evolving Mobile Architectures
Upcoming SlideShare
Loading in …5
×

Evolving Mobile Architectures

2,211 views

Published on

A talk that Martin Fowler and I gave at the Swipe iOS conference in Sydney, September 2012

Published in: Technology
  • Be the first to comment

Evolving Mobile Architectures

  1. 1. Evolving Mobile Architectures Stewart Gleadow http://stewgleadow.com @stewgleadow Martin Fowler http://martinfowler.com @martinfowler
  2. 2. Good products evolve over timehttp://www.flickr.com/photos/autohistorian/6902804230/
  3. 3. Remember the early daysof the web?http://www.icehousedesigns.com/webarchive/images/flshbk_COLLAGE2.gif
  4. 4. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  5. 5. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  6. 6. All Native ✓ Easy to Begin ✓ Good UX
  7. 7. There is nothing worse thana good mobile application invest in UX reuse UX
  8. 8. All Native ✓ Easy to Begin ✓ Good UX ✘ Expensive
  9. 9. Cross Platform ✘ Slightly worse UX ✓ Low cost
  10. 10. Cross Platform ✘ Slightly worse UX ✓ Low cost Write Once Run Anywhere
  11. 11. Translated UI
  12. 12. Translated UIControls Overall UX
  13. 13. Controls Lowest Common1. Use Native Denominator Not quite right2. Mimic Uncanny Valley
  14. 14. Translated UIControls Overall UX
  15. 15. Overall UXreuse UX
  16. 16. Translated UIControls Overall UX
  17. 17. ? Cross Platform
  18. 18. ? Portable Platform Cross
  19. 19. Translated UIFrankenstein UI
  20. 20. Web AppPortable Platform
  21. 21. ✗ Missing Features ✗ App Store✗ Worse UX ✓ App Store✗ Javascript
  22. 22. UX low cost
  23. 23. UXHybrid low cost
  24. 24. UI Body Separated Presentation✓ Focus ✓ Testing
  25. 25. Portability EasyHard
  26. 26. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  27. 27. rich experience cost native feel time to market responsive technology stacknative features cross platform being being awesome realistic
  28. 28. rich experience platform coverage
  29. 29. rich experience Laser platform coverage
  30. 30. rich experience Cover your bases platform coverage
  31. 31. Native or web?
  32. 32. Instagram Jump-in The Guardian Democracy Now! NATIVE HYBRID WEB LinkedIn Facebook BBC Olympics using PhoneGap
  33. 33. Victory for native orcover-your-bases in action?
  34. 34. What would we do differently?
  35. 35. Don’t lock yourself into doing everything natively or everything using the weband or
  36. 36. Sharing between platformsShared logic using JavascriptShared presentation using HTML/CSS
  37. 37. User Interface Client Logic iPhone Objective C Objective CMobile Web HTML / CSS Javascript
  38. 38. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS JavascriptA bridge between native and web
  39. 39. CalatravaTechnology choice per featureMore an approach than a frameworkWill soon be open sourcehttp://en.wikipedia.org/wiki/Puente_del_Alamillo
  40. 40. 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>
  41. 41. 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 theclient or server?
  42. 42. Signal when the UIWebView has loaded<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"]) { // Were done, you can display the content now return NO; } ...}
  43. 43. Implementing javascript logicInside a UIWebViewUse JavaScriptCore directly? [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
  44. 44. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS JavascriptSo were is this kind of architecture well suited?
  45. 45. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  46. 46. Apps are just the tip of the iceberg Call Centre RetailLegacy Thing Message Hub Database Mainframe Some expensive and proprietary system
  47. 47. App Backend
  48. 48. App API Backend
  49. 49. How do we build simpler apps and smarter backends? App API BackendPrinciples of RESTServing data and styleProduct-aligned teams
  50. 50. Forcing logic to the server What if you could only use NSDictionary objects for your domain model?http://www.flickr.com/photos/jakecaptive/3205277810
  51. 51. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  52. 52. UIIntegration Unit
  53. 53. UI IntegrationKiwi Jasmine Unit
  54. 54. UI Kiwi RSpec IntegrationKiwi Jasmine Unit
  55. 55. Frank (PublicAutomation) UI Zucchini Kiwi RSpec IntegrationKiwi Jasmine Unit
  56. 56. business-level platform-specificrequirements mapping UI client logic e.g. Frank e.g. Business-level Shared business Native- specs logic Driver e.g. Web- Driver Testing
  57. 57. UI Client LogicAcceptance Shared Logic Tests Full-Stack and Subcutaneous Testing
  58. 58. ›❯ Apps for multiple mobile platforms›❯ Evolving hybrid architectures›❯ Mobile backend systems›❯ Testing hybrid applications
  59. 59. Try out your approach,use short iterations,measure and learn.
  60. 60. UX low cost
  61. 61. Don’t lock yourself into doing everything natively or everything using the weband
  62. 62. Separate your presentation from your logicUI Body
  63. 63. The app is just thetip of the iceberg
  64. 64. Evolving Mobile Architectures Stewart Gleadow http://stewgleadow.com @stewgleadow Martin Fowler http://martinfowler.com @martinfowler

×