DEV Community: Liam DeBeasi

Announcing Ionic Vue

Liam DeBeasi — Thu, 15 Oct 2020 17:21:33 +0000

Today I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take advantage of all the great new features that recently shipped in Vue 3.

Ionic Vue represents a big milestone in Ionic Framework's development after the release of our React integration earlier in 2020. This launch is the culmination of our “Ionic for Everyone” push that was kicked off in early 2019 with the release of Ionic Framework v4. As a result, I'd like to share some context as to how we got here and where we are going next.

Click here if you just want to get started building with Ionic Vue, I won't be offended. 😊

A bit about Ionic Framework 💁‍♀️

If this is your first time hearing about Ionic, Hello there! 👋

Ionic Framework is an open source UI toolkit focused on building high quality mobile apps for native iOS, native Android, and the web! From the ground up, it's built with HTML, CSS, and JavaScript, so web developers should feel right at home building with our components. Our components allow developers to build native experiences, all while using web technology. Today, Ionic powers > 15% of all apps.

A Brief History 📖

You might recall us releasing an Ionic Vue beta back in early 2019. That version was built for Vue 2 and lacked features such as proper v-model support. While developing Ionic Vue and Ionic React side by side, we quickly realized they had a lot in common. In fact, we found ourselves implementing similar features and fixing the same bugs multiple times.

Also around this time, the Vue team was starting to ramp up development on Vue 3, and we decided it made sense for Ionic Framework to support that version instead. We paused Ionic Vue development and shifted focus to Ionic React. With its completion, we found ourselves with all the key learnings we needed to develop Ionic Vue, and we are really happy with the way it turned out… if we may say so ourselves.

A Big Milestone 🏆

Since its launch in January 2019, we wanted Ionic Framework v4 to be known as the app framework for every web developer. To that extent, we lovingly referred to Ionic Framework v4 as "Ionic for Everyone." This release rebuilt Ionic Framework from the ground up with Web Components. While this change took time, it ultimately allows us to support any framework without having to re-write Ionic Framework.

Today, we are committed to supporting not just Angular, but also React and Vue. In a sense, the release of Ionic Vue is an indication that our efforts have paid off. Neither the React nor the Vue integrations required any major rewrites of Ionic Framework, and the Ionic API remains remarkably similar across framework integrations.

The release of Ionic Vue demonstrates that any web developer can build performant, cross platform applications with Ionic Framework using the framework of their choice.

Getting Started 🏃‍♂️

Note: The first official version of Ionic Vue is v5.4.0

Getting started with Ionic Vue is a breeze. First, be sure you have the latest version of the Ionic CLI installed:

npm install -g @ionic/cli@latest

If you used the Ionic Vue beta, be sure to update your CLI as you likely were using a pre-release version.

From here, we can use the Ionic CLI to create an Ionic Vue starter application:

ionic start my-vue-app --type vue

The CLI will guide you through the setup process by first asking a few questions. Once the application has been installed, you can start the development server by running:

ionic serve

Under the hood, the ionic serve command uses the Vue CLI to compile your app, start a dev server, and open your app in a new browser window.

From here, we have access to all of Ionic Framework's components:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

To use the components, you need to import them from the @ionic/vue package and provide them to your Vue component.

Building upon the Vue Router 🧭

Like with the Angular and React versions of Ionic Framework, we chose to use the official router that is provided with Vue, vue-router. To handle Ionic Framework’s animations, we have extended the Router’s API through the ion-router-outlet component. This component is used in place of the typical router-view component that is used in Vue applications.

Using this modified router is mostly the same as the regular vue-router except with a few different imports. Lazy loading works out of the box too!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/lazy',
      component: () => import('@/views/Lazy.vue')
    }
  ]
})

Rather than import createRouter and createWebHistory from vue-router, you need to import them from @ionic/vue-router. These imports wrap the vue-router functions of the same name and provide a few additional details that let Ionic Framework work well within the Vue environment.

