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…

Recently, Apple introduced a new App Submission warning stating that they are formally deprecating UIWebView. We wanted to let the Ionic community know what this warning is all about and how the Ionic team plans to address it.

Update 11/25/2019: The Cordova team has released Cordova iOS 5.1.0, which disables UIWebview at compile time. To use it, ensure you have a WKWebView plugin installed, then add <preference name="WKWebViewOnly" value="true" /> to your config.xml file. Complete details below.

The bottom line: Apple is still accepting submissions of Ionic-based iOS apps that contain references to UIWebView. To meet the new requirement, simply update to the latest version of Capacitor. If you’re using Cordova, see below.

Read more…

Storing photos in a Cordova-based Ionic app can be challenging. Several concepts and layers of the app development stack are involved, including selecting the best Camera plugin configuration, saving files to permanent storage, and understanding how to render an image in a WebView.

In this post, we’ll use the Ionic Native Camera plugin to take photos, then save them to the app’s filesystem using the Ionic Native File plugin.

Note: For a guide covering similar concepts using Capacitor’s Camera and File plugins, see Josh Morony’s great guide here. For more advanced Cordova examples covering images, video, and audio, see Simon Grimm’s Ionic Media Files guide.

Read more…

With the success of the last Ionic Show episode, we wanted to keep the momentum going and make sure we keep creating new episodes to keep our community up to date with all the latest and greatest happenings inside of Ionic. With that, I’m pleased to announce that the latest episode of the Ionic show is now available!

Read more…

Today we are excited to announce that the Release Candidate for Ionic React has launched and is now available!

We released the first Beta of Ionic React in February, and since then, we have received a ton of feedback and contributions from the community. Based on this feedback, we have been working to make Ionic React a great experience not only for React developers but for anyone looking to jump into web development.

Ionic React RC marks the first major release of our vision to bring Ionic development to more developers on other frameworks. This was made possible by Ionic v4.0, which was completely re-written from the ground up focusing on web standards and not dependent on a particular framework. Ionic v4.0 makes it possible for us to target many frameworks while still having our core components be a single code base shared across all these frameworks.

Read more…