Ionic Interview Questions and Answers

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript). Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). Currently, Ionic Framework has official integrations with Angular and React, and support for Vue is in development.

Since its creation, Ionic had been dependent on Angular framework components, as a tool for Angular users. With the fourth version, Ionic became framework-agnostic, meaning its independent of Angular. The change was made possible thanks to the utilization of web components and the promotion of Ionic’s CLI. Web components are sets of features that use standard APIs natively supported in nearly all mobile browsers today. Thus, those can be deployed on any mobile platform or used to create desktop apps with Electron framework, or PWAs. The usage of web components also allows for the utilization of any frameworks with Ionic.

At the end of the day, Capacitor has the same type of goals as Cordova. Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. It was created -and is maintained- by the Ionic Framework team. We can say that Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap. For the majority of plugins today, Capacitor has full backward compatibility. Capacitor treats the native projects that are generated such as iOS, Android, Electron, as code that you actually check in and maintain. it makes it easier to add custom native code to them. You just need to open the project into its native IDEs and make the changes you need without having to do this through a plugin. Capacitor is pushing us towards using the platform’s specific IDE; Xcode for iOS and Android Studio for Android. This means no longer we’re going to have an abstracted layer, which today for Cordova is config.xml. So, the benefit here is that by not having that abstraction over the native layers, it gives us far more control and visibility into the native project changes and overall leads to a better experience maintaining apps over time. The Ionic Team behind Capacitor ensures that by embracing the native platform IDEs it will just lead to a better experience for everyone. The main change for plugin development and maintainability is building them with more modern capabilities, as frameworks on iOS and Libraries on Android. Capacitor registers and exports all JavaScript for each plugin based on the methods it detects at runtime. This means that all of your code is available right away at runtime when your app starts out. Cordova typically gets installed globally on your machine while the Capacitor CLI gets installed locally into each project.

Ionic provides a collection-repeat directive that renders only visible items in the DOM. So even if the list is huge, like 5000 in our example, only items visible in a viewport are rendered. Thus, scroll performance is not affected.

Some of the differences are:

1. Web Components - Ionic V4 was completely rewritten to use WebAPIs and each component is packaged as a Web Component. Web Component defines as a set of Web APIs that allow you to create HTML tags that are reusable in nature.
2. Compatibility with other Frameworks - Since it's inception Ionic Framework was built using Angular but Ionic v4 is completely independent of the base framework.
3. Navigation - Instead of NavController and ion-nav, Ionic4 uses @angular/router
4. Life cycles of navigation (LifeCycles) - The lifecycles that were used in Ionic 3 as ionWillLoad will no longer be used in Ionic 4. It uses Angular life cycles such as ngOnInit and ngAfterViewInit.
5. routerLink - In Ionic 3 the event (click) is used to navigate between pages from the HTML. In Ionic 4 we will use the routerLink , as it is used in the Angular applications.
6. Modules - It is not necessary to import the pages and services in the app.module.ts file.

The new features basically revolve around performance, build time improvements, multi framework compatibility, new documentation. The newer update provides a tool through which it can be easily migrated.

1. Web Components: Ionic has moved to a web component for every single component. Web component is a set of web platform APIs which allows developers to build new customized and reusable HTML tags for web apps and web pages. Web components forward its work process to browsers without the need to write plenty of code making a significant improvement in startup and load time and essential for building high- performance apps.
2. Capacitor: It is a cross-platform API and code extension layer which eases up to call native SDKs from web code and write custom native plugins which are required for the app. It also entails PWA support to enable the developer to write one app and launch it to the app stores.
3. Stencil: Its a new web component compiler developed to build the standards which are compliant the web servers. It makes use of additional API like virtual DOM, Typescript, JSX, async
4. ion-Backdrop: These are full-screen components which overlay over other components. They are placed on top of other components so it can dismiss it.

One of the important areas which would majorly affect the performance of the app is network calls. It should be tuned to the highest accuracy to make the app perform better.

1. If two different components trying to make an HTTP call to the same URL means, it is better to make a single call and send data to both the components, rather making two different HTTP calls. The provided request is done in a gap of few seconds.

2. Best way to achieve this is using a **root component. **All the components making an HTTP call should go with a common **root component. **Which keeps track of the URLs that have been requested a few seconds back, if same is requested again, then it can add a minimum delay and once response comes, it can send it to both the components.

Hybrid apps are developed using web technologies like HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova. The apps are shown in its own embedded browser, like UIWebView in iOS and WebView in Android (not Safari or Chrome). This allows you to use any web-native framework for mobile app development.