While we recommend relying on the tooling that Vue Router provides, we have added support for the router-link property on components that allow for it:

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

You can also specify the direction using router-direction and a custom animation using router-animation.

For transitions and lifecycle events to work properly, each Ionic page must be wrapped in an ion-page component:

<template>
  <ion-page> ... </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import { IonPage } from '@ionic/vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonPage },
  });
</script>

Lifecycle events can be accessed by providing the appropriate event as a method:

export default defineComponent({
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
});

Doing Things the Vue Way 🛠

@ionic/vue includes support for every Ionic Framework component except for virtual scroll. We are embracing the community-driven solutions for virtual scroll in Vue applications and will be providing more information on how to get started with these solutions soon! Using components in Ionic Vue will still feel familiar, but will use Vue’s template syntax:

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { IonInput } from '@ionic/vue';
  export default defineComponent({
    name: 'MyComponent',
    components: { IonInput },
    methods: {
      onChange: (ev: CustomEvent) => {
        ...
      }
    },
    setup() {
      const inputValueRef = ref('');
      return { inputValueRef };
    }
  });
</script>

Overlay components, such as ion-modal, can be created dynamically by importing the appropriate controller from @ionic/vue:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { IonButton, IonContent, IonPage },
    setup() {
      const openModal = async () => {
        const modal = await modalController.create({
          component: ModalExample,
        });
        await modal.present();
      };

      return { openModal };
    },
  });
</script>

Overlay components can also be used directly in your component's template:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setModal(true)">Open Modal</ion-button>
      <ion-modal :is-open="isOpen" @onDidDismiss="setModal(false)">
        <ModalExample></ModalExample>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
  import ModalExample from '@/components/Modal.vue';
  export default defineComponent({
    name: 'HomePage',
    components: { ModalExample, IonButton, IonContent, IonModal, IonPage },
    setup() {
      const isOpen = ref(false);
      const setModal = (state: boolean) => (isOpen.value = state);

      return { isOpen, setModal };
    },
  });
</script>

Building your way with either TypeScript or JavaScript ✌️

We love TypeScript at Ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity - in their tooling, languages, and more. In fact, it’s likely what drew you to Vue in the first place. Start simple - then scale up as needed.

So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app (see above), follow these steps:

Remove TypeScript dependencies:

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript

Change all .ts files to .js. In a blank Ionic Vue app, this should only be router/index.ts and main.ts.
Remove @vue/typescript/recommended and @typescript-eslint/no-explicit-any: 'off', from .eslintrc.js.
Remove Array<RouteRecordRaw> from router/index.js.

Truly native experiences with Vue 📱

Vue does not natively support mobile app development, but fortunately, you can pair Ionic Vue with Capacitor. Using Ionic’s official cross-platform native runtime, you can deploy your apps as progressive web apps and iOS/Android apps - all from the same codebase.

Here’s an example using two Capacitor APIs, the Camera and Filesystem. After opening the camera on the mobile device, the user can take a new photo, then save it to device storage.

const takePhoto = async () => {
  const cameraPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100,
  });

  const base64Data = convertPhotoToBase64(cameraPhoto);

  const savedFile = await Filesystem.writeFile({
    path: 'myphoto.jpg',
    data: base64Data,
    directory: FilesystemDirectory.Data,
  });
};

Notice that there’s no mention of “web”, “iOS”, or “Android” in the code. That’s because Capacitor automatically detects the platform the app is running on, and calls the appropriate native layer code. With Core APIs like these, coupled with full access to native SDKs, Capacitor empowers you to build truly native mobile apps.

What's Next? 🛣

For a more in-depth look at Ionic Vue, we recommend checking our Quickstart Guide. For a more hands-on experience, take a look at our Build Your First App Guide.

While the release of Ionic Vue is an important milestone for Ionic Framework, there is always more to do. We plan on releasing complete Server Side Rendering (SSR) support for Ionic Vue in the future. Keep an eye out for a blog post on how you can get started with that!

In terms of general Ionic Framework development, we have a lot of exciting things planned, so stay tuned. Also, let us know where you would like to see Ionic Framework go next by tweeting at us @ionicframework!

Thank You 💙

I want to give a huge thank you to all the community members who helped test the Ionic Vue beta and provide feedback; this project would not have been possible without your support. Special thanks to the folks over at Modus Create and specifically Michael Tintiuc for helping us get Ionic Vue to where it is today.

We are thrilled about Ionic Vue and are excited to welcome all Vue developers to the Ionic community. We are so glad you are here and cannot wait to see what you build!

Announcing the (new) Ionic Vue Beta

Liam DeBeasi — Wed, 09 Sep 2020 17:59:54 +0000

Anyone else feeling déjà vu? It feels like not too long ago we were launching the Ionic Vue beta built with Vue 2. Given that the release of Vue 3 is quickly approaching, we thought this would be a perfect time to start preparing Ionic Vue for launch. Today, I am thrilled to announce the new and improved Ionic Vue beta built with Vue 3!

What is Ionic Framework? 🤔

Ionic Framework is a collection of UI components used for building high-quality, cross platform applications. These applications can be deployed natively to iOS and Android devices or to the web as a progressive web app (PWA). These components are written in HTML, CSS, and JavaScript, making it easy to build modern, high quality user interfaces that perform great everywhere.

We are excited to welcome Vue developers to the Ionic Framework community with the release of the Ionic Vue beta!

Hold up, didn't you do a beta last year? 🤚

We sure did! At the time we released the old Ionic Vue beta, we were simultaneously developing Ionic Vue and Ionic React side by side. We quickly realized that the framework integrations for Ionic Vue and Ionic React had a lot in common. We found ourselves implementing similar features and fixing bugs multiple times.

Additionally, the Vue team was starting to ramp up development on Vue 3, and we wanted Ionic Framework to support that version.

After a while we decided to press pause on Ionic Vue to focus on Ionic React. Since then, we have taken everything we learned with Ionic React and incorporated it into Ionic Vue, and we are really happy with the way it turned out.

Getting Started 🏃‍♂️

We have updated Ionic Vue to support not only Vue 3 but the all new Vue Router. Getting started with Vue and Ionic is a breeze by installing a development version of the Ionic CLI:

npm install -g @ionic/cli@testing

ionic start my-app tabs --type vue --tag vue-beta

Using --tag allows you to download the latest beta version of an Ionic Vue starter. Once the application has been installed, you can start a development server by running:

ionic serve

Only version 0.3.1 and newer of the Ionic Vue beta are compatible with Vue 3. To continue using the Ionic Vue beta with Vue 2, version 0.0.9 should be used.

From here, we now have access to all of Ionic Framework's components:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Hello Vue</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Hello Vue</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, } from '@ionic/vue';
export default {
  name: 'HomePage',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },
};
</script>

To use the components, you need to import them from the @ionic/vue package and provide them to your Vue component.

Building on Vue Router 🧭

One of the big missing pieces of the old Ionic Vue beta was stack-based navigation. This new version of Ionic Vue brings the same robust stack management that is found in other versions of Ionic Framework. Like with the Angular and React versions of Ionic Framework, we chose to use the official router that is provided with Vue, vue-router. In order to handle Ionic Framework's animations, we have extended the Router's API through the ion-router-outlet component. This component is used in place of the typical keep-alive, router-view, and transition components that are used in Vue applications.

Using this modified router is mostly the same as the regular vue-router except with a few different imports. Lazy loading works out of the box too!

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: ‘/lazy’,
      component: () => import(‘@/views/Lazy.vue’)
    }
  ]
})

Rather than import createRouter and createWebHistory from vue-router, you need to import them from @ionic/vue-router. These imports wrap the vue-router functions of the same name, and provide a few additional details that let Ionic Framework work well within the Vue environment.

While we recommend relying on the tooling that Vue Router provides, we have added support for the router-link property on components that allow for it:

<ion-item router-link="/child-page">
  <ion-label>Click Me to Navigate</ion-label>
</ion-item>

You can also specify the direction using router-direction and a custom animation using router-animation.

In order for transitions and lifecycle events to work properly, each Ionic page must be wrapped in an ion-page component:

<template>
  <ion-page> ... </ion-page>
</template>

<script>
import { IonPage } from '@ionic/vue';
export default { 
  name: 'HomePage', 
  components: { IonPage } 
};
</script>

Lifecycle events can be accessed by providing the appropriate event as a method:

export default {
  name: 'HomePage',
  components: {
    IonPage
  },
  methods: {
    ionViewDidEnter: () => {
      ...
    },
    ionViewDidLeave: () => {
      ...
    },
    ionViewWillEnter: () => {
      ...
    },
    ionViewWillLeave: () => {
      ...
    }
  }
 }

Doing Things the Vue Way 🛠

@ionic/vue includes support for almost every Ionic Framework component. Using the components will still feel familiar, but will use Vue's template syntax:

<template>
  <ion-input v-model="inputValueRef" @ionInput="onChange($event)"></ion-input>
  Value: { inputValueRef }
</template>

<script>
setup() {
  const inputValueRef = ref(‘’);
  return { inputValueRef };
}
</script>

Overlay components, such as ion-modal are created dynamically by importing the appropriate controller from @ionic/vue:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openModal()">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import ModalExample from '@/components/Modal.vue';
export default {
  name: 'HomePage',
  components: { IonButton, IonContent, IonPage },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: ModalExample
      });
      await modal.present();
    }

    return { openModal }
  }
}
</script>

What's Next? 🚢

We are looking for feedback in the following areas:

Router Integration
Tabs Usage
Performance

While @ionic/vue is fairly stable, it is still in beta. As a result, we do not recommend using it in production environments just yet.

If you encounter any bugs, want to request a missing feature, or want to suggest an enhancement to Ionic Vue, feel free to create a new issue on GitHub. Please be sure to indicate in the issue title that you are using the new Ionic Vue beta!

We have also published completely revamped documentation with this release of Ionic Vue. The docs go into more detail for certain Ionic Vue concepts, so we recommend checking those out. These docs are also a work in progress, so feel free to report any issues you find or enhancements you would like to see.

We love how @ionic/vue turned out and hope you do too. It is a great time to be building apps with Ionic Framework, and we can't wait to see what you create! 🚀

Acknowledgments

We want to give a big thank you to the folks over at Modus Create. They have been instrumental in helping Ionic Vue get to where it is today. More specifically, we want to thank Michael Tintiuc who has worked closely with our engineering team to get Ionic Framework working smoothly in Vue applications.

Keyboard improvements for Ionic Apps

Liam DeBeasi — Wed, 06 May 2020 18:26:43 +0000

Let's face it: the keyboard is a constant source of pain and frustration for users and developers. Much of this has to do with the limited control browsers provide with keyboards. For native apps, we've even gone as far as creating plugins to help ease the pain of keyboards. Thankfully, browser vendors have agreed that the keyboard experience on the web is less than ideal and have decided to do something about it. In this blog post, we’ll look at some new APIs available on the web and discuss how we're using them in Ionic to help developers.

Customizing the keyboard

If you think of a standard mobile keyboard, there are probably a few different layouts that come to mind. You have your standard text-based keyboard and one for telephone numbers. Well what if I told you that there are more keyboards than that but have not really been available to web developers?

For example, there's a specific keyboard available for helping users type an email address. There's also a keyboard that provides specific keys when entering text into a search bar. Want the layout of a tel input but just for regular numbers? There's a keyboard for that as well. There are many more examples of this, but the point is, these keyboards have not been something web developers could control or opt into. Thankfully, we can leverage inputmode and enterkeyhint to help tell the keyboard how to behave.

inputmode

