Tips for Animating in Ionic Applications

Tips for Animating in Ionic Applications

Animations are one of those little extra touches in an application that can transform an average looking application into something truly impressive. When done well, we can create animations that perform well, look great, and improve the user experience of our application. There is a lot of talk around the performance of web-based or hybrid mobile applications, but it is often irrelevant as web tech is capable of smoothly running most (but not all) types of mobile… continue reading.

Create a Circle Progress Web Component with Conic Gradients in StencilJS

Create a Circle Progress Web Component with Conic Gradients in StencilJS

You know what’s way cooler than horizontal progress bars ? Circle progress bars! Well, for some contexts at least. Circles are a little bit more difficult to work with in CSS that squares/rectangles where we can just define a simple width/height for the shape, but with some effort we can create something that looks like this: There are different ways to go about implementing a circle component like this, but I am going to walk through a rather simple method for achieving… continue reading.

Using the Camera API in a PWA with Capacitor

Using the Camera API in a PWA with Capacitor

One of the key ideas behind the Capacitor project which was created by the Ionic team, is to provide access to browser/native features through a single API no matter what platform the application is running on. This philosophy makes the one codebase/multiple platforms approach to building applications much more feasible. Geolocation is a good example of where this can simplify things a great deal for us. How we implement Geolocation may depend on what platform we are… continue reading.

HTTP Requests in StencilJS with the Fetch API

HTTP Requests in StencilJS with the Fetch API

When building applications with Ionic, we will often need to fetch some data over the network - whether that is locally to pull in data from a JSON file, or through the Internet to load data supplied by some API. If you’ve been around for a while you might recall using an to perform HTTP requests with JavaScript - this wasn’t/isn’t a particularly nice way to perform requests, and many people would use additional libraries to help simplify the process of sending HTTP… continue reading.

Native/Web Facebook Authentication with Firebase in Ionic

Native/Web Facebook Authentication with Firebase in Ionic

The Firebase JavaScript SDK - which we will be using in this tutorial - provides a really simple web-based method for authenticating your users in an Ionic application by using Facebook . If we are intending to launch the application as a PWA then this method will work fantastically. However, if we are using Capacitor (or Cordova) to create native builds for the iOS/Android platforms, this web-based authentication flow becomes a little bit more awkward. If you are… continue reading.

Creating a Shared Element Transition Animation in Ionic (StencilJS)

Creating a Shared Element Transition Animation in Ionic (StencilJS)

Although you may or may not recognise the term shared element transition , you will likely have seen this pattern applied in many applications that you have used. It is typically applied in a master/detail type of situation, where we would select a particular element to reveal more information. The basic idea is that instead of just transitioning normally to a new page, or launching a modal, the selected element “morphs” into its position on the next page. It will look… continue reading.

Common Issues with Poor Performance in Ionic Applications

Common Issues with Poor Performance in Ionic Applications

One of the services I often perform is to spend a few hours doing a high-level code review of an Ionic codebase, and then writing up any advice or recommendations I have based on what I see. Most of the time, the request comes from people who have built an Ionic application but the performance isn’t where they want it to be. I have written and talked quite a bit about Ionic performance in the past, and to get a general sense of my view on Ionic’s performance I would… continue reading.

The Basics of Unit Testing in StencilJS

The Basics of Unit Testing in StencilJS

Automated testing such as unit tests and end-to-end tests are, in my view, one of the biggest “level up” mechanics available to developers who are looking to improve their skillset. It is difficult and might require a lot of time to learn to get to the point where you feel competent in writing tests for your code, and even once you have the basics down there is always room for improvement to create better tests - just as you can continue to learn to write better and… continue reading.

Building a Notepad Application from Scratch with Ionic (StencilJS)

Building a Notepad Application from Scratch with Ionic (StencilJS)

A difficult part of the beginner’s journey to learning Ionic is the step between understanding some of the basics and actually building a fully working application for the first time. Concepts explained in isolation can make sense, but it may be difficult to understand when to use them in the context of building an application. Even after spending some time learning about Ionic, you might find yourself starting a new project with no idea where to begin. The aim of this… continue reading.

Creating a Local Capacitor Plugin to Access Native Functionality (iOS/Swift)

Creating a Local Capacitor Plugin to Access Native Functionality (iOS/Swift)

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.

Using the Capacitor Storage API for Storing Data

Using the Capacitor Storage API for Storing Data

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.

Using RxJS Observables with StencilJS and Ionic

Using RxJS Observables with StencilJS and Ionic

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.

StencilJS vs Angular for Building Ionic Applications

StencilJS vs Angular for Building Ionic Applications

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.

Creating a Dynamic/Adaptable Splash Screen for Capacitor (Android)

Creating a Dynamic/Adaptable Splash Screen for Capacitor (Android)

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.

Should Ionic & Angular Developers Learn StencilJS

Should Ionic & Angular Developers Learn StencilJS

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.

Using NgRx Effects for Data Loading in an Ionic & Angular Application

Using NgRx Effects for Data Loading in an Ionic & Angular Application

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.

Basic and Advanced Tab Navigation with Ionic & StencilJS

Basic and Advanced Tab Navigation with Ionic & StencilJS

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.

State Management with Redux in Ionic & StencilJS: Loading Data

State Management with Redux in Ionic & StencilJS: Loading Data

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.

Using Services/Providers to Share Data in a StencilJS Application

Using Services/Providers to Share Data in a StencilJS Application

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.

Creating Reusable Cross-Framework Components with StencilJS

Creating Reusable Cross-Framework Components with StencilJS

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.