Unfortunately, no. Ionic (1) at a very high-level is essentially just a wrapper & directive/component library for AngularJS (1). In that same regard, Ionic 2 is built in the same way, utilizing all the benefits of Angular 2+. Ionic 2 breaks away from being tied to the DOM in the browser, by using angular 2 which is the reason for the massive change between ionic 1.x and ionic 2.x. ( Angular 2.x architecture is not tied down to the DOM unlike the Angular 1.x ).

Ionic v.1 applications are built using AngularJS. Angular has a rich set of test libraries and frameworks such as Jasmine and Karma test runner. These frameworks can be used to write unit tests for Ionic applications. Also, ionic-CLI provides live reload feature so the application can be tested in the browser. For example, the ionic serve command can be used to load the application in any browser. Thus, we can use Chrome Developer Tools or Mozilla Firefox with Firebug to debug and inspect Ionic applications.

Ionic v.1 uses AngularJS and UI-router. It means you can use Angular services or UI-router’s state resolve to pass data from one view to another. Since Angular services are singletons, data stored in services can be accessed across other Angular controllers. As mentioned, UI-router provides a resolve configuration. For example: $stateProvider

.state('todos', {
  url: '/todos',
  controller: 'TodosCtrl',
  templateUrl: 'todos.html',
  resolve: {
    todos: function(TodosService) {
      return TodosService.getTodos()
    }
}
})

One advantage of resolve over stateful services is better testing: as resolve injects dependencies in the controller, it is easy to test them. When using Ionic v.4 you have 3 options:

1. Using Query Params (bad)
2. Service and Resolve Function (legit)
3. Using Router Extras State (new since Angular 7.2)
openDetailsWithState() {
  let navigationExtras: NavigationExtras = {
    state: {
      user: this.user
    }
};
this.router.navigate(['details'], navigationExtras);
}

Apache Cordova is an open source framework that enables web developers to use their HTML, CSS, and JavaScript content to create a native application for a variety of mobile platforms. Used for hybrid development in HTML, CSS, and JavaScript, Ionic allows to quickly create powerful and beautifully designed mobile apps that can be deployed through Cordova. Ionic wraps all Cordova commands and lets you work with any Cordova plugin or additional package. Along with it, you have the following three advantages over Cordova-only development:

1. Slick UI and UX - Ionic is a perfect fit for the easy and fast development of a simple but trendy design with everything you may need already included in the framework kit.
2. A More Convenient Development Process - The ‘serve’ feature is present in both Ionic and Cordova and allows developers to access an HTTP-server to test the application code in a desktop browser. However, working with ‘cordova-serve’ is rather inconvenient as it doesn’t let you launch the test from your initial www-folder and forces you to create an app build first.
3. Higher Performance of the Final Product - Compared to Cordova-built apps, the Ionic code creates more powerful and higher performing applications. With jqLite, a fraction of jQuery, it takes a minimal DOM manipulation, and native hardware acceleration is enough. Ionic optimizes animation effects and tunes up the GPU work to achieve the best processing time.

Ionic Native is a TypeScript wrapper for Cordova or PhoneGap plugins which provides adding any native functionality to the Ionic mobile app. We can implement any of the Cordova plugins community in an Ionic application easily with the help of Ionic Native. One of the functionalities of an Ionic native is to write code better. We can integrate Cordova plugins without Ionic Native as well but Ionic Native add types to these Cordova plugins using wrapper classes and allow us to use intellisense and code suggestions. This prevents from running into errors and write codes quicker and better. Plugins are added frequently to the Ionic Native directory.

In the Ionic framework, observables are not specific to Ionic or Angular and they are provided with RxjS library. Observables are like a commitment but a lot of things can be worked out from it. It can deal with multiple values at a time rather than just resolving one value at that time. It can also be used to manipulate the data which is associated with it. Observables cannot be executed until and unless they are subscribed to. Various operations can be applied to observables for modification and returning to a new one. We can also create our own observable. The observable pattern is combined into one with the help of the subject which is preferred for simple implementations.

The easiest method to store key or values and JSON objects are called as storage in the Ionic framework. In these various storages, engines are used. While in case of a web application, the storage will tend to use IndexedDB, WebSQL, and local storage. Various storages are available in ionic framework. Some of them are as follows: HTML local storage Cookie and session storage indexedDB WebSQL PouchDB

Webservice/API storage Cordova storage

ionic prepare copies all files from the www folder into the target platform’s www folder. ionic build also does this, but also builds the app’s source code so that it can be run on a simulator/emulator or a device.

