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

More Decks by Andrey Butov

Other Decks in Technology


  1. 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.
  2. 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)
  3. “Nah. This iPhone thing is a fad. Let’s just keep

    making stuff for the Blackberry.”
  4. :(

  5. 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.
  6. • 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.
  7. Mobile web apps. The bad. • Slower than other options.

    • No app store placement. • Home screen icon? • No native controls or behaviors.
  8. • No native push notifications. • No in-app purchases. •

    No background processing. Mobile web apps. The bad.
  9. • 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.
  10. 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)
  11. 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.
  12. 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.
  13. 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
  14. 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
  15. • 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
  16. • Live reload of running code. • Icon & splash

    screen generation. • Back-end services like push. • Ionic View Ionic - tools
  17. 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
  18. 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.
  19. 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.
  20. 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.
  21. The client does not care about whether or not you

    had a good time writing the code.