Talently
Talently
Ionic

Ionic

The framework for cross-platform mobile applications with web technologies

Ionic is an open-source framework for building cross-platform mobile and desktop applications using standard web technologies like HTML, CSS, and JavaScript. It allows web developers to build native applications for iOS and Android with a single codebase, using its own mobile-optimized UI components and Capacitor as the native layer that provides access to device APIs.

TypeScriptAngularReactVueMobile

Market demand

Ionic has stable demand especially in web development teams that need to build mobile applications without adopting Swift, Kotlin, or React Native. It is popular in companies that want to reuse web knowledge for mobile projects without dedicated native teams.

Stable demand in web mobile developmentPopular in fullstack teamsAdopted in enterprise mobile applications

Technical requirements

Intermediate

Requires mastery of TypeScript and one of the compatible frameworks like Angular, React, or Vue. Familiarity with mobile development concepts like application lifecycle, stack navigation, and native API access is important for production projects.

Use cases

Real Projects

Ionic is used to develop:

  • Enterprise mobile applications for iOS and Android
  • Internal productivity applications for employees
  • PWAs with native functionalities through Capacitor
  • Cross-platform e-commerce applications

Types of Company

Ionic is adopted by:

  • Companies with web teams that need mobile presence
  • Startups with limited resources for separate native teams
  • Organizations with internal applications for employees
  • Digital agencies with cross-platform projects

Production Scenarios

Ionic is widely used in production environments such as:

  • Mobile applications with authentication and server data
  • Apps with camera access, geolocation, and push notifications
  • Applications with offline mode and synchronization
  • Installable PWAs with native capabilities on compatible devices

Scalability

Ionic offers multiple mechanisms to scale applications:

  • Capacitor for native API access with official and community plugins
  • Lazy loading of modules to optimize initial load time
  • Ionic Storage for local persistence with multiple backends
  • Simultaneous deployment to App Store, Google Play, and web as PWA

Advantages and Disadvantages

Advantages

A single codebase for iOS, Android, and web with native experience on each platform.

Compatible with Angular, React, and Vue allowing leverage of existing knowledge.

Capacitor provides access to native APIs with a modern and maintained JavaScript layer.

Disadvantages

Lower performance than pure native applications for graphics-intensive cases.

Native behavior may require platform-specific adjustments.

Dependency on the system's WebView which can generate inconsistencies between OS versions.

Comparison

Advantages of React Native

  • Components that compile to native views with better performance
  • Greater market adoption especially in tech companies
  • Better experience with complex animations and gestures

Considerations

React Native renders native components while Ionic uses WebView. Ionic is preferable for web teams that want to reuse code and knowledge directly. React Native is more suitable when native performance is critical or deeper device access is needed.

Basic questions

Ionic is preferable when the team has experience in web development with Angular, React, or Vue and wants to reuse that knowledge without adopting React Native's native component model. Also when the application is primarily a form or management interface where native performance is not critical.
A PWA is limited by the web APIs available in the browser. Ionic with Capacitor packages the web application as a native app with access to device APIs like camera, native push notifications, background geolocation, contacts, and biometrics that PWAs cannot fully use.
Ionic with Angular is preferable when the team already works with Angular or the project is a mobile extension of an existing Angular web application. Ionic with React is more suitable for React teams or when sharing logic and components with an existing React web application is desired.
Capacitor is the native layer that packages the web application in a native container for iOS and Android, providing a consistent JavaScript API for accessing device capabilities. It replaced Cordova with a more modern architecture, better TypeScript support, and native compatibility with Swift and Kotlin for custom plugins.
Ionic automatically detects the platform and applies the corresponding visual mode, following Human Interface Guidelines on iOS and Material Design on Android. This makes components have the expected native appearance on each platform with the same code, without additional configuration.
It allows web developers to build mobile applications with the same technologies they already master. Learning Swift or Kotlin, Xcode or Android Studio is not needed for most of the development. The build process for stores is simplified with tools like Ionic Appflow.
Ionic uses a stack navigation system similar to native applications where pages are stacked and can be navigated back. IonRouterOutlet manages native animated transitions between pages. It is combined with React Router, Angular Router, or Vue Router depending on the chosen framework.
In internal enterprise applications with forms and server data, productivity tools with primarily informational interfaces, field applications for employees, or any application where visual experience is not the main differentiator and development speed and maintaining a single codebase are priorities.

Technical questions

