Successfully reported this slideshow.

Evolving Mobile Architectures

1

Share

Loading in …3
×
1 of 67
1 of 67

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 time http://www.flickr.com/photos/autohistorian/6902804230/
  3. 3. Remember the early days of 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 than a 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 UI Controls Overall UX
  13. 13. Controls Lowest Common 1. Use Native Denominator Not quite right 2. Mimic Uncanny Valley
  14. 14. Translated UI Controls Overall UX
  15. 15. Overall UX reuse UX
  16. 16. Translated UI Controls Overall UX
  17. 17. ? Cross Platform
  18. 18. ? Portable Platform Cross
  19. 19. Translated UI Frankenstein UI
  20. 20. Web App Portable Platform
  21. 21. ✗ Missing Features ✗ App Store ✗ Worse UX ✓ App Store ✗ Javascript
  22. 22. UX low cost
  23. 23. UX Hybrid low cost
  24. 24. UI Body Separated Presentation ✓ Focus ✓ Testing
  25. 25. Portability Easy Hard
  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 stack native 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 or cover-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 web and or
  36. 36. Sharing between platforms Shared logic using Javascript Shared presentation using HTML/CSS
  37. 37. User Interface Client Logic iPhone Objective C Objective C Mobile Web HTML / CSS Javascript
  38. 38. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS Javascript A bridge between native and web
  39. 39. Calatrava Technology choice per feature More an approach than a framework Will soon be open source http://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 the client or server?
  42. 42. 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; } ... }
  43. 43. Implementing javascript logic Inside a UIWebView Use JavaScriptCore directly? [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
  44. 44. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS Javascript So 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 Retail Legacy 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 Backend Principles of REST Serving data and style Product-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. UI Integration Unit
  53. 53. UI Integration Kiwi Jasmine Unit
  54. 54. UI Kiwi RSpec Integration Kiwi Jasmine Unit
  55. 55. Frank (PublicAutomation) UI Zucchini Kiwi RSpec Integration Kiwi Jasmine Unit
  56. 56. 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
  57. 57. UI Client Logic Acceptance 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 web and
  62. 62. Separate your presentation from your logic UI Body
  63. 63. The app is just the tip of the iceberg
  64. 64. Evolving Mobile Architectures Stewart Gleadow http://stewgleadow.com @stewgleadow Martin Fowler http://martinfowler.com @martinfowler

×