Ionic does not provide a camera API out of the box. However, since Ionic uses plugins architecture, and because it is based on Cordova, we can use Cordova plugins in our application. Ionic team provides a set of Cordova extensions with Angular wrappers, and they can be found at ngCordova. To use Cordova plugins, we need to install the plugin using Ionic command install . In some cases, we will additionally need to add the plugin’s Angular module to your Angular application too. To use a mobile phone’s camera in the Ionic application, we can call the camera API by using cordova-plugin- camera that is hosted on GitHub. This plugin defines a global navigator.camera object, which provides an API for taking pictures and for choosing images from the system’s image library.

Ionic provides platform classes: when the application is loaded, Ionic adds CSS classes to the tag. For example, on iOS devices, Ionic adds platform-ios class to tag. Ionic also adds OS version classes such as platform-ios8 (for iOS 8) and platform-android4_4 (for Android 4.4).

By default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached,

its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained. Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views, and not only can this be configured, but apps can also explicitly state which views should and should not be cached. Caching can be disabled per view by using cache: false in UI-router’s state config. The $ionicConfigProvider can be used to set the maximum allowable views which can be cached, but this can also be use to disable all caching by setting it to 0.

As Ionic behind the scene builds HTML5 based applications, you can use localStorage and sessionStorage API to persist data on the mobile phone. However, since localStorage can only store strings, objects need to be stringified before saving. Also, it is important to mention localStorage has size limit around 5MB.

PhoneGap is a library that exposes native mobile phone functionalities as JavaScript API. When Adobe purchased PhoneGap, its open source core was donated to the Apache Software Foundation under the name Cordova. In the beginning, there was almost no difference between Cordova and PhoneGap. Although, over the years of development, Adobe started adding a proprietary set of the services to PhoneGap. Today, it is safe to say PhoneGap is Cordova plus extra Adobe services. Ionic uses Cordova, not PhoneGap for its core tools. Beside native mobile phone functionalities, Ionic gives structure and code scalability to JavaScript applications by using AngularJS (Angular, React and Vue for IOnic 4). It also provides a set of Angular directives and components to speed up application development.

The most obvious advantages are: Ionic framework builds hybrid applications using web technologies. It means web developers can easily build mobile applications too. Also, because it uses JavaScript, almost the same codebase can be used to build both iOS and Android applications. Development cost is less compared to native iOS and Android applications. Ionic framework is excellent for quick application ideas prototyping. Some of the disadvantages are:

It is not suited for high-end graphics dependent applications or games. Performances are not as good as native applications, namely animations, scrolling, and network operations. As mentioned, JavaScript animations are not as performant as native animations. However, there are JavaScript libraries, like tweenMAX, which provide decent animation performance on the devices.

Ionic apps are built using the languages of the web: HTML, CSS, and JavaScript. Thus, if you know how to build a basic web app, you already know how to build with Ionic. With Ionic, you can deploy a native iOS or Android app, native desktop app, or web app, all from a single, shared codebase. When running on mobile, Ionic runs inside a native container using Cordova or, more recently, Capacitor, which enable full access to any native device features or APIs. The UI of your Ionic mobile app runs in a WebView, which is effectively a headless browser that is invisible to the user. In a desktop implementation, Ionic runs inside a native desktop container like Electron, or directly in any mobile or desktop browser as a Progressive Web App. Ionic Pros: Code once, run everywhere*. Angular + Typescript are very mature. React + Vue for Ionic V.4 Reactive UI. Huge compatibility. Lots of native plugins. Lots of Angular packages. Greater user base. Mature Tooling. Ionic Cons: Not native. Embedded browser apps. Less performance (Not really noticeable if your code is good). Big learning curve if you have no web development experience. When building for mobile, Flutter uses the Dart compiler to convert your Dart code into native machine code that will run on the device platform, along with a custom rendering engine to display your UI inside a mobile app. Flutter does not use the native UI elements, like you would find in React Native, nor does it use Web Components like Ionic. Instead, Flutter offers its own library of UI Widgets. Flutter Pros: Open source Very fresh and vibrant community. Code once, run on iOS and Android. Native performance, Compiled into Native C Reactive UI. Great Tooling for both VSCode and Android Studio. You can interact with native SDKs and use native dependencies. Flutter Cons:

Need to learn Dart Non mature user base Small amount of packages Does not support 32-bit iOS devices Google has a bad history with product loyalty Self-contained ecosystem from scratch

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins. With Ionic Capacitor, you create the app, without using any cordova imports, not even cordova.js, instead Capacitor’s own native plugin repository imported as @capacitor/core. Capacitor can also be used without the Ionic framework and it’s backward compatible with Cordova.