Using the @capacitor/push-notifications plugin that provides a unified JavaScript API for iOS and Android. APNs certificates are configured on iOS and Firebase Cloud Messaging on Android, permissions are requested from the user with requestPermissions, and listeners are registered to receive tokens and messages both in the foreground and background.
Using Ionic Storage or Capacitor Preferences to persist data locally, Capacitor's Network plugin to detect connectivity changes, and a synchronization strategy that queues operations performed offline and syncs them with the server when connection is restored.
IonModal presents content overlaid on the current page maintaining context, suitable for creation forms, details, or temporary actions. Navigation to a new page adds an entry to the navigation stack with a full transition, suitable for main navigation flows where the user can go back.
Using lazy loading of modules in Angular or React.lazy in React to load only necessary pages at startup, optimizing images with compression and modern formats, minimizing third-party JavaScript, and using Capacitor Splash Screen correctly so the initial wait has an appropriate visual experience.
By defining the TypeScript interface of the plugin with methods and types, implementing the native code in Swift for iOS and Kotlin for Android that executes the native functionality, and registering the plugin in Capacitor. The JavaScript code calls native methods through Capacitor's bridge layer transparently.
Using the @capacitor-community/biometric-auth plugin that abstracts Face ID on iOS and fingerprint on Android. Biometric availability is checked with isAvailable, authentication is requested with verify, and the result is handled to allow or deny access, complemented with a fallback to PIN or password.
Using Ionic's Platform service to detect the current platform and apply specific logic when necessary, Capacitor getPlatform to distinguish between iOS and Android in JavaScript code, and CSS custom properties with the .ios and .md prefixes that Ionic adds to the body to apply platform-specific styles.
By configuring App Links on Android and Universal Links on iOS with the corresponding verification files on the server, using the @capacitor/app plugin to listen for appUrlOpen events in the application, and programmatically navigating to the correct route when the app is opened from an external URL.

Advanced questions

Using a monorepo with a shared business logic library independent of the framework, service abstractions that have different implementations for web and Capacitor, and shared UI components where Ionic and the web library are compatible. Business logic, models, and HTTP services should not have platform dependencies.
When performance becomes a real measurable bottleneck with profiling, when the application requires complex graphics or animations with constant 60fps, when access to very specific native APIs without available plugins is needed, or when the team grows and can dedicate developers to native development.
Using Ionic Appflow Live Updates or Capawesome Updater that allow updating the application's JavaScript, HTML, and CSS code without going through the store review process. The update channel and update strategy are configured and the app downloads and applies updates automatically while respecting app store policies.
By automating unit tests with Jest and end-to-end tests with Cypress or Playwright for the web version, configuring Ionic Appflow or GitHub Actions for automatic native binary builds, running tests on real devices with services like BrowserStack, and automating distribution to TestFlight and Google Play Internal Testing.
By requesting permissions only when the user attempts to use the functionality that requires them, explaining the reason before the system prompt to improve acceptance rates, handling the rejection case with alternative options, and guiding the user to settings if they need to reactivate a previously denied permission.
By creating abstractions of Capacitor plugins behind services or interfaces that allow substituting them with mocks in the test environment. Unit and integration tests use the mocks while end-to-end tests on real devices or emulators verify behavior with the actual native plugins.

Common interview mistakes

Choosing Ionic without evaluating React Native or presenting Ionic as always superior reflects a lack of judgment. Articulating when Ionic's WebView model is sufficient and when React Native's native performance justifies its greater complexity is expected.
Presenting Capacitor as a minor update to Cordova reflects not understanding the architectural difference. Capacitor has a different philosophy with better support for TypeScript, native Swift and Kotlin, and does not require a Cordova project as a base.
Requesting all permissions at app launch or not handling the rejection case reflects inexperience developing mobile applications in production. Correct permission management is a requirement for store approval and for a good user experience.
Not knowing that Ionic automatically adapts the appearance of its components to each platform reflects not having worked with Ionic on real devices. This feature is one of the framework's main values and its lack of knowledge raises questions in interviews.
Proposing over-the-air updates for code that modifies the app's main behavior without knowing App Store and Google Play policies can result in app rejection or removal. Not knowing these restrictions reflects little experience publishing Ionic applications in production.
Still proposing Cordova for new Ionic projects without knowing Capacitor reflects being out of date. Capacitor has been the recommended solution since Ionic 5 and its lack of knowledge in current interviews is a clear sign of not following the ecosystem.