Top Cordova Challenges and How to Tackle Them

Top Cordova Challenges
And How To Tackle Them
March 2019

Today’s Speakers
Matt Netkow Senior Product Evangelist
Bryant Plano Solutions Consultant

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

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

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

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)

What We’ll Cover
1. JavaScript Libraries
2. Version Management
3. Cordova & Ionic Native Dependencies
4. Angular
5. Ionic CLI
6. Ionic Framework

JavaScript Libraries
"dependencies": {
"@angular/common": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/camera": "^5.2.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"cordova-android": "7.1.4",
"cordova-ios": "5.0.0",
"cordova-plugin-camera": "^4.0.3"
},
package.json package.lock.json
"dependencies": {
"@angular-devkit/architect": {
"version": "0.11.4",
"resolved":
"https://registry.npmjs.org/@angular-devkit/ar
chitect/-/architect-0.11.4.tgz",
"integrity":
"sha512-2zi6S9tPlk52vyqN67IvFoeNgd0uxtrPlwl
3TdvJ3wrH7sYGJnkQ+EzAE7cKUGWAV989BbNtx
2YxhRDHnN21Fg==",
"dev": true,
"requires": {
"@angular-devkit/core": "7.1.4",
"rxjs": "6.3.3"
}

‘npm install’ Defaults to Minor Version
* (asterisk): Latest major version - *x.x.x (aka wildcard, “Wild West”)
^ (carat): Latest minor version: ^1.x.x (Somewhat restrictive)
~ (tilde): Latest patch version: ~1.1.x (Bug fixes only)
(none): Exact version: 1.1.3 (Most locked down)

Tips for Version Management
Lock Version Explicitly Lock to Patch Version Add .npmrc File
1 2 3

Cordova Dependencies
Platforms
package.json - JavaScript
"cordova-ios": "5.0.0",
"cordova-android": "7.1.4",
config.xml - Native
<engine name="ios" spec="5.0.0" />
<engine name="android" spec="7.1.4" />
<platform name="android" />
<platform name="ios" />
Plugins
package.json - JavaScript
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
config.xml - Native
<plugin name="cordova-plugin-splashscreen"
spec="5.0.2" />
<plugin name="cordova-plugin-statusbar"
spec="2.4.2" />

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

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

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

Angular Dependencies
ng update
Update Tool
https://update.angular.io

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

Ionic Framework
1. Ionic 4: @ionic/angular, @ionic/vue, @ionic/react
2. Ionic 3: ionic-angular

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!

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?

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

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

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?

Use the Web Platform when possible: https://whatwebcando.today/
Do You Need One?

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

Capacitor: Cordova, Reimagined
Feature Cordova Capacitor
Supported Platforms iOS, Android, Windows
Phone
iOS, Android, Desktop
(Windows, Mac, Linux), Web,
PWA, and beyond!
Configuration style Abstracted (Config.xml) Per-platform (Info.plist,
AndroidManifest.xml)
Native platform control Limited Full control
Production ready? Yes, stable Soon
https://capacitor.ionicframework.comhttps://ion.link/capacitor-yt

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

Reality of OSS Cordova Development
Multiple plugin APIs
Multiple points of failure
Multiple maintainers
No support SLA

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

Top Cordova Challenges and How to Tackle Them

More Related Content

What's hot (20)

Similar to Top Cordova Challenges and How to Tackle Them (20)

More from Ionic Framework (9)

Recently uploaded (20)

Top Cordova Challenges and How to Tackle Them