The inputmode attribute allows developers to specify what type of data might be entered into an input. This will tell the browser to show a keyboard that includes keys relevant to what the user may enter. For example, inputmode="email" will display a keyboard with the @ key as well as other optimizations for entering emails.

Inputs that require a certain data type should use the type attribute instead. For example, inputs that require an email should use type="email" rather than specifying an inputmode. This is because the data that will be entered is always going to be in the form of an email. On the other hand, if the input accepts an email or a username, using inputmode=”email” is appropriate because the data being entered is not always going to be an email address.

Here is an example of using inputmode:

<ion-item>
  <ion-label>To: </ion-label>
  <ion-input inputmode="email"></ion-input>
</ion-item>

iOS without inputmode

iOS with inputmode

Android without inputmode

Android with inputmode

In the example above, we have an email compose screen that lets users type in either a name or an email address of a recipient. When using inputmode="email" both iOS and Android will display an @ key as well as other email-specific keyboard optimizations.

The inputmode attribute is supported in Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode

enterkeyhint

The enterkeyhint attribute allows developers to specify what type of action label or icon should be shown for the "Enter" key. Using enterkeyhint gives the user a preview of what will happen when they tap the “Enter” key. The value that should be specified here depends on the context of what the user is doing. For example, if the user is typing into a search box, developers should ensure that the input has enterkeyhint="search".

Here is an example of using enterkeyhint:

<ion-item>
  <ion-label>Message: </ion-label>
  <ion-input enterkeyhint="send"></ion-input>
</ion-item>

iOS without enterkeyhint

iOS with enterkeyhint

Android without enterkeyhint

Android with enterkeyhint

In the example above, we have a chat screen that lets users type and send a message. When using enterkeyhint="send", both iOS and Android will show a Send label on the "Enter" key.

The enterkeyhint attribute is supported in Chrome 77+ and iOS Safari 13.4+: HTML Spec.

Keyboard events

Aside from customizing how the keyboard looks, developers often need to confirm if the keyboard is visible or not. This functionality has traditionally been limited to native apps leveraging plugins in Capacitor or Cordova. This is where the Visual Viewport API can help.

With the introduction of the Visual Viewport API, apps running in a mobile browser or as a PWA can now detect the presence of an on-screen keyboard. This is useful for adjusting the positioning of an input that would otherwise be hidden by the keyboard.

The mobile web contains two viewports: The layout viewport and the visual viewport. The layout viewport covers all elements on a page and is the part of the page that elements with position: fixed stick to. The visual viewport is the part of the page we actually see. The visual viewport can move around when panning and zooming, even if elements with position: fixed remain where they are.

Using this API we can detect when an on-screen keyboard is presented or when a page is zoomed using a pinch-to-zoom gesture. For more information about the Visual Viewport: https://developers.google.com/web/updates/2017/09/visual-viewport-api.

Now that we can detect when a keyboard is being shown or not, we can actually provide correct events for the user! Ionic Framework v5.1 brings two new events developers can listen for: ionKeyboardDidShow and ionKeyboardDidHide.

Ionic Keyboard Events

The ionKeyboardDidShow and ionKeyboardDidHide events are dispatched from window. The ionKeyboardDidShow event includes a payload that has an approximation of the keyboard height in pixels. Developers can use that information to translate an input or scroll to an input that would otherwise have been hidden by the keyboard.

Here is an example of using the keyboard events:

const input = document.querySelector('ion-input');

window.addEventListener('ionKeyboardDidShow', (ev) => {
  const { keyboardHeight } = ev.detail;

  input.style.setProperty(
    'transform',
    `translate3d(0, ${keyboardHeight}px, 0)`
  );
});

window.addEventListener('ionKeyboardDidHide', () => {
  input.style.removeProperty('transform');
});

In the example above, we listen for the keyboard lifecycle events and translate the input according to the keyboard height.

While the Visual Viewport resize events typically do not fire in Capacitor and Cordova applications, the ionKeyboardDidShow and ionKeyboardDidHide events still fire when using the native keyboard plugin.

