• DEV Channel

Four steps to properly set mobile app project using Ionic framework – Introduction

For long time now we believe that hybrid mobile applications are a very feasible and cost-effective approach to build business mobile solutions. In that sense we have seen technologies emerge and churn to a point that it makes sense to say we have a stable hybrid mobile development environment.

With the creation of PhoneGap, which later became the Apache Cordova project, the avalanche started and has helped other projects to build on this trend. Today we can finally say that we have a stable, and mature mobile development platform in the form of Ionic framework SDK platform.

What is Ionic?

Ionic framework is an open source SDK for development of hybrid mobile application in HTML 5, built on top of AngularJS and Apache Cordova. Using Angular, Ionic provides custom components (collection repeat lists, scroll views …) and methods for interacting with them. Besides the SDK, Ionic also provides services that developers can use to enable features, such as push notifications, A/B testing, analytics, code deploys, and automated builds.

Ionic framework also provides a powerful CLI, so developers can get started and create a project with a simple command. The CLI also allows developers to add Cordova plugins and additional front-end packages, enable push notifications, generate app Icons and Splash screens, and build native binaries.

One of the huge advantages of Ionic platform is that it’s very easy to get started and to make your first “Hello world” project. You can choose one of their predefined templates which is great starting point for many of today’s commonly used mobile apps.

Reality check?

The question is why are we doing all this? Why not just start a blank project by cloning one of the predefined Ionic framework templates?

If multiple projects are developed over time, learning a good programing practices is advisable and this kind of project setup could save time in future applications, automate a build process and create a good starting point for scalable and maintainable application.

There’s a several repeated things to setup when starting with the new project:

• Gulpfile.js  setup with all dependency packages required for code optimization and minification, building for different environments, images optimization and all kinds of automated tasks that shouldn’t be written or copy/pasted for every new project
• Get rid of unnecessary plugins and libraries – start with clean project environment
• Spaghetti code is out of the picture, fat controllers and mixed JavaScript logic in one file (etc. controllers, services, routes, configuration…). We want a modular code structure at the very beginning so we could follow that pattern through whole application. This way the code could be reused in next projects as well.
• We want to have common logic and helper functions so we don’t have to repeat ourselves. This way output is smaller files in size and common logic in one place
• Automate build process with hooks to prepare the project for production, delete necessary files, uglify code, increase version number etc.

This is a rough overview of all things we have to do every time when starting with new project. Having all of this set up in one place we can save a lot of time and frustration, have a stable starter foundation for project which can be easily maintained and scaled to implement new features in future (or if more developers join the team).

What exactly do we want to achieve?

End goal at end of this series is to help establish a world-proof starter foundation for mobile projects, or even show an meaningful ideas on how existing solutions could be further improved.

We want to divide this guide into the logical steps:

1. Prepare a blank project which you can start from
2. Organize AngularJS code to be modular and reusable for other projects
3. Add automated Gulp tasks for code minification
4. Add hooks to make your life easier and your solution easily maintainable

In the next post of the series we’ll describe blank project.  Follow us for updates.