Ionic

Ionic is a front-end UI framework which comes with Native-styled UI elements and layouts which is very similar to our Native SDK. Since ionic is basically a HTML5 based mobile application framework so it is used for building hybrid mobile applications for Android & iOS Platform. Native application behaviour can also be acheived by using Cordova or PhoneGap as its native wrapper.

Let us discuss some of the commonly asked interview questions about ionic framework.

1.What is Ionic Framework? Ionic is open source front-end UI developement framework, used for developing hybrid mobile application using HTML5 SDK.

2.What are the platform ionic supports? Currently Ionic supports iOS 7.1 + and Android 4.1+

3.What is folder structure of Ionic? ├── bower.json // bower dependencies ├── config.xml // cordova configuration ├── gulpfile.js // gulp tasks ├── hooks // custom cordova hooks to execute on specific commands ├── ionic.project // ionic configuration ├── package.json // node dependencies ├── platforms // iOS/Android specific builds will reside here ├── plugins // where your cordova/ionic plugins will be installed ├── scss // scss code, which will output to www/css/ └── www // application - JS code and libs, CSS, images, etc.

4.How to create a blank project in ionic? ionic start appName blank

5.How do you configure android platform in ionic? ionic platform add android

6.what are the disadvantage of using ionic? -Performances are not as best as native applications. -It is not suited for high-end graphics 3D and games development.

7.what are the advantage of using ionic? -can be used for quick prototyping. -Same codebase can be used to build both iOS and Android applications. -Development cost is less compared to other native Mobile platforms. -web developers can easily build mobile applications too.

8.Performance of application is bad on older Android devices. what can be done to improve it? Ionic application uses the default web browser available on device, Older versions of Android devices uses default Android browser which is low in performance. we can use crosswalk to resolve this issue,it allows you to package a modern Chrome webview along with Ionic application, so an application does not have to rely on native Android browser,hence better in performance.

9.How can you render many item list in Ionic, without affecting scrolling performance?

Ionic provides a collection-repeat directive that renders only visible items in the DOM.

10.How can you access native mobile functionality in Ionic applications? We can acheive it by using Cordova plugins.

11.What is ionic prepare? ionic prepare <platform> copies all files from the www folder into the target platform's www folder

12.what is the solution for footer movement along with keyboard? Can be achieved by adding following in CSS .keyboard-open .tabs{ display:none; } .keyboard-open .has-tabs{ bottom:0; } body.keyboard-open .has-footer{ bottom: 0; }

13.What is the storage option in ionic? Ionic uses 2 options for storage : localStorage and sessionStorage. -localStorage can only store strings,object needs to be stringified before storing and the size limit is 5MB window.localStorage.setItem( ‘awesome-key’, ‘awesome-value’ ); window.localStorage.getItem( ‘awesome-key’ );

14.What is the Ionic CLI? The CLI Stands for command line interface, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are using the Ionic Cloud, the CLI can be used to export code and even interact with your account programmatically.

15.What are components? Components in Ionic are reusable UI elements that serve as the building blocks for your mobile app. Components are made up of HTML, CSS, and sometimes JavaScript

16.What is theming? Themes are sets of styles that get applied to an app. Ionic uses a light theme by default, but it also comes with a dark theme. In addition to theming, Ionic’s Platform Continuity enables components to have platform-specific styles. This means the app’s styles will change based on the platform (iOS, Android, etc.).

17.How does navigation work? Navigation works like a stack — push a page to the stack to navigate to it, and pop to go back.

18.What is Action Sheets? Action Sheets slide up from the bottom edge of the device screen, and display a set of options such as confirm or cancel. The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content.

Good Luck!!

#ionic #ionicinterview