•

Introduction to Hybrid Application

Development

Presented by: Kunjan Thakkar

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

• kunj.t.2490@gmail.com• LinkedIn https://in.linkedin.com/in/kunjan-thakkar-

4199b129

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.

Skills needed for hybrid apps

All hybrid applications are based on javascript. They might be based on some specific javascript technologies like jquery/angularjs

Are native apps not good enough?

They bring the best of native and web apps

Few of the many hybrid app frameworks

What have we explored so far?

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.

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.

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

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]

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]

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]

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.

Appery.io framework

How does the hybrid application work?

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/

Plugin.xml

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.

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 ..

Some examples of hybrid applications

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

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

Questions?

Thank You