Mobile App Development Options for Web Developers

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Revenue, 2005 - 2008

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

scribbleton.com

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

• Not affected by app store review cycles. • Not affected by app store customer ratings. • Monetization beneﬁts. • Not affected by arbitrary app store guidelines. Mobile web apps. The good.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

forecast.io

Slide 19

Slide 19 text

• No native push notiﬁcations. • No in-app purchases. • No background processing. Mobile web apps. The bad.

Slide 20

Slide 20 text

• Geolocation - available on iOS & Android. • Ofﬂine support - available on iOS & Android. • Motion sensors - available on iOS and Android. • Camera access - available for iOS and Android. • mobilehtml5.org Mobile web apps.

Slide 21

Slide 21 text

Hybrid mobile apps • Common deﬁnition - 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)

Slide 22

Slide 22 text

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 notiﬁcations) • Better performance? Maybe? Hopefully. • Access to the app store.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

cordova.apache.org

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

ionicframework.com

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

• 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 ﬁelds. • Removal of the 300ms input delay. Ionic

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

ionic serve

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

Facebook Groups Facebook Ads Manager

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

The UI will devour your budget.

Slide 68

Slide 68 text

howmuchtomakeanapp.com

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Final thoughts

Slide 75

Slide 75 text

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