Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Cross-Platform Hybrid Mobile App Development


Published on

What is Hybrid Mobile App? How developers create mobile app based on web development skills? All of these questions answers are in this presentation.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Introduction to Cross-Platform Hybrid Mobile App Development

  1. 1. Introduction to Cross-Platform Hybrid Mobile App Development Zafer AYAN - Oct 14 2017
  2. 2. About Me Zafer AYAN @zaferayan Full Stack Developer - ISBAK
  3. 3. What is the Hybrid Mobile App?
  4. 4. Hybrid Mobile App Mobile Device Device Services Camera Geolocation Bluetooth Contacts Device Info Native Container Web View Plugins + API's
  5. 5. Why we develop Hybrid Mobile App?
  6. 6. Native App Pros • Better load speed and performance. • Native look&feel. Cons • Developer cost for each platform. • Maintaining is time- consuming. • Approvement is required for each App Store.
  7. 7. Hybrid App Pros • Single code base for multiple platforms. • Web developers can easily adapt to mobile development. • Development costs lower than Native development. • Deployable to web server. Cons • Slower-ish performance compared to Native apps. • Animations cannot gain 60 FPS (yet).
  8. 8. Macbook Pro iPhone 7 Source: Parse times for 1 MB bundle of JavaScript
  9. 9. Hybrid apps can be updated without submission to app store.
  10. 10. Apple Allows Over The Air Updates Source:
  11. 11. • A cloud service that pushes /www directory to users directly. • Supports Cordova and React Native projects. • Tracks usage statistics for each platform. • Manages alpha, beta and production deployments seperately. • You can serve your own CodePush service on your server.
  12. 12. Hybrid App Frameworks
  13. 13. Hybrid App Frameworks • Apache Cordova (is free) • Adobe PhoneGap • Intel XDK • Telerik NativeScript • IBM Worklight • Monaca (tool for Onsen UI) • And so on...
  14. 14. Android Compatibility • Jelly Bean and lower versions (%8) have outdated WebView that based on WebKit. • If you want to support those outdated platforms, you can use CrossWalk project which is Chromium based portable WebView. • But it adds approx. 20MB to apk size. Marshmallow 32% Lollipop 28% Nougat 18% KitKat 14% Jelly Bean 7% Gingerbread 0% Ice-Cream Sandwich 1% Oreo 0% Version Usage Chart data source:
  15. 15. Development Phase
  16. 16. Cordova CLI > npm install -g cordova > cordova create hello com.example.hello HelloWorld > cordova plugin add org.apache.cordova.splashscreen > cordova platform add android > cordova run android • Prepares Cordova project for you. • Compatible with Windows, Linux, MacOS
  17. 17. Visual Studio Support • You can create pretty much things without CLI. • Provides interfaces for Grunt, Gulp and Bower as default. • Click to build&run Android platform.
  18. 18. Always prepare your apps as SPA (Single Page Application)
  19. 19. What is SPA • Basically its just one html page contains all resources inside it. • Server only serves JSON data, except initial HTML and bundles. • All pages represented as <div>'s, and user navigates through them. • As all resources are loaded at application start phase, page transitions happens smoothly.
  20. 20. Native Look&Feel UI frameworks • Framework7 • Ionic 2 • OnsenUI • JQuery Mobile • And so on...
  21. 21. Best Practices
  22. 22. Start small and iterate • Obtain the requirements of product. • Start at small. • Implement the most important functionality. • Release usable app. • Evaluate feedbacks from user. Image by Henrik Kniberg
  23. 23. For User Interface • Just use any SPA UI framework you familiar with. • They are all well tested and documented. • Have built-in features that protects you from common issues such as detecting touch events and distinguish between element clicking and scrolling.
  24. 24. For Architecture • Automate your tasks with Grunt or Gulp or Webpack. • Use as few as possible plugins on your projects. • Obfuscate/uglify your businness logic. • Enable over-the-air updates for your app. • Log all operations and errors and to be informed from them.
  25. 25. Demo
  26. 26. Questions?
  27. 27. Thank you! • Slides: • Email: