A year ago I wrote a series of posts on how to build a mobile app with Ionic. The Ionic Team have been working on the next version of Ionic and will be releasing that in beta soon, so now is a good time to revisit that tutorial and update it for Ionic 2. This tutorial series is for web developers who don't have any previous experience with Ionic.
This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.
Update: Ionic 3 has now been released, and you should still be able to follow this tutorial series to create an Ionic 3 app. However, I won't be updating this tutorial series anymore. I have a free email course that I will keep up to date with the latest version of Ionic, you can sign up for it below.
Learn to build apps with Ionic 3 now!
Sign up now for a 6-day crash course that will take you from setting up your development environment to deploying a working app on your phone!
This tutorial is part of a multi-part tutorial:
Part 1 - Introduction to Hybrid Mobile Apps and Ionic (this post)
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices
What is a Hybrid Mobile App?
This allows web developers to build mobile apps without having to learn the native programming languages (e.g., Objective-C, Swift, Java). It also means that you can have one codebase for all the different platforms.
The Ionic Framework uses Cordova and provides you with a UI framework that mimics the native UI. That means that you don't have to worry about implementing a native-like UI and debugging all the quirks between web view implementations on different platforms.
Ionic 2 is built on top of Angular 2, a very popular framework (made by Google) for developing web applications.
Both frameworks are completely rebuilt from scratch offering better performance and simplified code.
What will happen to Ionic 1?
The Ionic Team have said that they will continue working on Ionic 1 for the foreseeable future and have recently released a major update with a huge list of bug fixes.
So if you're looking to build something that needs to go in production soon, you might want to use the current stable Ionic version (which depends on Angular 1).
Read my 6-part tutorial to get started with Ionic 1.
Keep in mind that if you have an Ionic 1 app and want to upgrade to Ionic 2, you'll encounter many breaking changes.
What about React Native, NativeScript, etc.?
I haven't had time to explore these frameworks yet, but I do think that native apps will always give you a better performance than hybrid apps, because you won't have that extra layer in-between (the web view).
However, depending on the type of app you're building, this difference in performance is probably not noticeable to the user and that is what matters in the end.
Mobile devices are getting faster with every new release and so are the mobile browsers. With the support of Service Workers in the browser we can now even build web applications that will behave just like an app on mobile devices negating the need for app stores.
Why you should go hybrid
So if you're a web developer and if you want to leverage your current coding skills, the fastest way to get started with app development is by building a hybrid app. Ionic is the most popular hybrid mobile app framework out there and has an amazing community who will help you out whenever you get stuck.
In Part 2 we will set up our development environment and install the tools we need along with Cordova and Ionic.