Evolving Mobile Architectures

1,952 views
1,877 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,952
On SlideShare
0
From Embeds
0
Number of Embeds
836
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×