Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Top Cordova Challenges and How to Tackle Them

278 visualizaciones

Publicado el

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.

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Top Cordova Challenges and How to Tackle Them

  1. 1. Top Cordova Challenges And How To Tackle Them March 2019
  2. 2. Today’s Speakers Matt Netkow Senior Product Evangelist Bryant Plano Solutions Consultant
  3. 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. 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. 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
  6. 6. #1 Dependency Management
  7. 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)
  8. 8. What We’ll Cover 1. JavaScript Libraries 2. Version Management 3. Cordova & Ionic Native Dependencies 4. Angular 5. Ionic CLI 6. Ionic Framework
  9. 9. 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": " 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" }
  10. 10. ‘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)
  11. 11. Tips for Version Management Lock Version Explicitly Lock to Patch Version Add .npmrc File 1 2 3
  12. 12. 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" />
  13. 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. 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. 15. Ionic Native Dependencies Ionic Native: TypeScript “Wrappers” around Cordova plugins 1. Review Cordova GitHub page for Issues, Releases a. Example: 2. Update to latest of both Ionic Native and Cordova plugins if possible 3. Review Release Notes a. See 4. Cordova Plugins: If not using Releases tab, then check
  16. 16. Angular Dependencies ng update Update Tool
  17. 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
  18. 18. Ionic Framework 1. Ionic 4: @ionic/angular, @ionic/vue, @ionic/react 2. Ionic 3: ionic-angular
  19. 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. 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?
  21. 21. #2 Conflicts & Build Failures
  22. 22. Who’s the Culprit?
  23. 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. 24. Research the build error(s) by checking out these resources: 1. Ionic Customer Success Knowledge base: 2. Google & StackOverflow: Many errors are documented online 3. Ionic Forum: (Ionic Native category) 4. Ionic Worldwide Slack: Troubleshooting Failed Builds
  25. 25. Demo Time!
  26. 26. #3 Bugs & Feature Requests
  27. 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?
  28. 28. #4 Finding the Right Plugin
  29. 29. Use the Web Platform when possible: Do You Need One?
  30. 30. Start with Ionic Native ● OSS Cordova plugins wrapped in TypeScript ● See library at 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
  31. 31. Ionic Solutions for Teams
  32. 32. 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.com
  33. 33. Ionic Enterprise Edition
  34. 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. 35. Reality of OSS Cordova Development Multiple plugin APIs Multiple points of failure Multiple maintainers No support SLA
  36. 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
  37. 37. </presentation> Questions?