As a hybrid mobile development framework that links Apache Cordova and AngularJS together, Ionic framework is consistently gaining attraction from the community. On top of AngularJS, Ionic provides a big set of custom components (like list, forms, action elements, tabs, grid, etc.). Besides the core framework, Ionic also provides a lot of services that help developers get faster during the development, such as “Quick Start“, “Ionic Push“, “Ionic Deploy“, “Ionic Analytics“, “Ionic Package“, “Ionic View“, and “Ionic Creator“, etc.
Check here to get a full taste of all available components.
Table of Contents
Like all other development framework. Ionic also provides a powerful CLI to help developer start easily. With a simple command (like
ionic start myapp [template]), CLI will help you set up a starter project with specific template, such as “Tabs” or “Side Menu”.
CLI also provides a very convenient tool that developer can easily do dev and testing by a local development server. Use the command
ionic serve [options], CLI will open the app in the browser and it will consistently watch the file change and refresh the browser.
Even more, using
ionic serve --lab can open Ionic Lab feature which present your app in a phone frame and with iOS and Android platforms side-by-side.
Ionic Starter Projects
By using the command
ionic start [app-name] [template], Ionic CLI creates an ionic starter project within a second. In fact, this starter project already includes several features that we usually need while doing web app development, such as:
- NPM – manage all development / production related npm dependencies.
- Gulp – Automated task system that help do “dirty” work during the development / production process.
- Sass – Dynamic CSS language.
The starter project is good to start. However, it is not just good enough. In order to have a even smoother workflow, we still have several steps to do.
And that’s why we are doing the setup of Ionic Boilerplate – A better project boilerplate for Ionic framework.
The Gaol of Ionic Boilerplate
Based on the current Ionic Starter Project, here are several steps that we need to do:
- Modularize AngularJS code – Instead of having a fat controller and service file, this step helps us setup a good code structure so we can follow this pattern while the code is growing.
- Add common helpers – The part of code that can be reused every time when starting a new project.
- Add testing framework – To offer all sorts of testing, like unit testing, UI testing, etc. All have to be automated.
- Add Automate build process with hooks – Provide automated building process with Cordova.
- Keep adding useful plugins – Add useful Cordova plugins like Camera, Push Notification, SQLite, etc.
The Series of the Journey
In this series of posts, I will try to document all the steps / actions that I have done to build this project boilerplate of Ionic framework.
The first one will be to create the Ionic Starter Project.