Fast-lane into app stores

An opinionated stack for building hybrid mobile apps with web technologies

Presented at Startup Camp Berlin 2015

Transcript

1. Fast-lane into app stores Building hybrid mobile apps with web technologies
2. Founded 2015 in Berlin Mobile app consultancy Help companies to develop hybrid apps Hybrid app concept and development Building  hybrid  mobile  apps  with  web  technologies 2 2015-­‐03-­‐13
3. Agenda 1. Challenges in app development 2. What is a hybrid app? 3. Myth busting 4. Should I build a hybrid app? 5. Time savers 1. Choosing a hybrid app framework 2. Platform considerations 3. Streamline your workflows 4. Building mobile UI Building  hybrid  mobile  apps  with  web  technologies 3 2015-­‐03-­‐13
4. Challenges in app development
5. Choose wisely Source: FluidUI (2015): https://www.fluidui.com/from-big-screen-to- small-screen-the-explosion-of-screens-devices-and-platforms/ How do I decide which platform to target? Building  hybrid  mobile  apps  with  web  technologies 5 2015-­‐03-­‐13
6. How do I decide which platform to target? 71% 68% 53% 19% 30% 47% 9% 6% 1% 1% 0% 10% 20% 30% 40% 50% 60% 70% 80% Sales  share  Jan/2015 Page  view  share  Jan/2015 App  revenue  share  by  Store  Jan/2015 Android Apple Windows  Phone Blackberry Source: Statista 2015, App Annie: Google Play‘s rapid rise in Germany (2015) Choose wisely 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 6
7. Developer skill set Do I need a new developer team? C# Java Java Script .NE T HTML Rails CSS 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 7
8. Product roadmap Windows Phone Android iOS Web How can I maintain speed and a singular product roadmap? 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 8
9. What is a hybrid app?
10. What is a hybrid app? Write Test Write Test Write Test Build Build Build Build Write Test Build Write Test Build Mobile Web Hybrid App Native App Building  hybrid  mobile  apps  with  web  technologies 10 2015-­‐03-­‐13
11. What is a hybrid app? Write Test Build Build Build Hybrid App • Single code base for all platforms • Use your web environment • Even deploy your app as web app • Full access to hardware features such as push, geolocation, camera… • Submission to app stores Shared Code Base Native Container Building  hybrid  mobile  apps  with  web  technologies 11 2015-­‐03-­‐13
12. MYTH BUSTING
13. “ Myth busting Hybrid Apps are slow and have crappy UI! 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 13
14. Myth busting Hybrid Apps always need internet connection 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 14 “
15. Myth busting Hybrid Apps cannot use native functionality 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 15 “
16. Myth busting Hybrid apps get rejected from the App Store 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 16 “
17. Why are you reading this when you could develop your first hybrid app?
18. Go native, …when you are building for a single platform …when UI is your product …when you are consuming cutting edge hardware APIs …when you are doing intense computation …when you have no experience with web technologies Building  hybrid  mobile  apps  with  web  technologies 18 2015-­‐03-­‐13
19. Go hybrid, …when multiple platforms need to be served …when time to market is critical …when fast iteration is desired …when you need a proof of concept …when you have a lot of dynamic content Building  hybrid  mobile  apps  with  web  technologies 19 2015-­‐03-­‐13
20. You are in good company Building  hybrid  mobile  apps  with  web  technologies 20 Infrastructure Providers 2015-­‐03-­‐13
21. You are in good company Building  hybrid  mobile  apps  with  web  technologies 21 Companies 2015-­‐03-­‐13
22. You are in good company Building  hybrid  mobile  apps  with  web  technologies 22 Startups 2015-­‐03-­‐13
23. Choosing a hybrid app framework Time saver #1
24. Hybrid app frameworks … Building hybrid mobile apps with web technologies 24 2015-03-13
25. … all got something in common Building hybrid mobile apps with web technologies 25 2015-03-13
26. Cordova architecture Building hybrid mobile apps with web technologies 26 2015-03-13 Web App Cordova Bridge Cordova Core iOS WebView Component Cordova APIs Cordova Platforms Android Windows Phone 9 Platforms Camera Geolocatio n Push 800+ Plugins
27. http://commons.wikimedia.org/wiki/File:Mitsubishi_Delica_Van_001.JPG GETS US ANYWHERE! 2015-­‐03-­‐13
28. Commercial products’ USPs • Cloud services • Database • Push • Build • Integrated tooling • Proprietary UI frameworks • Verified plugins • (Subscription fees) Building hybrid mobile apps with web technologies 28 2015-03-13
29. https://www.flickr.com/photos/50004977@N00/ REALLY?
30. Framework best practices 1. Try barebones Cordova first 1. Watch the GitHub Repos! 2. Mix and match third-party services as required 1. Push 2. Backend 3. Community plugins 3. You can migrate to a commercial framework later on 1. They’re all Cordova ;) Building hybrid mobile apps with web technologies 30 2015-03-13
31. Platform considerations Time saver #2
32. When building for iOS • iOS can be considered an easy platform • Hurry to get a developer account • Read into iOS deployment • Double-check with store guidelines • 2.12: Can’t simply bundle a web site • 10.3 Adhere to Human Interface Guidelines • 11.1 In-App-Purchases for additional features • Plan 7 days for review http://appreviewtimes.com • Be prepared for more Building hybrid mobile apps with web technologies 32 2015-03-13
33. Android fragmentation 2015-03-13 Building hybrid mobile apps with web technologies 33 https://developer.android.com/about/dashboards/index.html
34. When  building  for  Android  … • Up  to  Android  4.3  42.6%  market  share • Outdated  WebView component  based  on  WebKit with  vendor-­‐specific   „improvements“ • No  built-­‐in  remote  inspection • Since  Android  4.4  40.9%  market  share • Chromium-­‐based  WebView component  with  all  the  bells  and  whistles • Since  Android  5.0  3.3%  market  share • WebView component  can  be  updated  independently Building  hybrid  mobile  apps  with  web  technologies 34 2015-­‐03-­‐13
35. …  always  use  the  CrossWalk! • Portable  WebView based  on   Chromium • Works  with  Android  4.x • Most  Cordova  plugins  are   compatible • Tooling  for  migration  available • Adds  ca.  20MB  per  architecture • Pays  off  a  hundred  times!   2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 35 2015-­‐03-­‐13
36. Less plugins is more GPS Camera Notifications File  System   Splash Screen Status  Bar Facebook In-­‐App-­‐ Browser Push Building hybrid mobile apps with web technologies 36 2015-03-13 1 1 1 2 3 2 1 1
37. Platform best practices 1. Register app store accounts and practice deployment ASAP 2. On Android, make your life a lot easier by using CrossWalk 3. Don’t go crazy with the plugins Building hybrid mobile apps with web technologies 37 2015-03-13
38. Streamline your workflows Time saver #3
39. Integrate Cordova CLI … > sudo npm install -g cordova > cordova create hello com.example.hello HelloWorld > cordova plugin add org.apache.cordova.splashscreen > cordova platform add ios > cordova run ios 2015-03-13 Building hybrid mobile apps with web technologies 39
40. … with your build system Native Packages Cordova CLI Grunt/Gulp Web App Build Xcode Project IPA Android Studio Project APK Visual Studio Project XAP ... Building hybrid mobile apps with web technologies 40 2015-03-13
41. 2015-­‐03-­‐13 Building  hybrid  mobile  apps  with  web  technologies 41
42. Use a project template • Scaffold using Yeoman • Best practice project structure • Integrated build system • Plenty of generators available, for Grunt AND Gulp 2015-03-13 Building hybrid mobile apps with web technologies 42
43. Test on a real device all the time • Lower-end Android devices are highly limited in RAM and GPU • To get a feeling for current performance you have to test on an actual device • You can connect an empty Cordova container to your local development server, live-reload changes as they happen • Use the remote inspector for full insights from device and simulator Building hybrid mobile apps with web technologies 43 2015-03-13
44. Workflow best practices 1. Use Yeoman project templates 2. Always test on a real device 3. Also 1. Version control Cordova assets 2. Use Genymotion for fast Android emulation Building hybrid mobile apps with web technologies 44 2015-03-13
45. Building mobile UI Time saver #4
46. To avoid the Uncanny Valley … -­‐40% -­‐20% 0% 20% 40% 60% 80% 100% 120% 0% 20% 40% 60% 80% 100% 120% Emotional  Response Visual  Similarity Building hybrid mobile apps with web technologies 46 2015-03-13
47. ... there’s a lot of work to do! • Don’t try to imitate native UI, rather create your own design language • Native-like UI paradigms • Navigation Bar, Tab Bar, Navigation History, View Transitions • Modals, Action Sheets, Popovers • Pull-to-refresh • User Input Controls • Native-like performance • Native-inspired Scroll Views, View Caching • Adapt effects according to device performance Building hybrid mobile apps with web technologies 47 2015-03-13
48. Building  hybrid  mobile  apps  with  web  technologies 48 2015-­‐03-­‐13
49. UI frameworks overview jQuery Mobile Sencha Touch KendoU I Ionic Famo.us Reap p 2011 2015 2012 2012 2013 2014 2010 2016 Building hybrid mobile apps with web technologies 49 2015-03-13
50. JavaScript MVC framework trends 2015-03-13 Building hybrid mobile apps with web technologies 50 http://www.google.com/trends/explore#q=angularjs%2C%20ember.js%2C%20knockoutjs%2C%20backbonejs&date=1%2F2011%2051m&cmpt=q&tz=
51. What UI Framework is based on AngularJS? 2015-03-13 Building hybrid mobile apps with web technologies 51
52. Ionic • First beta in March 2014 • Release candidate in March 2015 • $ 1 Mio funding • iOS and Android themes, Windows Phone in the making Building hybrid mobile apps with web technologies 52 2015-03-13
53. Ionic components Building hybrid mobile apps with web technologies 53 2015-03-13
54. Ionic ecosystem • Tooling on par with competition • Supporting libraries • ngCordova • Programming courses • Evolving into an ecosystem • Ionic platform announced in 02/2015 2015-03-13 Building hybrid mobile apps with web technologies 54
55. Ionic community • 14.300 Github Stars • Top 50 most starred Github repos • 57,000 posts in Ionic Forum • 3,700 Stackoverflow Posts • World-wide user groups • Forked by Appgyver • SupersonicJS Building hybrid mobile apps with web technologies 55 2015-03-13
56. Mobile UI best practices 1. Use a UI Framework, Ionic is recommended 2. If you really, really want to start from scratch 1. Reduce DOM size, render only what‘s on screen 2. Minimize DOM manipulation 3. Cache views 4. Selectively promote layers to GPU 5. Provide immediate interaction feedback, use Fastclick 6. Adapt to device performance 7. Performance comes before beauty Building hybrid mobile apps with web technologies 56 2015-03-13
57. Current-gen UI frameworks watchlist • AngularJS • OnsenUI http://onsen.io • React.js • Reapp http://reapp.io • Touchstone http://touchstonejs.io • Others • Ratchet http://goratchet.com • Framework7 http://www.idangero.us/framework7/ • Famo.us http://famo.us Building hybrid mobile apps with web technologies 57 2015-03-13
58. Time savers
59. Time savers 1. Start with barebones Cordova 2. Use CrossWalk for Android 3. Use a project template 4. Use Ionic Building hybrid mobile apps with web technologies 59 2015-03-13
60. Demo time
61. YouFootprint • Prototype for monitoring tool • Built by Hybrid Heroes during 10 days in February 2015 using Ionic Framework and Cordova 2015-03-13 Building hybrid mobile apps with web technologies 61
62. Thank you! http://hybridheroes.de/slides http://meetup.com/Hybrid-Mobile-App-Meetup- Berlin/ Building hybrid  mobile  apps  with  web  technologies 62 2015-­‐03-­‐13