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

AngularJS / Read time 4min

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:

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.

Hello from NETMedia, EU based production team delivering high impact projects for selected direct clients, software/web development and digital agencies.

Like what you see? Let's have a chat about the cooperation.

contact us now
 
Cookies help us deliver our services and better user experience. By using our website, you agree to our use of cookies.
OK
More