•

Introduction to Hybrid Application

Development

Presented by: Kunjan Thakkar

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 OS APIs, app-store presence, etc.

• Selected portions of the app are written using web technologies.

They bring the best of native and web apps

Platform Affinity

Acc

ess

to d

evic

e ca

pabi

litie

s

Native Apps

• Single Platform• Written with platform SDKs• Must be written for each platform• Access to all native APIs• Faster graphics performance

Hybrid Mobile Apps

• Cross platform• Written using web technologies• Runs locally on device, supports

offline• Access to native APIs

Mobile Web Apps

• Cross platform• Written using web technologies• Runs on web server, viewable on

multiple devices• No access to native APIs

Why I should I go for a hybrid application?

• One code runs everywhere - all mobile platforms. 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.

So how do I choose between hybrid and

native?

A few basic questions should help you decide what is best for your application:• What amount of native functionality will your app require?• Is mobile your core differentiator from competition? • What platforms are you targeting?• Time to market?• What amount of customization are you looking for?• Are you targeting both web and mobile applications? Eg:

Some frameworks like Mobile angular UI support all mobile platforms and all web platforms with responsiveness with one single code base.

Few of the many hybrid application frameworks

•

Demo

So which hybrid framework 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

Some real world examples of hybrid applications

What work has Synerzip done on Hybrid applications?

• Client• One of our clients has an apps built using Ionic

published on the Android and iOS stores• POCs

• POC was built using Appery.io• Presales Workflow POC was built using JQM, Mobile

Angular UI and Ionic. These 3 versions of the same application using different technologies helped us do a comparative study

Questions?

Thank You