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
Tweet

More Decks by Andrey Butov

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 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.

    View full-size slide

  3. 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)

    View full-size slide

  4. Revenue, 2005 - 2008

    View full-size slide

  5. “Nah. This iPhone thing is a fad.
    Let’s just keep making stuff for
    the Blackberry.”

    View full-size slide

  6. scribbleton.com

    View full-size slide

  7. Development options for mobile apps
    • Mobile web apps
    • Hybrid apps
    • Native apps

    View full-size slide

  8. 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.

    View full-size slide

  9. • 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.

    View full-size slide

  10. Mobile web apps. The bad.
    • Slower than other options.
    • No app store placement.
    • Home screen icon?
    • No native controls or behaviors.

    View full-size slide

  11. • No native push notifications.
    • No in-app purchases.
    • No background processing.
    Mobile web apps. The bad.

    View full-size slide

  12. • 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.

    View full-size slide

  13. 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)

    View full-size slide

  14. 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.

    View full-size slide

  15. cordova.apache.org

    View full-size slide

  16. 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.

    View full-size slide

  17. 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

    View full-size slide

  18. ionicframework.com

    View full-size slide

  19. 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

    View full-size slide

  20. • 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

    View full-size slide

  21. • Live reload of running code.
    • Icon & splash screen generation.
    • Back-end services like push.
    • Ionic View
    Ionic - tools

    View full-size slide

  22. 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

    View full-size slide

  23. https://facebook.github.io/react-native/

    View full-size slide

  24. 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.

    View full-size slide

  25. Facebook Groups Facebook Ads Manager

    View full-size slide

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

    View full-size slide

  27. 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.

    View full-size slide

  28. The UI will devour your budget.

    View full-size slide

  29. howmuchtomakeanapp.com

    View full-size slide

  30. 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.

    View full-size slide

  31. Final thoughts

    View full-size slide

  32. The client does not care about whether or
    not you had a good time writing the code.

    View full-size slide

  33. Chasing the Platonic ideal is a
    poor use of your time.

    View full-size slide

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

    View full-size slide