![Jquery Mobile
• Build on popular jquery library and uses cordova
• Easy access to DOM
• Shallower learning curve as compared to other hybrid
frameworks
• Several built-in widgets like page, panel, etc
• You can create your own theme using theme roller.
• AJAX calls are made automatically to load dynamic
content.
• Rich set of third party plugins
• [Demo]](https://image.slidesharecdn.com/introductiontohybridapplicationdevelopment-151119134933-lva1-app6892/85/Introduction-to-hybrid-application-development-12-320.jpg)
![Mobile angular UI
• Based on AngularJS and Bootstrap. Uses cordova
• Several built-in components like switches, overlays,
sidebars, absolute positioned navigation bars.
• Works seamlessly from mobile to desktop and back
• No dependencies on jquery or bootstrap.js
• Internally uses bootstrap to provide responsiveness
• Font awesome ions are included by default in place of
glyphicons
• [Demo]](https://image.slidesharecdn.com/introductiontohybridapplicationdevelopment-151119134933-lva1-app6892/85/Introduction-to-hybrid-application-development-13-320.jpg)
![Ionic
• Built with Sass and optimized for AngularJS. Uses
cordova
• Built-in app templates help you get started in minutes
• Its native focussed - same code but renders differently
on different OS giving the application a more native feel
• Uses templating which reduces code bloat.
• Minimal DOM manipulation
• No dependencies on jquery
• Hardware accelerated transitions
• [Demo]](https://image.slidesharecdn.com/introductiontohybridapplicationdevelopment-151119134933-lva1-app6892/85/Introduction-to-hybrid-application-development-14-320.jpg)
Introduction to hybrid application development
- 1. • Introduction to Hybrid Application Development Presented by: Kunjan Thakkar
- 2. Who am I? • Sr. Developer @ Synerzip Softech • 5+ years of development experience • Mobile Application development in Android, J2ME, Blackberry • Web development using Javascript, HTML5, AngularJS, Polymer • Current interests: Hybrid application development • Contact • [email protected] • LinkedIn https://in.linkedin.com/in/kunjan-thakkar-4199b129
- 3. What are hybrid applications? • A hybrid application is basically a native application with embedded HTML • It has all the benefits of native apps like full access to APIs, app-store presence, etc. • Selected portions of the app are written using web technologies.
- 4. Skills needed for hybrid apps All hybrid applications are based on javascript. They might be based on some specific javascript technologies like jquery/angularjs
- 5. Are native apps not good enough?
- 6. They bring the best of native and web apps
- 7. Few of the many hybrid app frameworks
- 8. What have we explored so far?
- 9. Phonegap • Phonegap is a mobile application development framework. It enables developers to build applications for mobile devices using Javascript, HTML5 and CSS3 instead of relying on platform specific APIs in IOS/Android/Windows Phone. • Although the applications are developed using HTML, CSS and Javascript, the end product is a binary that can be distributed through the respective ecosystems. • Phonegap was created by Nitobi and Adobe acquired it in 2011.
- 10. Cordova • The core engine for Phonegap is 100% open source under the Apache Cordova project. • Cordova is the engine that powers Phonegap. It bridges the gap between Javascript, HTML5 and native. • The hybrid application would run in a web browser view that takes up 100% device height and 100% device width. • The web view used by the application is the same web view used by the native operating system. • On iOS, this is the Objective-C UIWebView class • On Android, this is android.webkit.WebView.
- 11. Cordova • When an application is created using cordova, it creates a skeleton for the native app • For eg: For an android application, it would create a manifest file and a main activity to launch the application. The main activity would then initialize the WebView class where your javascript loads • This means you get access to the generated code base in native as well. You could add any special permissions that you want for a particular platform, in case they are unavailable through config.xml
- 12. Jquery Mobile • Build on popular jquery library and uses cordova • Easy access to DOM • Shallower learning curve as compared to other hybrid frameworks • Several built-in widgets like page, panel, etc • You can create your own theme using theme roller. • AJAX calls are made automatically to load dynamic content. • Rich set of third party plugins • [Demo]
- 13. Mobile angular UI • Based on AngularJS and Bootstrap. Uses cordova • Several built-in components like switches, overlays, sidebars, absolute positioned navigation bars. • Works seamlessly from mobile to desktop and back • No dependencies on jquery or bootstrap.js • Internally uses bootstrap to provide responsiveness • Font awesome ions are included by default in place of glyphicons • [Demo]
- 14. Ionic • Built with Sass and optimized for AngularJS. Uses cordova • Built-in app templates help you get started in minutes • Its native focussed - same code but renders differently on different OS giving the application a more native feel • Uses templating which reduces code bloat. • Minimal DOM manipulation • No dependencies on jquery • Hardware accelerated transitions • [Demo]
- 15. Introduction to Appery.io • Appery.io is a cloud-based platform that provides UI development tools and integrated backend services. • It uses bootstrap for responsiveness and cordova for building the application • It gives you a choice of the UI framework you want to work with. You could create an application using Jquery mobile/mobile angular UI/Ionic • Appery has built in support for backend/databases/push notifications. • The created application has some commonly used cordova plugins like google analytics pre-installed. Also you can install any other cordova plugin easily.
- 17. How does the hybrid application work?
- 18. What if I need to access some native functionality thats not currently supported? • A plugin is a bit of add-on code that provides JavaScript interface to native components. • It allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. • These are some plugins created by developers - http://cordova.apache.org/plugins/
- 19. Plugin.xml
- 20. Why I should I go for a hybrid application(I)? • One code runs everywhere - all mobile platforms as well desktops. Hybrid applications are cross-platform, which saves you money and time (which saves you even more money ;)) • Time to market is comparatively less • Consistent UI throughout all platforms which is tricky to achieve with native apps. • CSS is powerful! You can customize almost anything right from headers to switches to transitions. Several UI frameworks now have built-in transitions which are hardware accelerated giving your users a smooth experience.
- 21. Why I should I go for a hybrid application(II)? • Need to access some native APIs? Write a plugin :) Hybrid apps give you benefits of javascript and native both. You get access of native and power of javascript. • You can make use of the powerful javascript libraries that are at our disposal for eg: gmaps.js which supports geolocation and several other map features. On native you might have to implement these by yourself. And the list is endless ..
- 22. Some examples of hybrid applications
- 23. So what do I use and when? Jquery Mobile Mobile angular UI Ionic Supports all mobile devices and all desktop browsers Supports all mobile devices and all desktop browsers Supports android and ios. Minimal windows phone support. No guaranteed support for browsers Well suited for simple applications. Not well suited for applications having complex UI/DOM manipulations Well suited for applications that require binding and have complex UI Well suited for applications that require binding and have complex UI UI appears similar on all devices. However, can be configured using device type checks UI appears similar on all devices. However, can be configured using device type checks Native focussed. Same code renders differently on different OS giving the application a more native feel Create your own theme using theme roller Themes can be created using css Themes can be created using css
- 24. No built in responsiveness. Need to include third party libraries for it. Uses Bootstrap3 internally for responsiveness Offers built in responsive grid support Performance can degrade for complex applications Performance is better than JQM, however, not as smooth as ionic Excellent performance and speed on native devices. Limited built in transitions Limited built in transitions Several built in hardware accelerated transitions No built in app templates. No built in app templates. However, the application created contains a rich bunch of samples. Built in app templates get you started in minutes Executable needs to be distributed manually if you do not want to upload it on app store Executable needs to be distributed manually if you do not want to upload it on app store You can use the Ionic View app to share your application with selected users without uploading it to app store
- 25. Questions?
- 26. Thank You