Ionic Interview Questions and answer : Coresumo

We will discuss Ionic Interview Questions and answers. Ionic is an open-source UI toolkit framework which is used for building performant, high-quality mobile apps, desktop apps, and progressive web apps. Using web technologies such as HTML, CSS, and JavaScript. Moreover it allows developers to build once and run everywhere. Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. created this framework in the year 2013. The first beta version of the Ionic framework was released in March 2014.

The Ionic framework mainly focuses on front-end user experience or UI interaction, which handles all the look and feel of your app. It is easy to learn and can integrate with other libraries or framework such as Angular, Cordova, etc. It can also be used as a standalone without a front-end framework using a simple script include.

So it is quite understood that such a skill set would be in high demands these days. Therefore, we have prepared a list of frequently asked Ionic Interview Questions and answer:

Below is Ionic Interview Questions and answers:

1.) What are the prerequisite for one to learn Ionic?

As we know, Ionic is built on top of AngularJS and Apache Cordova, one need to have basic knowledge about these technologies. You should also be familiar with HTML, CSS and JavaScript being a front-end developer.

2.) Describe the project structure of an Ionic 4 app.

Ionic 4 app has a structure similar to an angular application. e2e , node_modules, src folders will be present in root directory. Along with individual files like angular.json, ionic.config.json, package-lock.json, package.json, tsconfig.json, tslint.json . e2e/ folder has files for running end to end integration tests, node_modules contains all the dependencies. src/app/ folder contains most of the app code that you will be writing.

App folder essentially has app.module.ts, app.component.ts, app.component.html, app.component.spec.ts and app-routing.module.ts. any services, components, pages created can be stored in their respective folders. assets/ folder can be used to store images and other static content.

As its name suggests, angular.json hosts all of the angular settings like project name, root path for app folder, source root, paths for index file, main.ts, polyfills, assets folder path, css stylesheet paths, script paths, build settings etc. ionic.config.json can be use to set proxy settings for API to avoid CORS errors during development. package.json contains a list of dependencies and serve , build , test and e2e commands.

3.) Name some advantages and drawbacks of Ionic framework.

Some of rhe important advantages of this framework are as follows:

It Is Completely Free And it is one Of The best Open-Source software For developing Hybrid Mobile Applications.
Use of Angula Is by Default Embedded In The Ionic Framework.
It Is Mainly HTML, CSS, And JS and almost all developers are familiar with it.
Apps developed on Ionic are very maintainable and easy to update.

Few of the drawbacks or disadvantages of Ionic framework are:

Ionic Applications may not be as safe/secure as The Native Applications.
Ionic Apps are not as fast as Native Apps
The Ionic Apps may lack in native functionalities. In such cases, plugins have to be built.
Testing can be tricky because the browser does not always give correct information about the phone environment.

4.) What is Ionic CLI ?

CLI means Command Line Interface. Similar to Angular, Ionic CLI comes with a number of helpful commands that let you create a new project, add pages , components, providers , directives , pipes and so on. You need the CLI to run, emulate, debug, build and deploy your application.

5.) What are the Ionic Life Cycle Events?

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 fires 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 transition is about to begin and your page is not in the que to be push into view.

ionViewDidEnter: When the event fires, your page completely loads and completely available to view alongside the animation. In other words, this event fires when the component routing is over.

ionViewWillLeave: This event fires 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 fires 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 fires 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 fires after the ionViewDidEnter event. This kind of events fires to free up the memory resources.

As we have discussed important lifecycle events of ionic other than this there are some more lifecycle events which would prevent unauthorized access of users.

ionViewcanEnter: which fires before entering into a view, allows you to control whether the view can be control or not by the user.
ionViewCanLeave: which activates 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 replace with Routing Guards.

6.) What is a Hybrid Application?

Hybrid Application is one that both native and Web Applications. Native Applications are useful for a specific platform and installed on a computing device. Web Applications are develop for multiple platforms and not installed locally but made available through the internet. Hybrid apps are usually mention in the context of mobile computing. Moreover Hybrid mobile apps are develop with a combination of web technologies like HTML, CSS, and Javascript.

The key difference is that hybrid apps hosts inside a native application that uses mobile platform’s web view. Right now most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of Javascript APIs to access device capabilities through plugins which comprise of native code.

One of the ways to integrate google login in an ionic app is by using Cordova and Ionic Native plugins.

Run following two commands to install the plugins

ionic cordova plugin add cordova-plugin-googleplus –variable

REVERSED_CLIENT_ID=yourreversedclientid

npm install –save @ionic-native/google-plus

Add google-plus plugin to your app.module.ts file as below

import { GooglePlus } from ‘@ionic-native/google-plus’;

Add GooglePlus in providers list in app.module.ts.

Import GooglePlus plugin and make it available in your component’s constructor

import { GooglePlus } from ‘@ionic-native/google-plus’;

constructor( private googlePlus: GooglePlus) {

} Sample Code

this.googlePlus.login({})

.then(res => console.log(res))

.catch(err => console.error(err));

8.) What is Lazy Loading?

Lazy loading is a general process where we load that thing whenever we need them. The main idea behind this concept is that we do not need to load every page in the application when the application launches. In the previous versions of Ionic framework, there’s a suggestion to use @IonicPage decorator to lazy load your pages, but now in the latest version of Ionic (Ionic 4), we lazy load our Angular components with Angular routing.

We know that every Ionic component is a web component. And these components will lazily load only when they are accesses in the Ionic application. It means that the code for <ion-button> and <ion-tab> will only be loaded when they are accessed in the application.

9.) Name some of the famous apps built using Ionic Framework

Here are some of the popular apps with Ionic Framwork:

Sworkit: This app is for serving workout and fitness plans.
Cryptochange: It is an app, for cryptocurrency tracking.
justWatch: It is an app for streaming Search Engine Portfolio.

MarketWatch: It is an app for the stock market and business news.
Pacifica: It is an app for Cognitive Behavioural Therapy.
Untappd: This is an app for Social Discovery and check-in Network National Museum of African American History and Culture.

10.) Compare Ionic and Apache Cordova .

They are two popular technologies widely popular in the market for mobile app development. The combination of these technologies forms a development platform which is hybrid app development. Moreover both frameworks have a large community of passionate developers and are useful in large enterprises.

So these were some of the most frequent Ionic Interview Questions and answers

Ionic Interview Questions and answer