Mobile App Development Options for Web Developers

My talk from Peers Conf 2015

Transcript

1. Mobile app development options for web developers. Andrey Butov @andrey_butov
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)
6. Revenue, 2005 - 2008
8. “Nah. This iPhone thing is a fad. Let’s just keep making stuff for the Blackberry.”
9. :(
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.
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
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
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
49. ionic serve
55. https://facebook.github.io/react-native/
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
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
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.
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 time.
77. “You ain’t gonna need it.” > “Don’t repeat yourself.”