Ionic Keyboard Events are supported in Chrome 62+ and iOS Safari 13.0+.

Trying it out

These keyboard improvements are part of the framework’s 5.1 release. Our goal for these features is to make it easier than ever to customize and account for on-screen keyboards and greatly improve the user experience of your applications.

To get started with keyboard customization, checkout some of the MDN and HTML Spec links to learn more about inputmode and enterkeyhint. We'll be rolling our our own docs in the coming weeks, and will update this post with a reference to them.

We encourage anyone to file bugs or feature requests on our GitHub Issue Tracker.

Introducing Ionic Animations

Liam DeBeasi — Thu, 16 Jan 2020 19:09:52 +0000

Building efficient animations has traditionally been hard. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many of these animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation’s values at every step in a requestAnimationFrame event loop.

To combat these issues we have created Ionic Animations. Ionic Animations is an open source animations utility that provides the tools developers need to build highly performant animations regardless of the framework they are using. Ionic Animations is more performant than leading animation libraries, which is why we are especially excited about its release. Officially part of our upcoming 5.0 release, we wanted to take some time to dig into what Ionic Animations is and why it is different than other animation libraries.

Why Ionic Animations?

As mentioned previously, many animation libraries use a JavaScript-driven approach to running your animations. This approach is problematic as not only is the browser rendering your animation, it is also executing your animation event loop code at every single frame in the same thread as the rest of your application’s logic. By forcing the browser to execute your code on every frame, valuable CPU time is being used that will ultimately impact overall frame rate and energy consumption. While overall frames per second (FPS) is important, it is also crucial to understand the impact your animation is having on the device’s resources.

Ionic Animations uses the Web Animations API to build and run all of your animations. By doing this, we can offload all of the work required to run your animations to the browser. As a result, the browser is able to schedule and make any optimizations to your animations that it needs, allowing your animations to run as smoothly as possible. This leads to high FPS while maintaining low CPU usage and therefore a lower energy impact. While most modern browsers support Web Animations, we fallback to CSS Animations for browsers that do not. In these instances, the performance difference in switching between the two should typically be negligible.

Ionic Animations

The Ionic Animations API is straight forward and allows developers to create grouped animations, gesture animations, and much more. It currently powers all animations in Ionic Framework including the gesture animations for the menu and swipe to go back.

Since we are using native web APIs, all animations created naturally have a low CPU and battery usage overhead, allowing your animations to take full advantage of the processing resources available to them.

Let’s take a look at some examples.

Ionic Animations provides a chainable API that lets you declare your animation properties with ease. In the example below we’ve created a pulsating effect by animating the scale and changing the direction of the animation on each iteration via the direction method.

const animation = createAnimation()
  .addElement(document.querySelector('.square'))
  .duration(1000)
  .direction('alternate')
  .iterations(Infinity)
  .keyframes([
    { offset: 0, transform: 'scale(1)', opacity: '1' },
    { offset: 1, transform: 'scale(1.5)', opacity: '0.5'
 }
  ]);

animation.play();

You can also group animations and control them using a single parent animation. This gives you the ability to control complex animations with different durations, easings, and other properties.

const animationA = createAnimation()
  .addElement(document.querySelector('.square-a'))
  .fromTo('transform', 'scale(1)', 'scale(1.5)');

const animationB = createAnimation()
  .addElement(document.querySelector('.square-b'))
  .fromTo('transform', 'scale(1)', 'scale(0.5)');

const parentAnimation = createAnimation()
  .duration(1000)
  .addAnimation([animationA, animationB]);

parentAnimation.play();

Chaining animations is as simple as awaiting a promise!

const animationA = createAnimation()
  .addElement(document.querySelector('.square-a'))
  .duration(1000)
  .fromTo('transform', 'scale(1)', 'scale(1.5)');

