Downloaded 29 times
Uploaded byErmias Bayu
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
The document discusses the development of hybrid mobile apps using Apache Cordova, AngularJS, and Ionic, highlighting the pros and cons of native and mobile web apps. It explains how hybrid apps combine features of both types, using web technologies while allowing access to native device functionalities. Key benefits of Ionic include native-like performance, UI components as AngularJS directives, and platform independence.
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
- 1. Building Hybrid MobileApps with Apache cordova,AngularJS and Ionic
- 2. Ermias Bayu –1007-14-504-010 Osmania University Computer Science III Semester @girayegebaw github.com/hackarada
- 3. Overview • Mobile AppsIntroduction • Development Options • Cordova • Angular Js • Ionic Framework • Demo
- 4.
- 5.
- 6. Things to Consider •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?
- 7. Built using thedevice’s native programming language, native apps only run on their designated platform. A native application (native app) is an application program that has been developed for use on a particular platform or device. Native apps
- 8. Downside More Platforms. MoreProblems.
- 9. •Proficiency in eachplatform required •Timely & expensive •Maintenance Cost •Platform Instability
- 10. Mobile web applicationsrun in the device’s browser and operate across all platforms Mobile web apps
- 11. Downside • Only fewdevice APIs can be accessed(i.e Partial integration: (GPS, gyroscope, accelerometer, file upload) • Performance is based on browser and network connection • Entirely separate code bases • Monetization and security issues for Developers • Limited Graphics
- 12. What is TheSolution ?
- 13.
- 14. Hybrid apps area cross between native apps and mobile web apps
- 17. • Ionic isa bunch of UI elements made in HTML5 & • CSS3 that covers a lot of the mobile interactions • The big advantage of Ionic is all the UI components are AngularJS Directives • HTML5 framework for hybrid mobile apps. • Build on angular, sass. • Uses cordova/phonegap for creating running building deploying mobile apps. • Contains lots of mobile optimised css and javascript components. • Native like performance and beautifully designed
- 18. • Native Focused •Performance Obsessed • Hardware accelerated animations • Minimal DOM Manipulation • Remove 300ms tap delay • Plain old CSS • Sass • 80+ reusable mixins • Boilerplate app structure ready for customization • Preconfigured tools: Gulp, Sass, Bower, etc.
- 19. Platform independent(iOS, Android etc.) HTML5, CSS3 & JS Limited performance Quick development Direct access to native APIs with Cordova Current technologies provide frame works like ionic and cross walk
- 20. Set of deviceAPIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript
- 21. • HTML5 thatacts like native • Phonegap renamed to Cordova • Web wrapped in native layer • Direct access to native APIs • Familiar web dev environment • Develop a single code base (web platform)
- 22. Platforms ● Android ● Blackberry ●FirefoxOS ● iOS ● Tizen ● WebOS ● Windows Phone 7 ● Windows Phone Battery Status Camera Contacts Device Orientation Dialogs File Transfer Geolocation Globalization In-App Browser Media CaptureSplashscreen Statusbar Vibration Plugins
- 24. Proven for large-scaleapp development Extends the HTML vocabulary UI Components using Directives and Services
- 25. A structural MVCframework for dynamic web Apps.It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly
- 26. Demo and SampleApps https://github.com/hackarada/ioconf showcase.ionicframework.com
- 27.
Editor's Notes
- #5 A mobile app is a computer program designed to run on mobile devices such as Smartphone and tablet computers. Native apps Built using the device’s native programming language, native apps only run on their designated platform. Mobile web apps Hybrid apps Hybrid apps are a cross between native apps and mobile web apps