One of the biggest issues and limitations faced by Ionic developers, and other “hybrid” application developers, is the reliance upon third-party solutions for accessing native functionality. Tools like Capacitor (as well as Cordova) provide us with a way to access Native APIs and run native code from within the browser environment that most of the mobile application is contained within. Typically, we are able to do the vast majority of our work using web code - however, if… continue reading.

When building our applications, we will often want to store data in some kind of storage mechanism such that it is available to use even after the application has been exited and returned to later. A common way to do this for web-based applications is to make use of which is available through the global object. For example, storing a bit of data in local storage is as simple as doing this in a browser environment: This will store data in the browser’s local storage , but… continue reading.

Recently, we’ve been covering a few different ways to handle state management in an Ionic and StencilJS application. This has included using simple singleton services and far more complex state management solutions like Redux . If you have a background in Angular you may be used to using observables as part of managing state in an application, e.g. having a service that provides an observable that emits data changes. Observables are provided by the RxJS library which… continue reading.

Since Ionic now uses web components to deliver their collection of user interface elements for building mobile applications, we are not limited to building Ionic applications in just one way. Web components can work with any JavaScript framework, or without even using a framework at all. This degree of freedom is fantastic, but perhaps also a little confusing. If you are a beginner, just getting started with Ionic, you might not have any idea what approach you want to use… continue reading.

For me, the final touches and app store preparation stuff has alway been the most dull and frustrating part of building applications. Once you’ve finally finished coding your application you probably won’t be super keen to create 50 different image files and resize them all to the correct resolution. It can be time-consuming, tedious, and boring, but it’s these final touches that can really add to or detract from the quality of the final proudct. It’s something that you… continue reading.

This article was originally published via email to people who are subscribed to my newsletter , for the purpose of introducing my new book and providing some context around the benefits of using StencilJS to build Ionic applications. This article was written specifically with Ionic/Angular developers in mind, but it also provides a general assessment of Stencil against other frameworks. Near the end of last week, you may have seen the announcement of the StencilJS 1.0 beta… continue reading.

As we have discussed quite a bit now, the idea with state management solutions like Redux and NgRx is to dispatch actions which are interpreted by reducers in order to produce a new state . In a simple scenario, as was the case for the last NgRx tutorial , we might dispatch a action and supply it with the note we want to create, which then allows the reducer to appropriately add this data to the new state: However, things are not always so simple. If we consider the… continue reading.

A tabbed navigation interface is very commonly used in mobile applications and, as with most things user interface related, the Ionic web components make implementing this kind of interface relatively easy. We can make use of the , , , and components to create an interface with multiple tabs that display different components that we can easily switch between: In this tutorial, we are going to look at two different approaches to implementing tab navigation in an Ionic… continue reading.

Over the past few weeks we have been covering various aspects of state management in Ionic applications - both with Angular ( using NgRx ) and StencilJS ( using Redux ). So far, we have only covered the basics concepts of Ionic + StencilJS + Redux , but this tutorial is going to jump straight into a realistic example of using Redux for an Ionic/StencilJS application. We will be using Redux to store data loaded from a local JSON file using the Fetch API (although you… continue reading.

We’ve recently been discussing various ways to manage state in a StencilJS application, including using Stencil State Tunnel and Redux . We’ve specifically been considering the context of building Ionic applications built with StencilJS, but these concepts apply to any StencilJS application. We might implement some kind of “state management” solution to keep track of things like: Settings values that can be accessed throughout the application A logged in user’s data… continue reading.

StencilJS is the technology behind the most recent version of the Ionic Framework, which allows Ionic’s components to be used with any framework or with no framework at all (opposed to the situation before where it was tied specifically to Angular). The reason StencilJS can be used to achieve this is that it provides a simplified way to build web components which are just native to the web, rather than to a specific framework. You don’t need to use StencilJS in order to use… continue reading.

I decided to write this article in response to some common questions/statements/responses I’ve been seeing for quite a while. In discussions where the cross-platform capabilities of Ionic are being explained, it would be common for the Ionic team, or bloggers/educators like myself, to say that Ionic allows you to build the following applications from a single codebase: Web/PWA Native iOS Native Android etc. It seems to be a point of contention to refer to an Ionic application… continue reading.

In this tutorial, we are going to tackle the basics of using NgRx for state management in an Ionic/Angular application. If you are unfamiliar with the general concept of State Management/Redux/NgRx I would recommend watching this video: What is Redux? as a bit of a primer. The video is centered around Redux , but since NgRx is inspired by Redux the concepts are mostly the same. NgRx is basically an Angular version of Redux that makes use of RxJS and our good friends… continue reading.

A StencilJS application, like many modern applications including those built with Angular or React, consists of a “tree” of components (in the case of StencilJS, this is a tree of web components ). We start with our root component that is added to the index.html file (the entry point for the application), then our root component will add additional components to its template, and then those components will add additional components to their templates and so on. If we were… continue reading.

When building StencilJS applications (whether you are using Ionic with it or not) you will be using JSX to create the templates for your components. JSX is a syntax extension to standard ECMAScript (JavaScript) that adds additional XML style syntax. It was created by Facebook and popularised by its usage in the React framework, but JSX can be used outside of React - which is obviously the case for StencilJS. In over-simplified terms, JSX allows you to mix HTML with… continue reading.

With a little bit of research, you will quickly discover that the Ionic Framework is a framework for building cross-platform applications using web technology. What might be less obvious is exactly what it is that Ionic provides, and what using Ionic might look like for you. This is especially the case today. The current generation of Ionic has opened the door for Ionic to be used in a myriad of different circumstances and in conjunction with different frameworks. This is… continue reading.

When we are building applications, there are many instances where we want data updates from the server to display immediately . Perhaps we have a chat application and we want to display new messages to a user, or maybe we’ve built a game that needs to display an update to the user as soon as something happens on the server. The problem with a typical client/server set up is that we would trigger a request from the client to load some data from a server when the application… continue reading.

Recently, someone asked me if it is possible to create a shared element transition in an Ionic application. I wasn’t actually familiar with that specific term, but it is something I’ve wanted to try building in Ionic for a while and it’s actually a little bit easier than I thought it would be. The basic idea is that rather than just transitioning directly to a new page, we take one of the items on the existing page and animate that into its position on the new page. This… continue reading.

In this tutorial, we are going to take a look at creating a directive that will allow us to apply a cool little enter/exit animation to items inside of an Ionic list. We will be able to define a simple CSS class to determine what the animated styles should look like, which might end up looking something like this: NOTE: The actual end result is smoother than the GIF above looks In this case, we are modifying the of the list items and applying a as they enter or exit the… continue reading.

There have been some reasonably big changes to tab-based navigation in Ionic, and one issue that I see pop up quite a lot is creating more complex navigation within individual tabs. Specifically, a lot of people seem to be running into an issue where after navigating to another page inside of a tab, the tab bar will disappear. In this tutorial, we will be looking at how to create a multi-level master/detail style navigation pattern inside of a tabs layout. This will allow… continue reading.