• Like
Evolving Mobile Architectures
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Evolving Mobile Architectures

  • 1,426 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,426
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
30
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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