Category: Ionic Tutorials

TypeScript vs ES6

Adding ES6/TypeScript Support to a NodeJS Server

In past tutorials, we have covered setting up a basic Node/Express server and even integrating a Node server with Ionic. Up until this point, we have just been using the standard ES5 JavaScript syntax when building the server. If you are used to using Ionic, and many readers of this blog would be, then you […]

Building a Time Locked Advent Calendar in Ionic

As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite […]

Firebase

Hosting an Ionic PWA with Firebase Hosting

Part 1: Building a Cryptocurrency Price Tracker PWA in Ionic Part 2: Preparing a Progressive Web Application for Production Part 3: Hosting a Progressive Web Application with Firebase Hosting (this tutorial) In the past couple of tutorials, we have been working on building a cryptocurrency price tracking application as a progressive web application in Ionic. […]

cryptoPWA logo

Preparing a Progressive Web Application for Production

Part 1: Building a Cryptocurrency Price Tracker PWA in Ionic Part 2: Preparing a Progressive Web Application for Production (this tutorial) Part 3: Hosting a Progressive Web Application with Firebase Hosting In the previous tutorial, we walked through building a simple cryptocurrency tracker application using Ionic. The purpose of this tutorial series is to build […]

cryptoPWA logo

Building a Cryptocurrency Price Tracker PWA in Ionic

For a lot of people, buying cryptocurrency – like Bitcoin, Litecoin, and Ethereum – is a long-term game. Day trading anything that volatile is a dangerous game, so the day to day price isn’t all that important. Most people will probably buy, hold, and wait to see if it pays off years down the road. […]

Node and Ionic

Integrating an Ionic Application with a NodeJS Backend

Developing on the client side with Ionic is a pleasure. It’s based on the web tech we know and love, and it runs straight in the browser so we can dive straight into the development in minutes. You can only get so far developing purely on the front-end/client-side, though. If your application needs to provide […]

Angular 5 Update

Using Observables in Ionic 3.9.x and Angular 5

Since Ionic has been using semantic versioning for their updates, as long as the number at the beginning of the version number (i.e. 3.x.x) stays the same, then it means you likely won’t be dealing with any breaking changes that you need to update things in your application for. It also means that when you […]

Ionic in Other Frameworks

Using Ionic with Any Framework (or None at All)

Last week, I released an article that discussed Stencil and the impact that it will have on the Ionic framework. The key point is that Stencil is being used to rebuild all of Ionic’s components as web components, which will remove Ionic’s dependence on Angular. This does not mean that Ionic is moving away from […]

Stencil

What Is Stencil and How Will It Impact Ionic?

The Ionic team recently announced a new project called Stencil. The best way to think of Stencil is as “a tool for building modern Web Components”. Stencil has a specific style of syntax you need to use to build components: but there is a couple of important points to keep in mind. Although it looks […]

Book image

Advanced Guide to the Ionic Framework

Once you’ve got the basics of Ionic down then all you have left to learn is… everything else. It’s hard to clearly define where your time would be best spent once you are past the basics – there’s not much point in slogging through tutorial after tutorial implementing different kinds of components and plugins. Once […]

Web Animation API with Ionic

High Performance Animations in Ionic

It is a common misconception that web-based mobile applications like those built with Ionic are not capable of creating performant animations. The fact that an application built with Ionic runs inside of a browser does make it harder to create performant animations, but if you are aware of some common pitfalls when it comes to […]

Creating a Facebook Style Reaction Button in Ionic

Near the start of 2016, Facebook released “Reactions” which gave users a way to express themselves more deeply than just with a single “Like”. Rather than adding it a bunch of new buttons for the reactions, Facebook stayed with a single “Like” button that would then display more options when the button was held down: […]

Web Animation API with Ionic

Add to Cart with the Web Animations API in Ionic

As well as looking cool, animations are best used in applications when they serve a purpose. Animations are great for conveying a range of concepts (direction, anticipation, emotions) and one particularly useful feature of animations is that they draw the attention of the user. Our eyes are naturally drawn to movement, and so animations are […]

Custom Components in Ionic 2

Setting up Custom Components in Ionic

It’s not immediately obvious how to go about setting up custom components that you have added to your Ionic application. In this video, we discuss a few different methods we can use to make our components available to use, and some of the pros and cons of each approach. Here’s the video: What to watch […]

PWA

Launching a Progressive Web App (PWA) with Ionic

About a week ago I launched the early access for Elite Ionic. This is my latest course for Ionic, and it is focused on teaching advanced Ionic concepts. Typically, when I release any paid content it is in the form of an eBook, but this time I wanted to do something a little different. Elite […]

ElementRef & Renderer

Safely Modifying Elements with ElementRef & Renderer in Ionic

There often comes a time where we will need to modify the properties of an element in our application: its background color, or its position, or something else. By using ElementRef we are able to easily get a reference to an element and its properties, and although we can modify the element’s properties directly through […]

Ionic Backends

Integrating a Backend with Ionic

I often see questions like “How do I use PHP/MySQL in Ionic?” or “Does Ionic work with X backend?” – these are reasonable questions, but it indicates a big misconception as to how integrating a backend with Ionic works. The technology that is used on the backend is completely irrelevant, as the backend and the […]

Testing Ionic

Dealing with Timing Issues in Ionic E2E Tests

When creating End-to-End (E2E) tests, we are basically programming the browser to behave like a human. We tell the browser what pages to go to, what input to send, what buttons to click, and so on. In a typical E2E test, we will send multiple commands to the browser. We might tell it to click […]

PWA

Uploading a Production PWA with Ionic

In a recent tutorial, I covered how to create a Progressive Web application with Ionic using the “bare minimum” steps. PWAs are an in-depth topic, but that tutorial covers the minimum steps required to create something that would be considered a PWA. In this video tutorial, I wanted to cover the steps you need to […]

PWA

The Bare Necessities: Progressive Web Apps in Ionic

You’ve probably heard of Progressive Web Applications by now, but if you haven’t then you may want to give this a read. In short, they are all about giving applications made available through the web a more native-like experience. This means at a minimum that they should work offline, and can be installed onto a […]