When building hybrid applications, security is a common issue, as long as your app can be reverse engineered. Since version 4, Ionic CLI does provide built-in code uglification — a common technique of making the code difficult to read by hackers. But you also need to know that if you are using Angular CLI or older versions of Ionic, there is no code uglification going on. Your developers will have to uglify the code on their own. There are a lot of ways to compromise what’s happening with your mobile app or PWA, like a man-in-the- middle attack. Why does it matter? Well, because basically, your Ionic application is a website, running on the device. The important takeaway is that Ionic communicates with the backend using usual HTTP calls. So, you also want to use the security measures on your Ionic app that you use to protect your website, like using HTTPS connection instead of the HTTP.

It’s easy to forget, but an Ionic application and any other Cordova application is a website. It includes an index.html file that includes HTML, CSS, and JavaScript code. In security terms, there isn’t much difference between a normal website running on the web, and a Cordova application running on a device. There are a few key things that I feel are important to know and understand when building applications with potential security concerns:

1. Treat the codebase like a public website - don't hardcode secret API keys or passwords
2. Move sensitive operations to a server - outsource any sensitive operations to the server (where people, as long as your server is secure, can’t see what you’re doing). Your application can then make an HTTPS request to your server via some API to retrieve the result of that operation.
3. Communicate over HTTPS - Traffic that is sent over HTTP can be intercepted, read, and altered by attackers. Traffic that is sent over HTTPS can not be read (they will only be able to see encrypted data) or altered by attackers.
4. Don’t store sensitive data in local storage - gaining access to values in local storage would first require the attacker to have physical access to the device, or to exploit some other vulnerability (e.g. through XSS), so it is not as if local storage values are publicly available for everybody to snoop around, but there are some concerns here if the security of the data stored is important.
5. Never store a user’s password in your application - Instead, you can use some kind of token like a JWT that you can store in local storage to authorise the user. A JWT does not contain any sensitive information, it just identifies the user, but a JWT can not be tampered with (if it has been, the server will reject it) so if a user has a JWT that identifies them as a particular user, we can automatically log them in.
6. Consider using an authentication service - There are many options out there that can handle authentication for you like the various social providers like Facebook, GitHub, or Google.
7. Use content security policy

Ionic framework uses the default web browser available for the device to run its hybrid application. Older versions of Android devices (4.0-4.3) use Android’s default browser, which has significantly less performance and standards compliance than the modern Chrome browser. One way to resolve this issue is to use crosswalk along with Ionic framework. Crosswalk allows you to package a modern Chrome webview along with Ionic application, so an application does not have to rely on native Android browser. The end results are much better performances and modern web API across all Android versions.

Since Ionic 1-3 are majorly dependent on Angular. The Compilation options that were available for Angular were available for Ionic too.

1. **JIT **stands for Just in Time compiler. It is a type of compilation where a compilation of the app happens in the browser at runtime.
2. **AOT **stands for ahead of time compiler. It is a type of compilation that compiles the app at build time.
3. If we just use **ionic cordova build platform (android or ios) then it will be JIT if we use prod flag I, E ionic cordova build platform --prod **then it will use AOT.

An app that is built with JIT is slow as compared to AOT. But compilation time required for AOT is more than JIT. So for a quick checks use JIT and for a final deployment use AOT.

Ionic pages are usually converted into an Angular component as we are aware Ionic frame is built on top of Angular. Just like Angular frameworks has its lifecycle hooks which we follow during the development of Web Application. Also, lifecycle events for ionic framework help in capturing and performing some specific task.

**ionViewWillEnter: **This event is fired when component routing is about to animate into view. i.e
ionViewWillEnter() lifecycle function signifies that all the process to make your page in full view and

transitioned in is about to begin and your page has been queued to be pushed into view.

**ionViewDidEnter: **When this event is fired, your page is completely loaded and completely available to

view alongside the animation. In other words, this event is fired when the component routing have finished. ionViewWillLeave: This event is fired when your page gets the information of getting out from the active state of the page but, it is still in the active state only. In other words, we can say that this event is fired when the component routing from is about to animate. This kind of event is useful to start preparing for the things for the next view before navigating. ionViewDidLeave: This event is fired when the component routing to has finished animating. Now, this event indicates that your ionic page is no longer in focus and leave the active state of the page. Also, this event is fired after the ionViewDidEnter event. This kind of events is fired to free up the memory resources. There are some more lifecycle events which would prevent unauthorized access of users. ionViewcanEnter: which is fired before entering into a view, allows you to control whether the view can be controlled or not by the user. ionViewCanLeave: which is activated before leaving a view which allows you to control whether the view can be left or not by the user. In Ionic 4 the above mention two events can be replaced with Routing Guards.