const animationB = createAnimation()
  .addElement(document.querySelector('.square-b'))
  .duration(2000)
  .fromTo('transform', 'scale(1)', 'scale(0.5)');

await animationA.play();
await animationB.play();

Ionic Animations also gives you the ability to control animation playback and provides hooks to perform DOM reads and writes, as well as add or remove classes and inline styles.

const animation = createAnimation()
  .addElement(document.querySelector('.square'))
  .duration(1000)
  .fromTo('transform', 'scale(1)', 'scale(1.5)');
  .afterStyles({
    'background': 'green'
  })

await animation.play();

Performance Comparisons

When developing Ionic Animations we performed a number of tests to ensure that it was living up to our expectations in terms of performance and resource consumption. We also looked at other animation libraries such as anime.js, GSAP, and Velocity.js to see how Ionic Animations compares to some of the leading alternatives.

We developed a simple test to see how these different libraries performed when animating a large number of elements. We ran this test on both a desktop device as well as a mobile device to get a sense of performance when dealing with different hardware constraints. The test we built animates a variable number of bubbles floating up the screen at different rates of speed.

We developed the following performance benchmarks to look at:

Average FPS — This is the average frames per second over the course of the animation test. This is typically the benchmark that end users will notice the most, so it’s important that this is as close to 60fps as possible.
Main Thread Processing — This is the amount of work that the browser needs to do as a result of your application’s code. This includes things such as layouts, paints, and computing JavaScript. All of this happens in the same thread as the rest of your application’s logic.
Average CPU Usage — This is the average percentage of the CPU that is actively working during the test as a result of your code. While using the CPU is inevitable, it is important to minimize the overall CPU usage and ensure that the usage goes back to idle as soon as possible.
Energy Impact — This is the effect the animation has on energy consumption. Animations with a higher energy impact will drain a device’s battery faster than animations with a lower energy impact.

This blog post will show a subset of all data collected. You can view the full report here. The desktop test shows Ionic Animations using the Web Animations API in Safari while the mobile test shows Ionic Animations using the CSS Animations fallback. You can also run these tests for yourself on the demo site that we have setup: flamboyant-brattain-9c21f4.netlify.com

Desktop Animation Benchmarks

This first test looks at the Ionic Animations performance relative to other libraries on a desktop machine. ^[1]

Frames per Second (FPS)

Higher is better

Average CPU Usage

Lower is better

The data above shows Ionic Animations easily achieving 60fps over the course of the test while maintaining a low CPU usage. The other libraries had CPU usages of >100% and high energy impacts while only achieving framerates in the 30s and 40s.

On the desktop test, Ionic Animations shows that it can achieve smooth 60fps animations while minimizing not only the amount of work it has to do in the CPU but also the impact it has on your device’s battery.

Mobile Animation Benchmarks

This second test was run on an iPhone 7. We originally wanted to run the same desktop test with 1000 bubbles, but GSAP was unable to run the animation due to a high startup overhead, so we opted to test with 500 bubbles instead. ^[2]

Frames per Second (FPS)

Higher is better

Average CPU Usage

Lower is better

Similar to the desktop results, Ionic Animations easily achieves 60fps while having a low CPU usage relative to other libraries. The only other library that comes close to matching the Ionic Animations FPS is GSAP, but even then GSAP had to use almost 82% of the CPU to do that while Ionic only needed about 11%.

Once Web Animations ships on iOS you can expect to see an even lower CPU usage for Ionic Animations!

Getting Started and Providing Feedback

As we’ve seen in the tests above, Ionic Animations brings performant animations with a low energy impact to both desktop and mobile devices. We are very excited to have developers start using it.

Ionic Animations will be available soon in an upcoming release of Ionic Framework.

We encourage anyone using Ionic Animations to file bugs or feature requests on our GitHub issue tracker.

We hope you enjoy using Ionic Animations!

1: The desktop animation test was conducted on macOS 10.14.6 with Safari Technology Preview 98.

2: The mobile animation test was conducted on an iPhone 7 running iOS 13.1.