A couple of years ago I published some tutorials on building an accordion style list in Ionic. The method covered in that tutorial works well enough, but in this tutorial I will be taking another look at building an accordion list, this time with a non-comprising approach to creating a high performance accordion component. You can see this in action here or in the application preview component to the right (if you are on desktop). The main issue with building an animated… continue reading.
I’ve recently finished writing a book about creating high performance animations and interactions with Ionic, which I put together over the course of around 3 months and ended up producing a chunky tome weighing in at about 500 pages. You can find out more about the book below: Check out the book: Advanced Animations & Interactions with Ionic Going into writing this book I felt that I had a good understanding of the issues facing web animations in general and how to implement… continue reading.
As part of the lead up to the launch of my next book Advanced Animations and Interactions with Ionic I am releasing the source code for one of the advanced examples in the book for free. You can grab the source code for both Ionic/StencilJS and Ionic/Angular below: StencilJS: Advanced Card Transition Animation Angular: Advanced Card Transition Animation If all goes to plan both the StencilJS and Angular editions of the book will be available at launch, with React to follow… continue reading.
In this tutorial, we will be building out two custom components in Ionic that enable us to drag and drop elements on the screen. We will be able to mark elements as “draggable” to enable the dragging functionality, and we will be able to define a “droppable” target zone for where elements can be dropped. Here is a quick example I built using the end result: You will find that there are plenty of libraries/packages available for implementing drag/drop functionality in Ionic… continue reading.
When animating the size or position of elements in our applications, we should (generally) only use the property to achieve this. Animating anything else - like , , , , and - will result in triggering a browser “layout”. This is where the browser needs to recalculate the positions of everything on the screen, which is the most expensive step in the browser rendering process in terms of performance. If we trigger this process many times in quick succession (by animating a… continue reading.
There are many instances in which we can use a staggered animation in our applications, but it is perhaps most commonly used with lists or thumbnails/galleries. The idea is that we apply an animation (usually the same animation) to multiple elements, but we execute those animations with an increasing amount of delay for each element. The result is an appearance that these individual animations are linked together, creating a kind of “flow” of elements animating on to the… continue reading.
In my recent tutorials, I have been explaining how to build more complex UI/UX patterns into Ionic applications with the Ionic Animations API and the improved gesture support in Ionic 5. I often keep a look out for impressive gestures or animations whether they are in traditional “native” mobile applications, or just a designers concept, and see if I can implement something the same or similar in Ionic. My goal is to help dispel the perception that interesting interactions… continue reading.
I’ve been with my wife since around the time Tinder was created, so I’ve never had the experience of swiping left or right myself. For whatever reason, swiping caught on in a big way. The Tinder animated swipe card UI seems to have become extremely popular and something people want to implement in their own applications. Without looking too much into why this provides an effective user experience, it does seem to be a great format for prominently displaying relevant… continue reading.
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.
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 the… continue reading.
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 running… continue reading.
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 requests… continue reading.
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 using… continue reading.
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.
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.
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 better… continue reading.
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.
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 is… continue reading.
