Join Matt Netkow for an updated look into all the ways modern hybrid app development has evolved in its 10+ year journey. Watch live presentation here: https://ionicframework.com/resources/webinars/hybrid-app-development-redefined

1. Hybrid App
Development,
Redefined.

2. Housekeeping Items
 This webinar is being recorded
 All registrants will receive a link to the recording and slides
 This webinar presentation will be about 1 hour
 Submit questions during the live event using the Q&A panel

3. Matt Netkow
Head of Developer Relations
twitter.com/dotNetkow
matt.netkow@ionic.io
Who am I?

4. Today’s Agenda
→ Mobile Delivery Gap
→ Native Approach
→ Hybrid Approach
→ Live Demo
→ Ionic Platform Overview
→ Q&A

5. Mobile
Delivery
Gap.

6. “At least 40% of all businesses will die in the next 10
years… if they don’t figure out how to change their entire
company to accommodate new technologies”
 John Chambers, Executive Chairman, Cisco Systems
Businesses today need
software to survive...

7. “Demand for mobile experiences is growing 5x faster than
IT teams can deliver.”
 Gartner
But they can’t build
fast enough.

8. The
Native
Approach.

9. Native apps run on specific devices & platforms
✓ Objective-C/Swift, Java/Kotlin
✓ Dedicated developer tools, UIs, SDKs
✓ Full device functionality
What is a native app?

10. A popular choice for mobile developers
P E R F O R M A N C E
Benefits of native
Out-of-the-box raw native code is
usually still faster than JavaScript
and HTML.
R I C H N A T I V E L I B R A R Y
Access the latest features specifically
designed for those platforms, without
the complexity of native plugins.
L E S S D E P E N D E N C I E S
By building exclusively with a native
SDKs, developers aren’t bound to any
third-party to keep up with support.

11. Various drawbacks worth considering.
H I G H E R C O S T S
Challenges of native
It’s expensive to build for each
platform, along with hiring and
retaining specialized native talent.
L O N G D E V C Y C L E S
Building for multiple platforms
requires two or three different code
bases for iOS, Android and web.
T A L E N T S C A R C I T Y
Hiring devs is difficult given less than
7% of all developers are versed in
native programming languages.

12. High fragmentation
 Multiple teams
 Separate codebases
 Lack of code sharing

13. “Less than 7% of professional developers are familiar
with the languages of native mobile development:
Swift, Kotlin, and Objective-C.”
- Stack Overflow Developer Survey, 2019
Native talent is hard to
find (and retain)

14. The
Hybrid
Approach.

15. ✓ Built with web and native technology
✓ UI primarily in WebView (embedded browser)
✓ Wrapped in native app shell
✓ Full device access via native plugins or code
What is a hybrid app?
It’s a native app)

16. One codebase
Any platform
✓ Multiple destinations
✓ Single codebase
✓ Shared design

17. One codebase
One team
✓ Low fragmentation
✓ Single team
✓ Single codebase

18. StackOverflow Developer Survey, 2019
Abundant web
talent
10x more web devs
than native devs
Web tech: the most
widely used stack
Robust education
and training pipeline

19. Legacy
Hybrid App
Development.

20. Hybrid Approach: Cons
The native-layer challenges
✓ Native barrier to entry
✓ System overhead: WebView
✓ 3rd party native plugin ecosystem
✓ Maintenance, Security

21. A jumble of options
Results may vary
✓ Runtime: Cordova
✓ UI & Tooling: jQuery, KendoUI, Sencha
✓ CI/CD PhoneGap Build

22. Modern
Hybrid App
Development.

23. Cutting-edge Web Tech
Build complex front-end experiences with ease
✓ Frameworks: Angular, React, Vue, Stencil
✓ UI libraries: Ionic, Material-UI, Vuetify
✓ Modern JavaScript (ES6, TypeScript
✓ JavaScript everywhere: client, server, tooling, IoT
✓ SSR, SPA, PWA, JAMstack

24. Capacitor Native Runtime
Connect web-based apps to native functionality
✓ iOS / Android / PWAs
✓ “Code Once, Configure Everywhere”
✓ Modern tooling ⟶ easy project maintenance
✓ Web-focused APIs that embrace standards
✓ Backward-compatible with Cordova

25. PWAs out-of-the-box
Mobile-first? PWA-first is the future
✓ Go to market faster
✓ Higher user acquisition
✓ Install like native app
✓ Deploy to iOS and Android when ready

26. Mobile CI/CD
Hybrid enables DevOps superpowers
✓ Web: Deploy app logic changes and UI updates
✓ Native/Binary: Deploy directly to App Stores
✓ Fix bugs, run A/B tests, manage beta channels

27. Who’s building
hybrid apps?
Major brands. Millions of developers. Billions of dollars.
✓ Over 33% of Apple App Store & 50% Google Play Store *
✓ 2/3 of developers choose cross-platform/web-based approach over native **
* Appfigures ** Forrester

28. Sanvello
Award-winning mental health app

29. Demo

30. Ionifits: Human Resources
Hybrid App
Ionic Platform in-app feature tour
✓ Web, iOS, Android. Open source code → ionifits
✓ Native-quality UI Components via Ionic Framework
✓ Native functionality (Camera, File, Storage APIs) via Capacitor
✓ Cloud-based native builds and remote live updates via Appflow

31. Start building hybrid apps with:

32. Award-winning
experiences
✓ 100 mobile UI building blocks
✓ Mobile-ready out-of-the-box
✓ Fully customizable with your brand

33. A N D R O I D i O S
Adaptive
styling
✓ Platform-aware UI components
✓ Look-and-feel at home
✓ Up to date with latest UI trends

34. Full native
access
✓ Direct access to native SDKs
✓ Use plugins to access native features
✓ Security & storage solutions

35. Mobile CI/CD
✓ Convert web code to native
✓ Deploy to App Stores
✓ Push live updates to apps
✓ Fully automated CI/CD

36. Ionic Enterprise
Secure, reliable foundation for teams
✓ Premium, supported native solutions and plugins
✓ Mission-critical support
✓ Expert native guidance
✓ Maintained by a team you trust
→ ionicframework.com/enterprise

37. Addressing Hybrid Cons
 System overhead: WebView 🡒
 Native: barrier to entry 🡒
 3rd party plugin ecosystem 🡒
 Maintenance, Security, Risk 🡒
✓ Negligible: powerful device hardware
✓ Plugin development support →
✓ Capacitor Community →
✓ Ionic Enterprise →

38. Mobile
Delivery
Gap?

39. ✓ Use the web talent you have
✓ Get to market faster
✓ Reach any platform at a fraction of the cost
✓ Modern hybrid app stack
✓ Flexible, incremental adoption
The Ionic Platform
Complete platform for building hybrid apps

40. Get Started with Hybrid App Development:
Build your first app: ionicframework.com/start →
Enterprise solutions: ionicframework.com/enterprise →
Resources

41. </presentation>
Questions?