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.

Read more…

This is a guest post from Aaron Saunders. Aaron is a developer and CEO at Clearly Innovative. This is the first of a series of posts Aaron wrote about using Firebase and React hooks with Ionic React.

In this post, I’ll walk through the process of creating a custom hook that uploads a file to Firebase.

Since the focus of the post is the custom hook, I will focus on pieces of code related to the hook, how it is called, and how it is implemented, not the surrounding code. However, the complete source code for the project is provided here.

Read more…

Happy New Year Ionites! 2019 was a huge year for Ionic. We released new products (open source and commercial), shipped updates to our existing products, added so many wonderful customers, and continued to build the foundation to scale Ionic into a much larger business.

Here’s a recap of everything that happened last year and what we’re doing this year:

Read more…

One of the biggest updates in the pipeline right now is the upcoming release of Angular 9.0.0. Currently in RC, Angular 9.0 will hopefully ship early next year. But this release includes so much that I thought it required a post to highlight some of the most important updates. Now for Ionic devs, why should they care about this? Well given that most apps currently are built with Angular and Ionic, any improvements to the overall ecosystem should always be welcomed! But given the goals of Angular 9.0, this directly impacts (in a positive way) Ionic be being able to ship faster and smaller apps, in faster manner. For reference, we’ll be looking at the Angular version of the Star Track demo app – built with Ionic 4 and Angular – and checking out the improvements.

Read more…

Last month we announced Ionic React, and have been blown away by the reception from both the Ionic community as well as the React community. Today, we are excited to launch a companion project to Ionic React that makes tying into device hardware and APIs a breeze in an Ionic React project.

You may have heard of Capacitor, our native app management layer that lets you leverage APIs that work across iOS, Android, Electron, and the web, all with one code base and JS. You can use Capacitor to access various device features, such as the camera, GPS, network status, and more. The SDK for Capacitor is vanilla JavaScript, which any web framework can use. However, we wanted to take the experience of accessing Capacitor APIs to the next level by making them feel like a natural extension to the React experience.

So today, we are launching Ionic React Hooks, a collection of React hooks that act as wrappers around the Capacitor APIs, as well as some other Ionic platform-specific features. With Ionic React Hooks, you can start accessing device hardware in just a few lines of code, all while coding in a familiar React paradigm.

What’s the Hook for Hooks?

Hooks were introduced in React v16.8 and allow a way to access certain React features in a simple and clean manner while using functional components.

Before hooks, you pretty much needed to use class-based components to have local state, make web API calls, use React’s context, or tie into a component’s lifecycle events. While class-based components are great, developers often prefer to use the functional approach, which consists of a simple function that takes in a props object and returns a React element. Functional components are often smaller and easier to understand than their class-based counterparts.

Hooks make it possible to do more complex tasks in a functional component.

For more information about React Hooks and a primer on how they work, head over to React’s guide to hooks here.

At Ionic, we are fans of functional components and hooks, so it was natural to want a way to consume the APIs we build using a hooks based approach. And that’s where Ionic React Hooks comes in! Let’s see how to get started.

Read more…

Whenever I need to add a native device feature to an Ionic app, my first instinct is to reach for a native plugin first. However, a built-in browser Web API could be the better alternative, offering the same feature set as well as improved performance and reduced maintenance cost.

Web API Benefits

There are several benefits to using a Web API over a native plugin, including:

• Reduce app bloat: By design, native plugins bring in additional code to a project, increasing app download size for your users. A Web API, however, is already available.
• Increase app performance: Less plugin code leads to better overall performance. This is especially a factor in app startup timing, where most plugins are initialized and loaded into memory.
• Reduce app maintenance: Web APIs are less likely to degrade over time as new mobile operating system updates are released. Browser vendors regularly ship critical security updates as well – no action required by you or your app users.
• Faster development cycles: Less reliance on native plugins decreases the need to test on device hardware, which slows down development. That’s what makes ionic serve so powerful – build your entire app locally in the browser, then test on a device towards the end of the development cycle.
• Better cross-platform support: Web APIs make it easier to bring your app to more platforms. For example, the ability to deploy an iOS or Android app as a PWA.

Read more…

Note: In this post, I’m using “Mobile First” to refer to the business concept of launching an app before a web experience, not the responsive web design use of the term.

For app startups, nothing is more critical than user adoption. Unfortunately, today’s app stores are hyper competitive places, and it’s nearly impossible to stand out on your own and build an initial user base without an existing audience or serious cash to invest in advertising and paid app installs. Cash that most new app teams just don’t have. The days of “build it and they will come” are long gone, and now the name of the game in mobile is “pay to play.”

It doesn’t have to be this way. Companies that have historically been web-first have employed a very different strategy to acquire users. That strategy is to find a passionate early user base or community, build solutions to problems that they have, grow an audience through email and social, and produce content that can be shared and efficiently indexed in Google. Many teams can do this without spending any money on user acquisition. Good luck doing that on the app store!

That last step of indexing content ends up being the engine for organic user adoption that many web-based apps and companies survive and thrive on. It’s no surprise that organic search ends up being the primary driver of traffic for most web-based companies. For many it’s likely upwards of 75% of all traffic! And it’s free!

But today, many teams are looking at a different approach to entering a market, known as “Mobile First.” Let’s take a step back and examine today’s popular “Mobile First” strategy to see how it compares to the classic “Web First” approach.

Read more…

With the launch of Ionic React a few weeks back, the reception from the community has been incredible. We’re thrilled that so many of you are excited to use Ionic React, and I myself was excited to try React a bit more. Given that I spend most of my time with Angular, it was fun to see what another framework could offer as I learned how to “think” in React.

With that in mind, I wanted to share my experience rebuilding a personal demo app that I have built in Angular (Star Track) and rebuild it in React. For this exercise, I’m going to focus on how I created a Progressive Web App (or PWA) with Ionic React. Let’s dive in!

Read more…

Today we’re thrilled to announce the general availability of Ionic React, a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. All with one code base, standard React development patterns, and using the standard react-dom library and huge ecosystem around the web platform.

Ionic React represents the most significant change in Ionic Framework’s history and opens up Ionic Framework to a whole new audience. Given that, we’d like to tell a bit of the story about how we got here, why we built it, and who it’s for (jump to the end if you just want to see some code, I won’t be offended 😅).

Read more…

Hey folks! I wanted to take a moment and share some comments/thoughts about a recently released update from Apple regarding web apps and the iOS App Store.

Recently developers were sent out an email from Apple about Web Based Apps (noted as HTML5 Apps) in the App store. Before we jump into the post, let me just say that this update does not affect Ionic apps in any way. You can read the update on their site here.

When it comes to updates from Apple, everyone seems to take notice, so I figured it would be good to go over this update and answer some potential questions you might have.

Read more…