One of the best things about hybrid development is the ability to develop native-powered apps without being a native mobile expert. Thanks to the open source Cordova project, we can access native device features like Camera, GPS, and more, with basic JavaScript.
But, Cordova can also be one of the most challenging.
In this webinar, Matt Netkow and special guest Bryant Plano (Ionic Customer Success team) cover the top Cordova challenges and the best strategies to overcome them. Learn how to tackle dependency management, address failed builds, craft ongoing maintenance strategies, and more.
https://ionicpro.wistia.com/medias/74n19v7ods
3. Today’s Agenda
Intro: What is a Hybrid App? Cordova? Ionic?
Tips for Addressing Top Cordova Challenges
1. Dependency Management
2. Build Failures
3. Native Bugs & Missing Features
4. Finding the Right Plugin
Live Demo
4. What is a Hybrid App?
HTML, CSS, JavaScript
Runs in a “browser” WebView
Wrapped in native app shell
Access device capabilities via plugins
A native app!
Cordova/
PhoneGap
5. Ionic Framework
Mobile-ready UI library that works everywhere:
any platform, any device, any framework.
➔ Build for iOS, Android, Electron, PWAs, Web
➔ One codebase across all platforms
➔ Use basic web skills: HTML, JS, CSS
➔ Full access to Native APIs and Plugins
7. Project Dependencies
Incompatibilities may exist between each
layer of the stack:
- Web Framework (Angular, Vue, React)
- 3rd Party JavaScript Libraries
- Ionic
- Cordova Platforms
- Cordova Plugins (and Ionic Native)
13. Tips for Cordova Management
1. Use the CLI instead of directly editing config.xml and package.json
a. ionic cordova [command] - better experience w/additional
functionality
2. Upgrade safely: Remove, then re-add plugin.
a. ionic cordova plugin remove cordova-plugin-camera
b. ionic cordova plugin add cordova-plugin-camera
3. Use explicit versions: ionic cordova plugin add
cordova-plugin-camera@4.3.2
14. Tips for Cordova Management
5. Restore platforms and plugins
a. ionic cordova prepare restores platforms and plugins from
package.json and config.xml
b. Version to install is taken from package.json or config.xml, if found
c. In case of conflicts, package.json is given precedence over config.xml
6. Use Ionic CLI commands
a. ionic doctor: Detects common issues and suggests steps to fix them
b. ionic repair: Remove, regenerate all dependencies
15. Ionic Native Dependencies
Ionic Native: TypeScript “Wrappers” around Cordova plugins
https://ionicframework.com/docs/native
1. Review Cordova GitHub page for Issues, Releases
a. Example: https://github.com/apache/cordova-plugin-camera
2. Update to latest of both Ionic Native and Cordova plugins if possible
3. Review Release Notes
a. See https://github.com/ionic-team/ionic-native/releases
4. Cordova Plugins: If not using Releases tab, then check
17. Ionic CLI
Ionic CLI is NOT Ionic Framework
1. Update CLI:
a. npm install -g ionic
2. Update Framework (aka your Ionic project):
a. npm install @ionic/angular@latest
Ionic version numbers do not match across the board (ionic info):
1. Ionic CLI: 4.12.0
2. Ionic Framework (@ionic/angular): 4.1.2
3. Ionic Native (@ionic-native/core): ^5.2.0
19. Dependency Strategy: Small Changes
Go one step at a time
- Why? Reduce the surface area for issues to arise
- Separate branches, one for each layer of the stack
- Ionic
- Cordova Platforms
- Cordova Plugins (and Ionic Native)
- Web Framework (Angular, Vue, React)
- Additional 3rd Party JavaScript Libraries
Test, test, test!
20. Dependency Strategy: Update Often
The most stable apps are routinely updated, especially at the native layer
- Security fixes
- New Features
- Improved performance
When should I update?
- Research: Official blogs and news
- Nature of the update: Shiny new feature or critical security fix?
- Timing: Where does it fit in against Team/Project goals?
23. Plugins conflict with each other when they share underlying native dependencies
- More than one plugin trying to access the same native code
- Example: Google Play Services version
- Google Maps: GPS v24.2 but Firebase wants GPS v27.1 and Google Auth wants...
Tip: Ensure using only one plugin per specific feature/functionality
- Example: Push Notifications
Cordova Plugin Conflicts
24. Research the build error(s) by checking out these resources:
1. Ionic Customer Success Knowledge base: https://ionic.zendesk.com
2. Google & StackOverflow: Many errors are documented online
3. Ionic Forum: https://forum.ionicframework.com (Ionic Native category)
4. Ionic Worldwide Slack: https://ionicworldwide.herokuapp.com
Troubleshooting Failed Builds
27. Plugins are open source, but… they’re built with native code
What can you do?
1. File an issue on GitHub, contact the maintainer directly
2. Hire native developers
3. Contract out (agencies, contractors, consultancies)
Ionic has a solution for this...
How to Update/Fix OSS Plugins?
29. Use the Web Platform when possible: https://whatwebcando.today/
Do You Need One?
30. Start with Ionic Native
● OSS Cordova plugins wrapped in TypeScript
● See library at https://ionicframework.com/docs/native
Search the OSS community
● Core plugins are named “cordova-plugin-X” under Apache GitHub repo
● Look for official plugins, backed by a company
○ Review maintenance record
○ Recent, consistent commits?
○ When was the last release?
○ High issue count may be a concern, may not be
Tips for Picking a Plugin
34. Native Bridge
Easy access to native device features and third-party
apps.
➔ Core library of native device functionality
➔ Integrations with popular third-party apps
➔ Proactive security and maintenance updates
➔ Support SLA backed by Ionic
35. Reality of OSS Cordova Development
Multiple plugin APIs
Multiple points of failure
Multiple maintainers
No support SLA
36. Enterprise Edition: One API, Any Connection
One plugin API
Fully maintained by Ionic
Easy access to device features
Pre-built & custom integrations
Works across mobile, desktop, PWA