Hybrid application development

Hybrid application development

• 1.
  Hybrid Mobile ApplicationDevelopmentHybrid Mobile Application Development Nikhil Kumar | Software Consultant Knoldus Software LLP Nikhil Kumar | Software Consultant Knoldus Software LLP
• 2.
  AgendaAgenda ● What ishybrid mobile application : The Concept ● Hybrid app vs Native app vs Web app: A Comparison ● What is IONIC Framework ● What is Apache Cordova ● Going Into IONIC world ● Designing in IONIC ● Intro To Cordova ● Demo
• 3.
  -Hybrid apps arelike anyother app you'll find in your phone. -Hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript. From users view: It doesn't matter if wine tastes well. -The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. -Today, most hybrid mobile applications leverage Apache Cordova. -Hybrid apps are like anyother app you'll find in your phone. -Hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript. From users view: It doesn't matter if wine tastes well. -The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. -Today, most hybrid mobile applications leverage Apache Cordova. The Concept What – Why – Where – coming slides...
• 4.
  Motivation for HybridMotivationfor Hybrid Hybrid mobile applications provide a way for developers to re-use their existing skills in web development. WHY Hybrid mobile application development looks appealing to an organization’s. Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? But Reality is???
• 5.
  When should youbuild a hybrid mobile app? ● Which mobile platforms do you wish to target? ● Do you want to distribute your application via app stores? ● Are you looking to utilize the capabilities of the mobile device? ● What are the technical abilities of your development team? ● Does the one-size-fit-all approach of hybrid really live up to its promise? When should you build a hybrid mobile app? ● Which mobile platforms do you wish to target? ● Do you want to distribute your application via app stores? ● Are you looking to utilize the capabilities of the mobile device? ● What are the technical abilities of your development team? ● Does the one-size-fit-all approach of hybrid really live up to its promise?
• 6.
  Examples of HybridApplicationsExamples of Hybrid Applications Insta untappd yelp FitFyles http://showcase.ionicframework.com/
• 7.
  Comparison
• 8.
  Drifty: Ben Sperryand Max Lynch- 2012 Ionic: 2013 Drifty, a company that has been making it possible for web developers to build  and publish native mobile applications that can then be published to the major  app stores, including Apple’s iTunes, Amazon’s Appstore and Google Play, has  now raised an additional $2.6 million led by Lightbank in Chicago. ­ Developers have created 500,000 apps ­ 15,000 stars on GitHub and has risen to become one of the top 40 most popular     projects worldwide, notes Lynch.  Drifty: Ben Sperry and Max Lynch- 2012 Ionic: 2013 Drifty, a company that has been making it possible for web developers to build  and publish native mobile applications that can then be published to the major  app stores, including Apple’s iTunes, Amazon’s Appstore and Google Play, has  now raised an additional $2.6 million led by Lightbank in Chicago. ­ Developers have created 500,000 apps ­ 15,000 stars on GitHub and has risen to become one of the top 40 most popular     projects worldwide, notes Lynch.  Ionic : A Large scale overview
• 9.
  Ionic is theopen source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know how to build or design websites, you will be able to build a real mobile app with Ionic! Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps and mobile websites with HTML, JavaScript, and CSS. If you know how to build or design websites, you will be able to build a real mobile app with Ionic! Ionic Framework
• 10.
  - Ionic isfocused mainly on the look and feel, and UI interaction of your app. That means we aren’t a replacement for PhoneGap or your favorite Javascript framework. - Ionic currently requires AngularJS - Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren’t a replacement for PhoneGap or your favorite Javascript framework. - Ionic currently requires AngularJS Ionic Framework... Stackshare.io
• 11.
  IONIC COMPONENTS checkout IONIC COMPONENTS checkout GoingInto Ionic world
• 12.
  - npm install-g ionic - ionic start myproject - adding platform - adding plugings etc - npm install -g ionic - ionic start myproject - adding platform - adding plugings etc Quick Start The default templates name are below: ● tabs (Default) ● sidemenu ● maps ● salesforce ● tests ● complex-list ● blank Setup Environment: Check this blog
• 13.
  IONIC CREATORIONIC CREATOR IoincDesigning Magic
• 14.
  Today, most hybridmobile applications leverage Apache Cordova. Ionic builds on top of Cordova Apache Cordova takes care of packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. But if you simply take an existing website and package it as a mobile app the result will look nothing like a native app: users will notice very quickly that the styles and behaviours are pretty different. Today, most hybrid mobile applications leverage Apache Cordova. Ionic builds on top of Cordova Apache Cordova takes care of packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. But if you simply take an existing website and package it as a mobile app the result will look nothing like a native app: users will notice very quickly that the styles and behaviours are pretty different. Apache Cordova
• 15.
  ngCordova comes withover 70 native Cordova plugins that you can easily add to your Angular Cordova apps. Choose the plugin you’d like to use from the menu, which will have information on which plugin you need to install and an example of how to use it in your Angular code. Checkout : The game begins... ngCordova comes with over 70 native Cordova plugins that you can easily add to your Angular Cordova apps. Choose the plugin you’d like to use from the menu, which will have information on which plugin you need to install and an example of how to use it in your Angular code. Checkout : The game begins... Into Cordova
• 16.
  Demo DEMO
• 17.
  References ● http://blog.knoldus.com ● http://developer.telerik.com/ ●http://ngcordova.com/docs/ ● http://ionicframework.com/docs/
• 18.
  Presenter [email protected] Presenter [email protected] Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Organizer @Knolspeak http://www.knoldus.com http://blog.knoldus.com Thanks