Ionic Framework Best Practices

Synopsis

Ionic's family of products makes it easy for developers to build high-performance mobile and web applications. However, like any set of tools, they work best when they are used in the most optimal manner possible. By following a set of best practices, you can use the Ionic set of products to develop applications that are successful and are maintainable over time. We have found adhering to the following five practices have the greatest positive effect on achieving this goal.

• Favor Capacitor over Cordova
• Keep native dependencies up to date
• Use native features sparingly and intentionally
• Embrace mobile styling
• Perform periodic 3rd party reviews

Favor Capacitor Over Cordova

Capacitor and Cordova take the same place in the application stack. They both provide a structured mechanism to allow your web application to access native functionality. Capacitor, however, offers several key advantages over Cordova: Ionic support, native project management, plugin management, and version management.

Native Project Management

• Xcode and Android Studio projects become source artifacts that you have complete control over.
• There is no more need to use fragile build hooks or confusing configuration abstractions in order to modify the native projects.
• The generated native projects work out-of-the-box for most applications. However, you control the structure and content of the native projects, allowing for a much greater degree of customization when required.

Plugin Management

• Common native functionality is handled via Capacitor's core APIs, resulting in no plugin being required to access the most common native functionality
• Multiple strategies exist in order to expand access to native functionality
  • Capacitor plugins
  • Adding custom Capacitor plugins directly to the native projects
  • Cordova plugins (Capacitor has a built in Cordova compatibility layer)

Version Management

• Core APIs are upgraded as Capacitor is upgraded
• Different applications can easily use different versions of Capacitor

Keep Native Dependencies up to Date

Things change often in the native space. Apple and Google release new versions of the their mobile operating systems on a regular basis. With each new release, there are new requirements that need to be supported by the native layer. For this reason, it is very important to keep all portions of your Capacitor or Cordova ecosystem up to date.

Do not fall too far behind on your Capacitor and Cordova versions, especially with the versions of the plugins.

Use Native Features Sparingly and Intentionally

Maintaining a lot of plugins increases the maintenance costs of your application, so your best course of action is to reduce the number of them you are using. Here are a few tips to help manage the use of native features:

• Use Capacitor instead of Cordova. The most commonly used native features are represented by Capacitor APIs, which means the only dependency you need to manage for those features is Capacitor itself.
• Never look at a feature and say "that is cool, we should figure out how our app can use that." Rather, always look at it in the other direction: Our users would like our app to do X. How do we do X?
• After determining that your user's need a specific native feature, research if that feature can be accomplished via Web APIs. The number of Web APIs supporting native features has expanded greatly over the last few years. Check sites like https://whatwebcando.today/. If a feature is supported via Web APIs in both Chrome and Safari then using the Web API may be a viable option in your application, skipping the need for a special plugin completely.

Embrace Mobile Styling

The Ionic Framework provides a lot of native styling for the components. As a result, Ionic Framework applications look like iOS applications on iOS and look like Android applications on Android. The same holds true for the way animations behave and so on.

We suggest embracing this styling in your own application and minimizing any styling you may do to interfere with this. The idea here is to strike a balance between the native styling and the branding that is needed in your application.

Perform Periodic 3rd Party Reviews

We suggest performing two different types of third party reviews on a regular cadence that makes sense for your application.

• Code Reviews
• UI/UX Reviews

Ionic can perform both of these types of reviews for you.

Code Reviews

Best practice states that your developers are performing reviews of each other's code before it gets committed to the master branch and released. Often, that does not go far enough in ensuring your application is maintainable over time. The reason for this is that each of these developers are intimately familiar with the current code base and used to all of the blemishes that exist in it. What happens when they haven't looked at the code for six months to a year?

The best way to ensure your application's code is maintainable is to have it reviewed by an objective third party that is not familiar with the code base. Since a third party is not familiar with the code and has no vested interest in the current architecture, they are in a better position to determine if the code is maintainable and follows commonly accepted industry best practices.

UI/UX Reviews

Your developers and QA testers are used to the application. They know its quirks. They understand how it was designed and how to use it. However, this is not an accurate representation of how your users will view the application. Will they find it both beautiful, usable, and useful? Are features in your application discoverable by your users? These types of questions are best answered by putting your application in the hands of UI/UX experts who are not intimately familiar with your application and its design.