- Native iOS Applications
- Native Android Applications
- Mobile Web Applications
- Progressive Web Applications (PWA)
- Desktop Applications
- and more...
The write once, run everywhere approach is a lofty goal and despite promises from various tools the reality usually ends up falling some distance away from that goal.
The key advantage, at least in my opinion, that Ionic has over other options is that it runs on the web and the web runs just about everywhere. Some solutions/frameworks allow you to write your mobile applications using web code, but this is later converted into platform specific code (depending on your perspective, this may be seen as an advantage) - unlike Ionic, where the code you write is the code that runs, and it is universally supported wherever the web is.
Whether you are building an iOS application, an Android application, a desktop application, or a mobile web application - no matter where you are running your Ionic code it will be running inside of a web browser running web code. Generally speaking, that means that no matter where your code is running, no changes will be required.
Ionic does also provide the ability to integrate with Native APIs (e.g. Bluetooth, Contacts, NFC) that are not typically accessible through the web. As time goes on, more and more of these APIs are being exposed to the web, which removes the need to write any platform-specific code. However, for some native features, you will still need to have code for specific platforms (although, that code can still all be kept within a single codebase) - Ionic's Capacitor project aims to help with this.
So, even with Ionic, we perhaps still haven't unequivocally achieved that write once, run everywhere goal... but we're bloody close
These tutorials should get you underway, but there is plenty more to learn. You will find resources on just about any Ionic topic you can think of on this website, but if you're looking for a more structured, guided, and up-to-date experience for learning Ionic you might want to check out my beginner level book.
This book was originally released all the way back during the alpha version of Ionic, and since then it has been constantly updated for each new version that has been released (and updates are always released for free). It will teach you everything you need to know for the most up to date version of the Ionic framework, all the way through from the basics to submitting your application to the app stores.
NOTE: The free tutorials you will find below have been written over the span of several years. Whilst I do my best to keep the tutorials on my website up to date, there will be some that will not work as-is. Most of the time, only minor changes will be required to get things working.
As you're learning Ionic, it is also important to attempt to tackle building out your own solutions without relying too much on individual tutorials to guide you through the process. This can help highlight areas that you are struggling with, and where you might need to focus your attention.
I've put together some challenges that you way wish to attempt over time. Once you have spent some time learning various concepts, you may attempt to tackle one or more of these challenges. Repeating this process is a good way to become competent with Ionic: Learn, Build, Repeat.
To view the most recent Ionic tutorials, you can click here.
- An Introduction to ES6 Modules
- Understanding NgModule
- Structural Directives
- Component and Template Interaction
- Working with Arrays
- Using Git
- Navigation Basics & Passing Data Between Pages
- Migrating Ionic 3 Navigation to Ionic 4
- Using the Angular Router
- Implementing the Master/Detail Pattern
- Creating a Tabs Layout
- Prevent Access to Pages with Route Guards
Fetching, Handling, and Saving Data
- An Introduction to HTTP Requests & Fetching Data in Ionic
- Using Services/Providers/Injectables in Ionic
- Loading Remote JSON Data with HTTP
- Saving Data with the Ionic Storage API
- Understanding CORS (Cross Origin Resource Sharing)
- Understanding Asynchronous vs Synchronous
- Asynchronous Data Loading
- How to Send Data with POST Requests
Basic Styling and Theming
- A Primer on CSS4 Variables
- What is a Shadow DOM?
- Styling a Shadow DOM
- Conditional Attributes, Styles, and Classes
- An Introduction to Strucural Directives
- Understanding Slots
User Interface and User Experience
- Creating a Theme Switcher Using CSS Variables
- Twitter Style Heart/Like Animation with Angular Animations in Ionic
- Simple Animations with CSS Transitions
- High Performance Animations in Ionic
- Animating from the Void: Enter and Exit Animations in Ionic
- Using Custom Icons
- Improving the UI/UX of an Ionic Component
- Bulk Delete UI with CSS Clip-Path
- Designing a Landing Page with a Video Background in Ionic
- SVG Animations
- Animating a Dynamic Background with an SVG
- Creating a Music Player Interface
- Improve Mobile Form UX with Input Masks
Forms and Data
- Advanced Forms and Validation
- Dynamic/Infinite Input Fields in an Ionic Application
- Creating Custom Form Input Components
- Username Availability with an Asynchronous Validator
- Setting up Custom Components
- Creating a Custom Scroll Vanish Directive
- Google Maps and Geolocation
- Creating an Accordion List
- Building a Speed Reading Component
- Using HTML5 Canvas to Create a Rating Component
- How to Create a Sliding Drawer Component
- Build a Tap to Reveal Component
- Building a Custom Flash Card Component
- Creating a Flash Message Service
- Automatic Scroll to Bottom Chat Interface with Mutation Observers
- Creating a Drawing Application
- Live Coding a Party Game
- Building a Time Locked Advent Calendar
- Creating a Facebook Style Reaction Button
- Create a News Feed with 360-Degree Photo Viewing
- Create a Nearby Places List with Google Maps
- Create a Data Driven Quiz App
- Building a Hotel Booking App
- Ionic Framework Is Fast (But Your Code Might Not Be)
- Safely Modifying Elements
- What is Lazy Loading?
- Increasing Performance with Efficient DOM Writes
- High Performance Parallax Animation
- High Performance List Filtering
Building and Submitting to App Stores
- Adding Splash Screens and Icons
- Production/Development Environment Variables
- Deploying to Android
- Deploying to iOS
- Deploying as a PWA
- Why You Should Never Store Passwords
- Extracting the Source Code of any Cordova Application
- Basic Security for Ionic & Cordova Applications
- Basic Security for Ionic & Cordova Applications (written)
- Creating a Fingerprint Lockscreen with TouchID
- Using JSON Web Tokens (JWT)
Unit and End-to-End Testing
- The Role of Unit Tests
- The Role of End-To-End (E2E) Tests
- How to Unit Test an Ionic Application
- Dealing with Timing Issues in E2E Tests
- Testing Asynchronous Code with FakeAsync in Angular
- Introduction to Testing Ionic 2 Applications with TestBed
- Test Driven Development in Ionic: An Introduction to TDD
- Test Driven Development in Ionic: Http and Mocks
- Test Driven Development in Ionic: Navigation and Spies
- Test Driven Development in Ionic: Services and Templates
- E2E (End-to-End) Testing in Ionic: An Introduction
- E2E (End-to-End) Testing in Ionic: Structuring Tests with Page Objects
- E2E (End-to-End) Testing in Ionic: Test Driven Development
Still looking for more?
Once you have got the basics down and you are fairly comfortable with building mobile apps with Ionic in general, you might be interested in checking out my advanced course for Ionic developers.