Hybrid app development allows building a single app that can run on multiple platforms using web technologies like HTML, CSS, and JavaScript. It has advantages like lower costs, faster development time, and easier maintenance compared to building native apps for each platform. Popular frameworks for hybrid apps include PhoneGap, Ionic, and React Native. While hybrid apps have performance limitations compared to native, they are suitable when targeting multiple platforms or when most device functionality can be accessed through frameworks.

1. Hybrid App Development
KHYATI PANCHAL

3. Agenda
1) History Of Mobile Applications
2) App Development Approaches
3) Difference between Applications
4) Hybrid Application
5) When/Why use Hybrid App
6) Framework For Hybrid App
7) Advantage Of Hybrid App
8) Disadvantages of Hybrid App
9) Live Example of Hybrid App
10) Progressive Web App

4. History Of Smartphones & Apps

5. History Of Mobile Application
• 3 April,1973-CEO of Motorola and Bell lab
Discussion
• After 20 year 1st
App launched
• IBM Simon Introduce first app
• Apple Lunched AppStore in July 2008 with 500
Apps
• Google's Android Market was launched in Dec 2010

6. What’s Driving Mobile?

7. Total Apps on Play Store

8. Total Apps on App Store

9. What is used by Mobile Developer?
Native Mobile Platforms Mobile Web / Hybrid Dev
Native API
To iOS
(Wrapper)
HTML5
javascript
Web
View
Native API
To Android
(Wrapper)
HTML5
Javascript
Web
View
Objective-C,Swift
Xcode,AppCode
Android JAVA,Kotlin
Eclipse,IntelliJ
iOS

10. What's the best approach for you?

11. Silo Approch:
Build the Same Apps Multiple Times

12. Write Once, Run AnyWhere Approach:
Build One App Use on Multiple Platform
• App Generation.
• Web Browser in a
Native Wrapper +
APIs.

13. Hybrid Vs. Native
Features Hybrid Apps Native Apps
Development
Language
HTML5,CSS and
Javascript
Native Only
Device Acces Complete Complete
Performance/Speed Medium/Good Very Fast
Code Portability High None
Development Cost Responsible Expensive
Time to Market Faster Slower
Maintanance Low High

14. What ?

15. What ?

HTML + CSS + JavaScript = Hybrid App

Wrapped in – Native Container

Apache Cordova - Hybrid App Development
Framework

16. When ?

When targeting multiple platforms

When phone-specific functionality is covered by
frameworks

Technical abilities of your development team.

17. Framework For Hybrid Application

Trigger IO

Xamarin

Ionic

PhoneGap

Onsen UI

Framework 7

React Native

18. Advantages Of Hybrid App

Reduce Development cost and Time

Improved User Interface

Ease of Integration

Offline Support

Easy to maintain

Speed

Fast Deployment

19. Disadvantages Of Hybrid App

Performance

Debugging

20. Live Example Of Hybrid Application

21. What's next? What's the future?

23. What ?

Combine best of web and app

Built with web technology

Feels like native app

Advancement : service worker,App shell

24. characteristics ?

Discoverable

Progressive

Responsive

Connectivity independent

App-like

Fresh

Safe

Re-engageable

Installable

Linkable

25. Why ?

Worthy of being on the
home screen

Work reliably,
no matter the network
conditions

26. Service Workers ?

27. What ?

Just like Javascript file

Technology behind PWA

Incredibly powerful, and equally as confusing

Provide offline functionality, push notifications,
background content updating

28. App Shell ?

App shell model – keep shell of our app UI and
content of app separate inside
app shell model

App shell is cached – loads data quickly

29. How to find and install Progressive Web Apps?

30. Which Mobile Approach is the Right One?
Is There a Silver Bullet?

31. Summary
• There is no silver bullet, no “one size fits
all”, when choosing a cross-platform
mobile strategy.
• Native Apps and Hybrid Apps both have
their place.
• Each mobile project should be evaluated
separately.