App development with Ionic
Have you ever think about building an app? It may sound scary to learn platform-specific technologies just to develop one, and maybe you just don’t have time to invest in it. But there is another, much more faster way.
Furthermore, hybrid mobile apps can include native UI elements in situations where necessary. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.
You can see Ionic as the front-end UI framework (like Bootstrap) that takes care of all the look and feel and user interactions of your app, with built-in native mobile components and optimized animations.
Hybrid mobile applications provide a way for developers to re-use their existing skills in web development. Developers don’t like the prospect of getting locked into proprietary platforms. This includes the programming languages and SDKs provided by platform vendors.
Ionic uses AngularJS for a lot of the core functionality of the framework. You can still use Ionic with just the included CSS (Ionic uses Sass as well), but you can get the maximum benefit in terms of development and performance using Angular.
How to install Ionic?
- Make sure you have an up-to-date version of Node.js installed on your system.
- Open a terminal window or a command window (Windows), and install Cordova and Ionic:
- npm install -g cordova ionic
- If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
- npm update -g cordova ionic
You may need to install platform-specific SDK in order to deploy your app to the different platforms, but this will not be included in this post. You can refer the Ionic documentation any time.
A command line utility is one to be used from a shell (or commonly known as a Terminal). It receives input from this shell, and reports its output in the same shell. The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps. You can start an app using one of Ionic predefined templates, or a blank app.
ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu
This will create a folder named myApp and setup Ionic files and folders; this will be the app root folder. Access it using
ionic platform add platform
ionic build platform
ionic run platform
Also, you can test your app directly on your browser. This comes handy when you haven’t added any platform yet or installed the required SDKs. Note that this can limit advanced development at some point, because you don’t have full access to mobile native functions and some Cordova plugins could not work well. This command starts a light web server with live reload and another automated tasks, using Gulp on the background.
When you start the app from CLI, Ionic will generate all files and folders needed for the project. Each folder and file serves a purpose.
- hooks: Hooks are scripts that can be triggered during build process. They are usualy used for Cordova commands customisation and for building automated processes.
- platforms: This is the folder where Android and iOS projects are created. You should not edit any file of this folder, as it’s generated automatically when running
- plugins: This folder contains Cordova plugins. When you initially create Ionic app some of the plugins will be installed.
- resources: This folder is used for adding resources like icon and splash screen to your project. It is generated running
- scss: Since Ionic core is built with Sass this is the folder where your Sass file is located.
- www: Www is main working folder for Ionic developers. You will spend most of your time here. Ionic gives us their default folder structure inside ‘www’ but you can always change it to acommodate your own needs. When you open this folder you will find:
- css folder where you will write your CSS styling.
- img for images.
- libs are where your libraries will be placed.
- index.html as a starting point to your app.
- .bowerrc is bower configuration file.
- .editorconfig is editor configuration file.
- .gitignore is used to instruct what part of the app should be ignored when you want to push your app to Git repository.
- bower.json will contain bower components and dependencies if you choose to use bower package manager.
- gulpfile.js is used for creating automated tasks using Gulp task manager.
- config.xml is Cordova configuration file.
- package.json contains information about the app, dependencies and plugins that are installed using NPM package manager.
Yes, it’s true that hybrid mobile application development enables developers to target more than one platform. However, each platform comes with a set of caveats when it comes to its web runtime or WebView. This is especially true with Android, which is inconsistent between OS versions.
Testing can be tricky since browser doesn’t always give you right information about the phone enviroment. There is so many different devices and platforms and you usually need to cover most of them. It can be hard to combine different native functionalities, because most of the time you will run into plugin compatibility issues, which leads to build errors hard to debug. Besides, hybrid apps tend to be slower than the native ones, but since the mobile technologies are improving fast this will not be an issue in the near future. So, hybrid apps can be a very viable option for app development that doesn’t require hard native functionality. It’s really an approach that deserves a deeper look.