Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
Evolving Mobile Architectures
- 1. Evolving Mobile Architectures Stewart Gleadow http://stewgleadow.com @stewgleadow Martin Fowler http://martinfowler.com @martinfowler
- 2. Good products evolve over time http://www.flickr.com/photos/autohistorian/6902804230/
- 3. Remember the early days of 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 than a 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 UI Controls Overall UX
- 13. Controls Lowest Common 1. Use Native Denominator Not quite right 2. Mimic Uncanny Valley
- 14. Translated UI Controls Overall UX
- 15. Overall UX reuse UX
- 16. Translated UI Controls Overall UX
- 17. ? Cross Platform
- 18. ? Portable Platform Cross
- 19. Translated UI Frankenstein UI
- 20. Web App Portable Platform
- 21. ✗ Missing Features ✗ App Store ✗ Worse UX ✓ App Store ✗ Javascript
- 22. UX low cost
- 23. UX Hybrid low cost
- 24. UI Body Separated Presentation ✓ Focus ✓ Testing
- 25. Portability Easy Hard
- 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 stack native 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 or cover-your-bases in action?
- 34. What would we do differently?
- 35. Don’t lock yourself into doing everything natively or everything using the web and or
- 36. Sharing between platforms Shared logic using Javascript Shared presentation using HTML/CSS
- 37. User Interface Client Logic iPhone Objective C Objective C Mobile Web HTML / CSS Javascript
- 38. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS Javascript A bridge between native and web
- 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. 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 the client or server?
- 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. Implementing javascript logic Inside a UIWebView Use JavaScriptCore directly? [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];
- 44. User Interface Client Logic Calatrava Objective C Objective C HTML / CSS Javascript So 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 Retail Legacy 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 Backend Principles of REST Serving data and style Product-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. UI Integration Unit
- 53. UI Integration Kiwi Jasmine Unit
- 54. UI Kiwi RSpec Integration Kiwi Jasmine Unit
- 55. Frank (PublicAutomation) UI Zucchini Kiwi RSpec Integration Kiwi Jasmine Unit
- 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. UI Client Logic Acceptance 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 web and
- 62. Separate your presentation from your logic UI Body
- 63. The app is just the tip of the iceberg
- 64. Evolving Mobile Architectures Stewart Gleadow http://stewgleadow.com @stewgleadow Martin Fowler http://martinfowler.com @martinfowler