A little while ago I released an article named Advanced Forms & Validation in Ionic where we discussed the concept of using Validators that Angular provides for validating form fields. These validators come in two flavours: synchronous and asynchronous. Synchronous validators can be used to perform simple synchronous checks like whether a field is empty, […]
The Role of Unit Tests in Ionic
Unit testing is an intimidating task to get started with, and with no prior knowledge of creating automated tests, it can be hard to understand the how and why of unit testing. In this video, I walk through some unit tests I have set up for a real-world application I am working on, and we […]
Setting Up Unit and E2E Tests in Ionic
I’ve written many tutorials on adding automated tests to Ionic applications, but one of the trickiest parts of the whole process is just getting the testing environment configured. If you want to set up unit and end-to-end tests you will need to install Jasmine, Karma, Protractor, and an array of other packages that need to […]
Hybrid App Developers: Don’t Store Your User’s Passwords
I almost titled this post something clickbaity like ‘The one MASSIVE security mistake hybrid developers are making’. It is a big issue, and it is a mistake I see pop up on a weekly basis (and I’m sure it extends outside of the hybrid mobile app development sphere). I don’t want the tone of this […]
Testing Asynchronous Code with FakeAsync in Angular
When creating automated unit tests in Ionic and Angular applications we would typically follow a process like this: Set up the testing environment Run some code Make assertions as to what should have happened This process is also commonly referred to as AAA (Arrange, Act, Assert). I don’t plan to provide an introduction to unit […]
Location Select Page with Google Maps and Ionic
If you want to accept a user supplied location in your application, and you want it to be in any kind of remotely useful format, it could be quite hard to do. You could of course just have a simple text field and allow the user to type the address, but that’s a lot of […]
[VIDEO] @ViewChildren vs @ContentChildren in Ionic
I recently release an article that explored The Difference Between @ViewChildren and @ContentChildren in the context of Ionic, but it is a subtle difference and I wanted to make sure I hit the point home. So, I’ve recorded a video where I discuss the difference in a little more detail and also walk through some […]
Create a Directive to Focus Content in a List with 3D Touch
One thing that I really enjoy doing with Ionic is attempting to implement cool and useful (most of the time) UI elements that I think a lot of people assume you can’t do in Ionic or that you can’t do well. Ionic provides a basic set of components by default, but you can extend that […]
Creating a Custom Expandable Header Component for Ionic 2 & 3
One of my favourite pastimes is trying to implement cool looking user interfaces that people send me in Ionic 2. A little while ago, somebody sent through this example from AirBnB. I set out to build a simple implementation of this, and ended up with a custom component that looks like this: The header height […]
“Live” Coding an Expandable Header Component in Ionic 2 – Part 2
In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s […]
“Live” Coding an Expandable Header Component in Ionic 2 – Part 1
In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s […]
E2E (End-to-End) Testing in Ionic 2: Test Driven Development
In the past two tutorials on E2E testing in Ionic, I’ve introduced the concept of End-to-End testing and some ways that you can better structure your E2E tests. If you are new to E2E testing you will likely understand at this point that an End-to-End test can test your application in a way that the […]
E2E (End-to-End) Testing in Ionic 2: Structuring Tests with Page Objects
In the first post in this series I wrote about how to create E2E (End-to-End) tests for Ionic 2 applications. This was a very basic introduction that focused on the general concept and getting a bare bones example up and running. I intend to create a few more tutorials that will go a little more […]
E2E (End-to-End) Testing in Ionic 2: An Introduction
Over the past few weeks, I have been releasing a series of tutorials on creating automated tests for Ionic 2 applications. The tutorials so far have focused on how to apply the Test Driven Development (TDD) methodology to unit test an Ionic 2 application. If the concept of automated tests is new to you, or […]
How to Create a Sliding Drawer Component for Ionic 2
Since I create a lot of content, I often ask for suggestions on tutorials I should write. If I find a suggestion is particularly interesting or I think it will benefit a lot of people, I’ll generally end up creating a tutorial at some point – so do feel free to suggest them. The other […]
Test Driven Development in Ionic 2: Services and Templates
Throughout this tutorial series, we have been learning various methods for unit testing Ionic 2 applications and using a Test Driven Development approach to building an application. In the previous tutorials we have covered: How to set up unit testing in an Ionic 2 application What Test Driven Development (TDD) and Behaviour Driven Development (BDD) […]
Test Driven Development in Ionic 2: Navigation and Spies
In the previous tutorial in this series, we covered the concept of mocks and creating a fake backend that we could make HTTP requests to. The general idea is that we want to isolate the thing we are testing, we don’t want external dependencies complicating our unit tests. We have been taking a Test Driven […]
Test Driven Development in Ionic 2: Http and Mocks
In the previous tutorial in this series, we introduced the concept of Test Driven Development and how those concepts can be applied to Ionic 2 development. I won’t be introducing the concepts again here, but in short: Test Driven Development, or TDD, is a method of development that involves writing tests before writing your application […]
Dynamically Loading Markers with MongoDB in Ionic 2 – Part 2
In Part 1 of this tutorial series, we built a Node & Express server which uses MongoDB to store location data. We created a route that we could make a POST request to, and through supplying some data with that request it will return to us only locations that are within a certain proximity to […]
Test Driven Development in Ionic 2: An Introduction to TDD
The concept of creating automated tests for your application allows you to improve the quality of your code, protect against regressions when making updates, and speed up the testing and debugging process. There are many different types of tests you can add to your applications, including: Unit tests which test small isolated chunks of code […]
Dynamically Loading Markers with MongoDB in Ionic 2 – Part 1
In this tutorial series, we are going to cover how to dynamically load markers from a server and add them to a Google Map in Ionic 2. When dealing with a small number of markers it isn’t a big deal to just load them all and dump them into the map all at once, but […]
Introduction to Testing Ionic 2 Applications with TestBed
Creating automated tests for your application is a great way to improve the quality of your code, protect against code breaking regressions when implementing new features, and speed up testing and debugging. In a Javascript environment, the Jasmine framework is typically used for writing tests and Karma is used to run them. This is still […]
Create a News Feed with 360-Degree Photo Viewing in Ionic 2 & 3
If you’ve been on Facebook recently, you will probably have seen interactive photos uploaded by your friends that you can drag around to view more of the photo. This is done in one of two ways, either the user uploaded a panorama photo, or a “true” 360-degree photo using something like Photo Sphere. Before we […]
Create an Advanced Photo Tilt Component in Ionic 2
Anybody remember Facebook Paper? It was somewhat of a re-imagining of the current Facebook experience into a more news focused format. Despite being quite well-received, it failed to gain traction and eventually shut down. When Facebook Paper was announced, they introduced this new UI concept that was built into the application: Changing the orientation of […]