Ionic Framework : The Power Behind Modern Web Apps

In this article we shall get our hands dirty with the ionic framework. As suggested in the title, it is clear that it is to be used to create powerful web apps and deployed into native environment being Android or iOS. There is no need to learn any android, swift or objective C(earlier used for creating iOS apps) to create apps i.e if you don't know any one these technologies but still wants to create stunning apps and want your name to be published on the play store or iStore, then it is the one of the great way. The prerequisites for this is that if you are familiar with HTML, CSS and JavaScript then you are to good to go. If you know Angular that is of course a plus point. Now the basic question that some of the minds may get struck with is that how can an app being designed in web technology can be run on native environment like Android or iOS. This question is answered by Apache Cordova(also called as PhoneGap). It is mobile application development framework or simply it is used to deploy web apps in such way that they fit into the native environment which we want out of it as the end product. The sample image below clearly indicates the working of cordova For more details please read about it here Steps to create your first ionic application

1. Download and Install Iconic : The first step is to download and install the ionic on your system. Be clear here that since is ionic is npm module so therefore it can only be installed through npm i.e node package manager. In other words, you must have already nodejs installed on your system. Download nodejs from here.. I would recommend to install the LTS version since it is stable.A fter installing nodejs your can install ionic since npm will be installed automatically. Here I will show the installation process. I have used ubuntu but if you are on Windows then don't worry I will guide the windows fans as well :). For only linux users, write the below the command on your terminal to update the repositories below installing ionic.Windows users do not need to do anything.

   sudo apt-get update

   Then install the ionic by using the commands which are different in linux or windows. For linux users

   sudo apt-get -g install ionic

   Since it is global installation so you need to write the -g and sudo For Windows users follow the command below.You may need to run the command prompt as admin

   npm install ionic

2. After installation run the following command :

   ionic --version

   This is basically to test whether ionic has been successfully installed on your system Next step is to make your ionic app by using the following command

   ionic start name_of_project template_name

   The command is the basic syntax to follow. It is same for both windows as well as linux users. The image below clearly depicts the process : Let me explain the above command. Start here, basically tells to create a new ionic app, next is the name of the app and then followed by the starter template. There are various other template being provided by ionic depending upon the requirement like tab, sidemenu, blank etc. It is the basic layout of the app that is going to be built further. After running the command it will also ask whether you want to integrate the app with cordova you can simply type yes
3. Project Directory : The last step is to move through the project directory by typing the following command

   cd project_name

   You can also install ionic pro sdk by signing up into the ionic official website enjoy the cool environment.You can also set up SSH or can skip for now if you don't want Next type the following command

   ionic serve

   Voila!! You have created your first app.

   Pros and Cons of Ionic framework

   The advantages are described briefly:
   • Develop once deploy anywhere
   • As it is being built over it is very useful in creating powerful and robust applications.
   • Quick development, low cost of maintenance
   Don't ignore the disadvantages as well.These are:
   • Bad Performance as compared to native app.(Don't misunderstand here it is a comparison)
   • High skills requirement for complex apps
   • Built-in navigation can be complex
     
   
   
   Comment

   More info

   Advertise with us

   Next Article

   Ionic Framework : The Power Behind Modern Web Apps

   S

   sourabhpruthi10

   Follow

   Improve

   Article Tags :

   • Mobile Computing