Mobile App Development Options for Web Developers

Transcript

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

    time.

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