Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile App Development Options for Web Developers

Mobile App Development Options for Web Developers

My talk from Peers Conf 2015


Andrey Butov

April 14, 2015


  1. Mobile app development options for web developers. Andrey Butov @andrey_butov

  2. None
  3. Building mobile apps in-house. Subcontracting out mobile app development. •

    Mobile web apps, hybrid apps, native apps. • Selected frameworks and technologies. • What to expect in terms of cost. • Rules of thumb and things to watch out for.
  4. Andrey Butov • Writing code since the early ‘90s. •

    Academic background: MS, Computer Science • antair.com since 2005 • andreybutov.com (@andrey_butov) • bootstrapped.fm (discuss.bootstrapped.fm)
  5. None
  6. Revenue, 2005 - 2008

  7. None
  8. “Nah. This iPhone thing is a fad. Let’s just keep

    making stuff for the Blackberry.”
  9. :(

  10. None
  11. None
  12. None
  13. scribbleton.com

  14. Development options for mobile apps • Mobile web apps •

    Hybrid apps • Native apps
  15. Mobile web apps. The good. • Typically, a lower cost

    of development as compared with native. • Take advantage of an existing skill set. • Typically, a single codebase. • Use whatever technology you prefer.
  16. • Not affected by app store review cycles. • Not

    affected by app store customer ratings. • Monetization benefits. • Not affected by arbitrary app store guidelines. Mobile web apps. The good.
  17. Mobile web apps. The bad. • Slower than other options.

    • No app store placement. • Home screen icon? • No native controls or behaviors.
  18. forecast.io

  19. • No native push notifications. • No in-app purchases. •

    No background processing. Mobile web apps. The bad.
  20. • Geolocation - available on iOS & Android. • Offline

    support - available on iOS & Android. • Motion sensors - available on iOS and Android. • Camera access - available for iOS and Android. • mobilehtml5.org Mobile web apps.
  21. Hybrid mobile apps • Common definition - a JavaScript driven,

    CSS styled, HTML5 web app, rendered in a web view that runs inside a native application. • What about native apps built using “non-native” technology, that don’t run inside a web view? • ActionScript (Adobe AIR) • C# (Xamarin) • Java (RoboVM) • C++ (Qt) • Ruby (RubyMotion)
  22. What do we want from a hybrid app? • Cost

    of development on par to a mobile web app, or, at least, cheaper than native. • Some form of code reusability. Ideally, one codebase targeting both iOS and Android. • Little or no compromise when it comes to access to native functionality. (i.e. push notifications) • Better performance? Maybe? Hopefully. • Access to the app store.
  23. None
  24. cordova.apache.org

  25. Apache Cordova • JavaScript, HTML, and CSS, with native plugins.

    • iOS, Android, BlackBerry, Windows Phone, and others. • The Cordova web view can run the entire UI, or just parts of it inside a larger native app. • No mandatory underlying web framework - use whatever you like. • No UI controls or styles - just the runtime.
  26. Cordova - setup • Install iOS SDK, Android SDK, etc.

    • Install Node.js • npm install -g cordova • cordova create myapp com.example.myapp MyApp • cd myapp ; cordova platform add ios android
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. ionicframework.com

  40. Ionic • Built on top of Cordova. • HTML5, JS,

    CSS (Sass), with native plugins. • The goal is to provide optimized UI components for a more “native-feeling” app, and a broader set of generic plugins. • AngularJS
  41. None
  42. None
  43. • Side menus that slide open and close on swipe.

    • Navigation with transition animations. • Gestures like on-tap, on-swipe, on-drag, etc. • Prevent keyboard from obscuring input fields. • Removal of the 300ms input delay. Ionic
  44. • Live reload of running code. • Icon & splash

    screen generation. • Back-end services like push. • Ionic View Ionic - tools
  45. Ionic - setup • Install Android/iOS platform dependencies. • Install

    Node.js • npm install -g cordova ionic • ionic start myApp sidemenu • cd myApp ; ionic platform add ios
  46. None
  47. None
  48. None
  49. ionic serve

  50. None
  51. None
  52. None
  53. None
  54. None
  55. https://facebook.github.io/react-native/

  56. None
  57. None
  58. None
  59. None
  60. React Native • All controls and behaviors are native. •

    Doesn’t use the DOM; no related performance issues. • The JavaScript thread that runs the app runs asynchronously to the rendering thread. • Native modules for things that aren’t yet available. • Can use underscore.js or anything else that doesn’t have a browser dependency.
  61. Facebook Groups Facebook Ads Manager

  62. http://www.adobe.com/devnet/devices.html

  63. None
  64. None
  65. None
  66. Native apps • Objective-C, Swift, (C/C++) on iOS, Java &

    XML on Android. • Typically the most expensive option, but not always. • Multiple codebases. • UI components and behaviors are native. • Best performance (developer-bound). • App store advantages/disadvantages - same as hybrid.
  67. The UI will devour your budget.

  68. howmuchtomakeanapp.com

  69. None
  70. None
  71. Native apps - bits and pieces. • Certificates, and provisional

    profiles will take longer to deal with than you think. • Second platform 75% rule of thumb. • Beta testing with test flight still needs to go through an app store approval. • Basic push notifications, error monitoring, and analytics should not take a lot of time to implement.
  72. None
  73. None
  74. Final thoughts

  75. The client does not care about whether or not you

    had a good time writing the code.
  76. Chasing the Platonic ideal is a poor use of your

  77. “You ain’t gonna need it.” > “Don’t repeat yourself.”