1. Shaping a Technology Strategy
for Mobile Development
ALEX CONCONI
© 2013 frog - All rights reserved

2. Alex Conconi
Associate Technology Director
alex.conconi@frogdesign.com
@aconconi

3. Background

4. “The web is
dead.
Apps are the
present and
the future.”
Keith Teare, MBLT 2013

5. “We provide our customers
with native applications on
several platforms to access
our online services.
Managing all those native
apps is a real nightmare…”

7. “The biggest
mistake we made
as a company was
betting too much
on HTML5 as
opposed to native”
Mark Zuckerberg, 11 Sept. 2012

8. “...the very next day
my boss called and
asked me:
«Are you sure we
are not making the
same mistake with
this HTML5?»”

9. Mobile device system model
Technology background
Hardware
CPU, Memory, I/O devices (storage, network,
phone, screen, audio, GPS, accelerometer,…)
Operating System
Kernel, Device drivers, Services, Shell
App X App Y Browser
API
9© 2013 frog - All rights reserved – Confidential and Proprietary

10. Technology background
10© 2013 frog - All rights reserved – Confidential and Proprietary

11. From web to native:
the shades in between

12. Mobile website

13. Three approaches to
mobile website creation
1. Responsive design
2. Dedicated m-site
3. RESS (Responsive Web Design +
Server Side Components)
13
Mobile website
© 2013 frog - All rights reserved – Confidential and Proprietary

14. 14
Responsive design
Responsive Design
A unified client-side solution that dynamically
adapts content and layout to device features

15. 15
Dedicated mobile site
Mobile site dedicato
Typical m-site fully optimized for mobile devices in
terms of layout, content and features

16. 16
RESS
RESS (Responsive Server Side)
REsponsive web design + Server Side components uses
server-side logic and user detection to assemble and serve a
version of the web page optimized for the client device

17. Mobile site features
Mobile website
Technology Mixes client-side (HTML, CSS, JavaScript) and server-side (PHP,
Ruby, .Net, Java etc.) technologies
Dependency Platform-independent (runs in any modern browser)
Connectivity Online only
Device features No access (or limited access if HTML5 browser API is available)
Distribution Web
17© 2013 frog - All rights reserved – Confidential and Proprietary

18. Web app

21. Web app features
Web app
Technology Open standard web technologies (HTML5, CSS3, JavaScript) with
application logic moved to client side
Dependency Platform-independent (runs in any modern browser)
Connectivity Mostly online (partial offline support)
Device features Limited access (through HTML5 browser API)
Distribution Web
21© 2013 frog - All rights reserved – Confidential and Proprietary

22. Hybrid apps

23. Hybrid app
23© 2013 frog - All rights reserved – Confidential and Proprietary

24. Hybrid app
24© 2013 frog - All rights reserved – Confidential and Proprietary

25. Hybrid app

26. Hybrid app

27. 27
Hybrid app
http://vimeo.com/55486684
© 2013 frog - All rights reserved – Confidential and Proprietary

28. Hybrid app features
Hybrid app
Technology Open standard web technologies (HTML5, CSS3, JavaScript)
+ abstract OS integration API
Dependency Cross-platform (can be ported to most target platforms)
Connectivity Online and offline
Device features Almost complete access (through integration layer)
Distribution App store
28© 2013 frog - All rights reserved – Confidential and Proprietary

29. Cross-compiling SDK

30. Appcelerator Titanium
Cross-compiling SDK
30© 2013 frog - All rights reserved – Confidential and Proprietary

31. Cross-compiling SDK
31© 2013 frog - All rights reserved – Confidential and Proprietary

32. MoSync
Cross-compiling SDK
32© 2013 frog - All rights reserved – Confidential and Proprietary

33. Cross-compiling SDK features
Cross-compiling SDK
Technology Custom API and language depending on selected SDK
(e.g. Appcelerator Titanium: JavaScript, MoSync: C/C++)
Dependency Cross-platform (can be ported to most target platforms)
Connectivity Online and offline
Device features Almost complete access (through integration layer)
Fully native UI elements
Distribution App store
33© 2013 frog - All rights reserved – Confidential and Proprietary

34. Native app

35. Native app
35
…???
© 2013 frog - All rights reserved – Confidential and Proprietary

38. Native app features
Native app
Technology Specific for each platform (e.g. Android: Java, iOS: Objective-C)
Dependency Fully platform-dependent
Connectivity Online and offline
Device features Complete access (through individual OS API)
Fully native UI elements
Distribution App store
38© 2013 frog - All rights reserved – Confidential and Proprietary

39. Decision criteria

40. Functionality
Decision criteria
1
Business model2
Context3
40© 2013 frog - All rights reserved – Confidential and Proprietary

41. Decision criteria
41© 2013 frog - All rights reserved – Confidential and Proprietary

42. There’s no “multi-platform
solution to rule them all” really

43. © 2013 frog - All rights reserved – Confidential and Proprietary