Hybrid mobile application with Ionic

Hybrid mobile application with Ionic

• 1.
  HYBRID MOBILE APPLICATION By Maulik Bamania
• 2.
  Agenda • SmartPhone OSApps market • SmartPhone Apps development technology • Native Vs Web Vs Hybrid Apps
• 3.
  SmartPhone OS • SmartphoneOS available in market • Android • iOS • Windows Phone • Blackberry OS • Fire OS (from Amazon) • Firefox OS (from Mozilla)
• 4.
  SmartPhone OS
• 5.
  SmartPhone Apps •Native Apps •WebApps •Hybrid Apps
• 6.
  SmartPhone Apps: NativeApps • OS centric • Developed using platform specific IDE • Additional storage space • High development and maintenance cost • Better Performance and Usability • Best overall mobile experience • Native API access for Graphics, device feature and hardware. In sort access to everything available on your mobile. • Good tutorials and training materials
• 7.
  SmartPhone Apps: WebApps • Responsive mobile version of web site • Fast UI development with HTML5 and CSS3 • Business logic can be handle with JavaScript • Run on any Mobile OS "write-once-run-anywhere" • Installation free • No additional memory usage • Low development and maintenance cost • E.g. Jquery Mobile, Sencha Touch, Kendo Mobile • Run under mobile browser • Limited or no access to Native API, device features and hardware • Limited UI event capturing compare to native • Additional burden of testing with various platform and device • No offline support (internet required) • Security checkpoint. Authentication and offline data encryption
• 8.
  SmartPhone Apps: HybridApps • Best of Both (Native & Web) • Developed with HTML5, CSS, Javascript; binding them with thin native container which will provide access to native platform • Run on all major mobile OS • Low development and maintenance cost • Native API and Device Hardware access • Cordova, PhoneGap • Not so mature Handling native API with respect to all platform • No standard IDE • Lag to provide 100% look & feel like native for some platform • Performance drawback in some cases compare to Native (mainly with high processing with CPU & Graphics)
• 9.
  Smartphone Apps
• 10.
  Smartphone Apps Native MobileWeb (HTML5) Hybrid App Features Graphics Native APIs HTML, Canvas, SVG HTML, Canvas, SVG Performance Fast Slow Slow Native look and feel Native Emulated Emulated Distribution Appstore Web Appstore Device Access Camera Yes No Yes Notifications Yes No Yes Contacts, calendar Yes No Yes Offline storage Secure file storage Shared SQL Secure file system, shared SQL Geolocation Yes Yes Yes Gestures Swipe Yes Yes Yes Pinch, spread Yes No Yes Connectivity Online and offline Mostly online Online and offline Development skills ObjectiveC, Java HTML5, CSS, Javascript HTML5, CSS, Javascript
• 11.
  Hybrid Mobile Platform •Hybrid mobile platform will allow to wrap your web application with native container to make your application a real mobile Apps. • Here are few popular platform available: Android iPhone Widows BlackBerry amazon-fireos Cordova / PhoneGap X X X X X Trigger.io X X X Telerik Platform X X X Intel XDK (formerly appMobi) X X X X X Framework 7 X
• 12.
  Hybrid Mobile UIFramework • Mobile UI framework will provide mobile specific UI component , font, theme. • It helps to create hybrid mobile app which look and feel similar to native apps with better performance. • Here are few popular mobile UI framework: Ui framework Platform build OpenSource IDE CSS MVC support Ionic Cordova, PhoneGap, Trigger.io Yes Ionic Creator SASS Yes (AngularJS) Onsen UI Cordova, PhoneGap Yes Monaco IDE Topcoat CSS Yes (AngularJS) Sench Touch Cordova, PhoneGap No No SASS Yes JQuery Mobile Cordova, PhoneGap Yes No Themeroller No Mobile Angular UI Cordova, PhoneGap Yes No SASS / LESS Yes Kendo UI Telerik No No SASS / LESS Yes (AngularJS)
• 13.
  Ionic framework • MobileUI design and development framework • Build around Apache Cordova, AngularJS, SASS, CSS3 and HTML5 • Ready with inbuilt UI plugin (and that is customized for android and iOS platform), theme, typography, seed projects for faster development • Can build Ionic app either of Cordova, PhoneGap or Trigger.io platform • Support for push notification, A/B testing, code deploys and automated builds • Ionic Creator – IDE for ionic development
• 14.
  Ionic framework • thecore is written with Sass and includes easily customized variables and mixins. • OS specific styles, behaviors and transitions (currently available for iOS and Andorid) • Ionicons : The premium icon font for Ionic Framework.
• 15.
  Ionic framework • A/Btesting under standard browser with Ionic Serve • Development with livereload • Reach optimized angularJS base UI component
• 16.
  Ionic framework • Poordocumetation, but high number of active users in live communitiy • Only for mobile UI, can not be used for desktop responsive UI • For resposive, uses CSS Flexible box which only supported under latest browser • Not support plugin variables
• 17.
  Development with Ionic •Underline technologies • Nodejs • open source JavaScript engine. Ionic, cordova are NPM module • Apache Cordova • Open source Hybrid mobile application development platform • Android SDK • Android platform developer kit, required to build android app with ionic • AngularJS • Javascript framework, enable MVC and two way data binding capability with web application • HTML5 • Web scripting language comes with power to build responsive web application • CSS3 • Web page style • Gulp / grunt • NPM packages helps to build and run web application under NodeJs envirement • Bower • Its Maven like javascript lib dependency manager
• 18.
  Ionic setup • InstallnodeJS • Install cordova NPM package npm install -g cordova • Install Ionic NPM package npm install -g ionic