Get Started with Ionic 3 and Mobile Apps Today

The world has indeed gone mobile. This is not news to anyone. Users are continuously abandoning the desktop as mobiles fulfill the majority of their needs. A recent consumer media report mentions how up towards 2/3 of the digital minutes are spent on the mobile phone*. This number has been rising throughout recent years and my guess is it will continue to do so. However, this does not mean apps always are the way to go. Google Play and App store are filled with millions of unused apps today. The vast majority of downloads can be attributed to only a few large players, which emphasizes the difficulty of entering the app market.

How does your app fit in?

You don’t always have to create mobile apps with the goal of becoming the next Facebook. Apps provide you with an opportunity to create stunning products and a great starting point for entering the world of development. My focus in recent years have been much more towards niche apps rather than competing with the software giants. This has allowed me to fulfill my desire to create and taught me a great deal about programming and development.

As the fast-paced tech industry continues to produce new libraries and frameworks for development, it becomes increasingly difficult to choose a starting point. This is where Ionic is an amazing tool. Bear in mind that starting with Ionic is easier with some basic HTML, CSS and JavaScript knowledge. I’m going to walk you through the basic structure of a simple application and link to the repository with my starter application.

Here’s a closer look at my starter application:

The starter is based on the Ionic teams own tabs-starter, which provides a great starting point. I have simply extended the features of their starter to include some basic functions, styles and services.

The project structure:

.   ├── ...   ├── src                          │   ├── app                    # Global Modules   │   ├── assets                 # data.json and images   |   ├── pages                  # All pages   |   ├── services               # Service to get items   |   ├── theme                  # Global SCSS theme   |   ├── declarations.d.ts      # Config file   |   ├── index.html             # Root index   |   ├── manifest.json          # Metadata   │   └── service-worker.js      # Cache configurations   └── ...

The new version of Ionic is like the second version based on components as many modern development frameworks are. This means that every page is seen as an individual component with individual styling and functions. This makes it very easy and maintainable as all code is located within the relevant component.

• The app folder contains all the global configurations. This is both the styling and the included modules. Whenever a new component has been created, it needs to be registered in the application.
• The assets folder contains all the static assets. This is both images and in this case the JSON data.
• The pages folder contains all the pages in the application and the services folder contains the service.
• The theme folder holds all the SCSS variables. All the colors have been configured in this file, which makes it very easy to quickly change styles across the entire application. The remaining files merely serve as configuration and you won’t necessarily have to change these.

What is included beyond the Ionic starter?

This application includes a few things central to almost every application. It provides a very simple service to retrieve items from a local JSON file. This service could easily be substituted with a database of your choice. Firebase is becoming increasingly popular and provides an extremely simple integration with Ionic. The local JSON data file in my project was merely to demonstrate how a service could retrieve data.

Apart from the service I have implemented some simple sharing of data between the components. This area has changed quite a bit from Ionic 1 but once you grasp the concept it’s quite powerful. The application passes category data from the first view to only show the relevant items in the list. From this view or the list tab you can then access a view for a single-item, which contains a title, a category, content and a styled background image.

Should you use Ionic 3 in production?

Ionic is, in my opinion, a perfect tool to create mobile apps for niche industries. The framework let’s you hit the ground running and create mobile apps in no time. Furthermore, you will be able to leverage existing knowledge with web technologies and expand your competencies to include both websites and mobile apps. If you haven’t ever used Angular 4, Ionic is a pretty good place to start. You will even be able to quickly build a library of components you will be able to share between your websites and apps. Given the current major release of Ionic 3.0, Ionic could easily be used in production apps.

What about performance?

Performance is generally becoming much better with hybrid apps and it is perfectly fine with loads in smaller niche apps. The answer might be different if you’re creating a large scale production app. I haven’t used Ionic for this and therefore I might not be the best one to answer this question.

Get started today

There is no reason for waiting. I suggest you get started as soon as possible if you have an interest in the area. You can find my repository here, which is a great starting point for a simple application. I have described the more technical details on GitHub and it does not take more than a couple of minutes to get started. I have included a few resources in the end of the article, which I have used during my first couple of days with Ionic.

I hope you enjoyed my brief introduction to Ionic 3 and the opportunities with such a tool. In my experience, nothing good comes from waiting. This also goes for new development tools. You will be surprised how fast you can get up and running with a consistent effort.

Feel free to reach out to me regarding any projects you have in mind and I’ll be happy to talk about it.

Ionic Framework_Know how to build websites? Then you already know how to build mobile apps. Ionic Framework offers the best web and…_ionicframework.com

Sources:

Mobile Marketing Statistics compilation_" Mobile to overtake fixed Internet access by 2014" was the huge headline summarising the bold prediction from 2008 by…_www.smartinsights.com