IMPORTANT: For a more up-to-date list of tutorials for getting started with Ionic, please take a look at this page: Ionic Tutorials for Beginners
Over the past couple of years, I have released a lot of Ionic tutorials on this blog, and each of these tutorials are of varying degrees of difficulty. There is no particular logical progression to the content that I add to the blog – one day I may release a tutorial targeted at beginners, and the next day I might release something a lot more advanced.
For people who are looking for a well-organised introduction to building mobile applications with Ionic, I would recommend taking a look at my beginner to intermediate level book: Building Mobile Apps with Ionic.
However, I do also want to help provide a better introductory experience for my free tutorials as well. This post aims to curate some of my beginner friendly content in a way that can be more easily progressed through from beginning to end, rather than hunting around for tutorials that are at your particular skill level.
Although I will link you directly to some content below, it is also a good idea to sign up for my free email course below. This will deliver some curated content over the course of a week to help introduce you to Ionic:
The Ionic Ecosystem
Before we start taking a look at some tutorials, it is important to understand that with the introduction of Ionic 4 we will have many more options for Ionic development.
There was a time when life was simple and we didn’t need to worry about making any decisions. Ionic was built on top of Angular, and we used both of these frameworks to build mobile applications. Ionic is mostly responsible for providing the UI elements, and Angular was the framework used to build the application.
Since the release of Ionic 4, Ionic is now based on web components that work just about everywhere. We can still use Ionic/Angular just as we could before, but now we can also use those same Ionic components in other frameworks (like Vue or React), or with no framework at all.
This is fantastic for people who want to develop with Ionic, but it can make things a little confusing for beginners as there are so many frameworks and tools that now fall within the Ionic ecosystem, like:
- Ionic
- Stencil
- Web components
- Angular
- ionic-angular
- React
- Vue
- Cordova
- Capacitor
To keep things simple, I think that modern Ionic development can be broken down into four main categories:
1. Using Ionic with no framework
Since Ionic components are just web components, you can just drop them directly into any normal web page. You don’t need to use any other libraries, frameworks, or tools, you can just start using Ionic’s UI components straight away.
This may be useful in some circumstances, but especially when developing mobile applications, it will likely be quite difficult to build a mobile application just with Ionic alone.
2. Using Ionic with Angular
Since Ionic was first released it has been built on top of Angular. While Ionic mostly provides the user interface elements, Angular provides the rest of the glue that holds the application together.
This is the option I would recommend in most cases unless the developer has a specific preference for another approach. Since Angular has been used for so long, there is a lot of community support for Ionic/Angular applications, most of the tooling like the Ionic CLI is currently based on Ionic/Angular, and there is also the ionic-angular library which provides extra features to make building mobile applications with Ionic/Angular easier.
3. Using Ionic with Stencil
I don’t want to get into what Stencil is too much here, but basically, it is the tool that the Ionic team use to generate the web components that makeup Ionic. You do not need to know what it is or how to use it in order to use Ionic (in the same way that you don’t need to know how the factory that made your car works, all you are interested in is the car).
However, you can use Stencil to build entire mobile applications. You can use the web components provided by Ionic, and your own web components that you build with Stencil, to build an entire application.
The benefit to this approach is that the end result is an application that doesn’t need a framework included in order to run. If you are using Angular or any other framework, the framework library needs to be included and loaded in order to run the application – that is not the case for an application built with Stencil.
This approach is great for people who are looking to really push the limits of performance, but it is more technically challenging to develop an application this way (mostly because you don’t get all the bells and whistles that a traditional framework provides).
4. Using Ionic with other frameworks
Just as you can use Ionic with Angular, you can also use Ionic with any other framework (as long as that framework allows web components to be used). You might decide to build your application with Ionic/Vue or Ionic/React or anything else.
The main downside to this approach now is that there is not a lot of Ionic community support/content out there for other frameworks, and there are no equivalent libraries like ionic-angular for other frameworks to help make development easier.
The main takeaway from this section should be this: if you are new to Ionic and have no particular preference, you should use Ionic and Angular. If you are already experienced with another framework like Vue or React then you may want to consider using that approach, rather than learning Angular. If fast loading and high performance is extremely important for your application, you may want to consider using Ionic with Stencil (keep in mind that options like Ionic/Angular also do allow for high performance, just not quite to the extreme that Ionic/Stencil offers).
1. Introduction to Ionic
These are tutorials you should read first if you are new to Ionic, Angular, and even more generally ECMAScript 6 (ES6) and TypeScript which may be new to a lot of JavaScript developers, but are a big part of Angular.
This serves as a broad introduction to the new concepts you will be using in your Ionic applications, like the new template syntax, classes, decorators and so on.
This video tutorial is the first lesson in the bonus video course that comes with Building Mobile Apps with Ionic. It’s a great place to start because it walks through the structure of an Ionic 2 project, discusses the roles of some specific files, and points out what you do and don’t need to worry about.
2. Ionic Basics
This section contains tutorials covering the basic components of Ionic. The tutorials in the last section are very broad and were intended to give you some familiarity with Ionic in general. These tutorials will focus on covering simple concepts, that you will need to use in most of your Ionic applications, in more detail.
The ability to change between pages is obviously a very important concept to understand, and Ionic takes quite a different approach to this than you may be used to if you are new to mobile applications. Rather than using routes, you will be using a navigation stack and pushing and popping views. There is also a video tutorial available for this which covers data sharing concepts in more detail.
The Http service allows you to grab data from an external source (e.g. from some 3rd party API or your own), this tutorial walks through how you can do that. There is also a video tutorial available for this.
Pipes allow you to do a bunch of useful things with your data, like converting date formats, formatting addresses, or in the case of this tutorial: converting every word in a string to MATT DAMON.
Saving data so that it is not lost every time a user closes your application is obviously really important. This tutorial is actually on building an entire todo list application and covers how to permanently store data the user adds to the application by creating a data service. There is also a video tutorial for this.
When building Ionic applications we can also access the Native APIs on a device (things like the camera, contacts, accelerometer, and so on). This tutorial walks through how to use Ionic Native to integrate native plugins into your application.
Once you understand how to build Ionic applications, creating your own custom themes really sets them apart from the crowd. This tutorial looks at the different ways to style your application. There is also a video tutorial available for this.
3. Practical Tutorials
If you’ve made your way through all or most of the previous tutorials, you should be pretty familiar with the core concepts of Ionic. The tutorials in this section take a step away from looking at the basics and start using them to piece together real applications or specific bits of functionality.
This tutorial walks through how to build a simple todo list application in Ionic. It’s a great starting point for your first application as it covers a lot of basic concepts like using components, navigation and data storage. Keep in mind that the video for this tutorial (and the next tutorial) was recorded shortly after the release of Ionic 2. So for accuracy, you should read the text-based version of the tutorial, but it may still help to watch the video if you’re more of a visual person (most of the changes have been pretty minor).
This tutorial looks at how to set up a simple application that implements the Google Maps JavaScript SDK, and also how to use the Geolocation API.
This tutorial is quite a bit more advanced and walks through building an interactive quiz application in Ionic.
Bonus Content
Most of the tutorials I release contain some kind of bonus content like the source code to applications, you can get access to these below:
Want More Ionic Content?
As I mentioned, this isn’t anywhere close to all of the Ionic content that you can find on my site, it’s just a selection that I think would help beginners out. For the rest of it, check out the Ionic Section of my blog. You can also filter the content on my site by beginner, intermediate, and advanced.