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 is an amazing tool. Bear in mind that starting with Ionic is easier with some basic HTML, CSS and knowledge. I’m going to walk you through the basic structure of a simple application and link to the repository with my starter application. Ionic JavaScript 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 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. app folder The folder contains all the static assets. This is both images and in this case the JSON data. assets The folder contains all the pages in the application and the folder contains the service. pages services The 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. theme 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. 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. Firebase 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 which contains a title, a category, content and a styled background image. single-item, 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 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. Angular 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 , which is a great starting point for a simple application. I have described the more technical details on 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. here GitHub 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. _Know how to build websites? Then you already know how to build mobile apps. Ionic Framework offers the best web and…_ionicframework.com Ionic Framework Sources: _" Mobile to overtake fixed Internet access by 2014" was the huge headline summarising the bold prediction from 2008 by…_www.smartinsights.com Mobile Marketing Statistics compilation
