DEV Community: Ionic

Introducing the New Overlay Hooks for Ionic React

Ely Lucas — Mon, 09 Aug 2021 21:48:10 +0000

Hello Friends! We know everyone is excited about the new features in Ionic Framework 6.0 beta, but that doesn't mean we're done with V5! In Ionic React 5.6, we packaged up a new set of hooks for controlling our overlay components that we think you might like. What is an overlay you ask? It’s the term we give components that display over your current content, such as alerts, modals, toasts, etc.

In this post, I’m going to go over how to use the new hooks to display these components in your apps. But first, let's do a quick recap on how overlays worked before, and some of the challenges that you might encounter with them.

Overlay Components

Each of the overlays has a React component that is exported from @ionic/react, such as IonAlert and IonLoading. These components take a prop called isOpen, which determines if the overlay should be displayed or not:

<IonAlert
  isOpen={showAlert}
/>

These components are great and they aren’t going away. The new hooks don't deprecate them in any way. However, there's some ceremony you have to observe to use them.

First, managing the state that handles the isOpen prop could be a challenge. If the state was contained in the component that the overlay was in, then it was no problem (like a local state variable from useState). However, if the action to display the overlays was in a different part of the app, then you needed to use some state management technique or library to pass the isOpen prop along.

Second, each of the Overlay components required you to provide an onDidDismiss callback that would flip the isOpen prop back to false in case the overlay dismissed itself somehow. Not overriding it would cause isOpen to stay true, and if your app tried to show the overlay again, then you would be setting true to true, and Ionic wouldn’t detect the change and, thus, wouldn't display it again.

<IonAlert
  isOpen={showAlert}
  message='Hello there friend'
  onDidDismiss={() => setShowAlert(false)}
/>

A third challenge was that it was difficult to display an overlay from outside of your component; for instance, if you wanted to display an alert when an API request failed. Ionic Angular had controller instances you could import to use in services to display overlays. In React, this was more difficult to do.

The new overlay hooks in Ionic React 5.6 help with all these scenarios.

Overlay Hooks

The goal of the overlay hooks was to reduce this process and to make the usage of the overlays feel more natural for those writing functional React components.

To get started with the hooks, you import the hook for the overlay you want to use from @ionic/react like so:

import { useIonAlert } from '@ionic/react'

Next, in your functional component, you call the hook to get back the show and hide methods, which get returned in an array similar to how useState returns its members. We choose the array method of destructuring so naming the methods is easier:

const [showAlert, hideAlert] = useIonAlert();

Most overlays dismiss themselves when the user is done interacting with them, so you won’t need the hide method for most scenarios.

Then to display the overlay, you call the show method:

showAlert('Hello!');

The alert will dismiss itself after the user clicks the "Ok" button. You don’t need to worry about doing any additional work when the overlays go away.

Most of the overlay hooks have options that you can pass to them. The more common options can be passed in as additional parameters. For instance, the toast overlay's show method also takes the time to display the toast as its second parameter:

showToast('Hello from a toast!',  3000);

This will display the toast for three seconds, and then the toast will dismiss itself.

More options can be sent by passing in an object instead of the separate parameters:

showToast({
  buttons: [{ text: 'hide', handler: () => hideToast() }],
  message: 'Hello, click hide to dismiss',
  onDidDismiss: () => console.log('dismissed')              
})

React hooks can be used in other hooks as well. Because of this, it's possible to display an overlay from within other hooks, such as one responsible for fetching some data. Here is a sample custom hook to fetch a customer that displays a toast when the request fails:

const useCustomer = (customerId: number) => {
  const [customer, setCustomer] = useState<Customer>();
  const [showToast] = useIonToast();
  useEffect(() => {
    fetchCustomer();
    async function fetchCustomer() {
      try {
        const response = fetch(`myapi.com/customers/${customerId}`);
        const data = await (await response).json();
        setCustomer(data);
      } catch {
        showToast({
          message: 'Oops, unable to get customer',
          color: 'warning',
          buttons: [{ icon: close }],
        });
      }
    }
  }, [customerId, showToast]);
  return customer;
};

More Info

To learn more about the new hooks, visit our guide on using overlays in Ionic React, and check out the docs for each of the overlay components for usage examples:

Let us know in the comments down below if you have any feedback, and until next time, happy coding!

10 Reasons to Choose Ionic for Mobile Development

Max Lynch — Thu, 22 Jul 2021 18:47:57 +0000

The Ionic stack makes it easy to build iOS, Android, Desktop, and Progressive Web Apps using standard web technology. There are a lot of options for cross-platform mobile and web app development, so when should you or your team consider using Ionic?

Here are 10 reasons you might want to choose Ionic:

1. You’re a web developer

One of the best reasons to choose Ionic is if you’re a web developer and want to stay in the web development world. The Ionic stack is built on standard web development technologies meaning you can build the majority of your app directly in a browser and use standard browser development tools and technologies, while still deploying and building a traditional native app.

Other cross-platform toolkits don’t use the web development stack so aren’t the best fit for web developers.

2. You are building a new app dev engineering team

Because the Ionic stack is focused on web developers, it’s the easiest cross-platform technology to hire for because there are considerably more web developers in the world than any other mobile technology. Any web developer can easily learn to build apps using the Ionic stack and it will be the most familiar to them, and have the best compatibility with popular web frameworks like React, Angular, and Vue.

And hiring web developers means they can then develop for mobile, desktop, and web without the need to hire specialist teams for each platform.

3. You’re an enterprise (or work at one)

Ionic is the only cross-platform development stack that has Enterprise support and integrations for teams building employee and customer-facing apps. Ionic offers dedicated support, security features like Biometrics and Single Sign-on, and cloud services for remote app updates, app builds, and app store distribution.

Ionic is the industry leader in enterprise app development with hundreds of Fortune 1000 customers, and customers love it.

4. You have existing web experiences and investments

Because the Ionic stack is based around standard web development, it’s the only cross-platform solution that supports bringing existing web experiences, libraries, and other web code into an app.

This is particularly important for enterprises or teams with a heavy web presence that want to bring those experiences into existing apps, such as traditional native apps.

5. You want to join a massive community of developers

Building apps with popular technologies makes it easier to hire for, easier to find partners, and easier to find resources on the web as you build your app.

The Ionic developer community is massive, with millions of developers around the world having built apps on the stack. Passionate community members build and share tutorials, add-ons, templates, and more, and developers can find help on the Ionic forum and Stack Overflow.

But Ionic is unique in that the community isn’t just limited to Ionic’s bubble. Because Ionic is based on standard web technologies, the addressable community goes beyond Ionic and overlaps with the broader web development community, such as the React, Angular, and Vue communities. This is critical when considering building out app dev teams because an Ionic team can be built with web developers, but other technologies require hiring specialists on languages and technologies that are not widely used.

6. You’re on a tight deadline

We often hear from teams who spent months building their app using a different technology, failed to hit deadlines, and then switched to Ionic and had the new app working and surpassing the old one within weeks.

Ionic is highly productive because the web is highly productive. And one app can run on multiple platforms so development time can be upwards of 3-4x faster than traditional native development!

7. You want your apps to be on iOS, Android, Web, and even desktop on day one

Ionic apps run anywhere the web runs, and with the same code! And Ionic has official support for iOS, Android, Desktop, and Web, so teams can hit the ground running — targeting all these platforms and their respective user bases at launch.

8. You want to be able to benefit from both app store and web traffic

Because the Ionic stack is based on web technology, teams can target the web and build a high-performance Progressive Web App (PWA).

This means teams can reach users both in traditional app stores but also on the web and through Google search to maximize reach and have the best chance for a successful app project. We’ve talked at length about how the Ionic stack gives you the best distribution optionality of any cross-platform technology in the market.

9. You already have web developers on your team

If you already have web developers on your team or at your company, using the Ionic stack is a no-brainer! Web developers can easily become mobile developers by learning to use the Ionic stack, including Ionic’s 100+ mobile-optimized UI components and the native runtime that provides hooks into functionality on each platform. Ionic also supplies the means to build and deploy those apps.

10. You’re a student or new to app development

Ionic is the most accessible platform for cross-platform app development. If you’re familiar with basic web development you can build real mobile apps (and desktop + web apps) today!

Learning Ionic requires learning a few new HTML tags, some new JavaScript APIs for native functionality, and then just building your app using your framework of choice (React/Angular/Vue/etc).

And the best thing is you continue to build your web development skills at the same time and don't have to change your technical career focus.

Get started today

There you have it, ten good reasons you and your team might want to adopt Ionic.

If you're interested in building cross-platform apps using Ionic and modern web technologies, Get started with Ionic today.

App store or web? Why not both!?

Max Lynch — Wed, 09 Jun 2021 16:12:23 +0000

Most app development technologies force teams to make hard decisions about where they will distribute their apps, usually either app stores as a native app or the web as a Progressive Web App.

Building a native Swift (iOS) or Kotlin (Android) app, for example, obviously limits teams to just those respective platforms. But others have more subtle restrictions. Xamarin enables you to build for iOS, Android, and Desktop, but not for the web, meaning no access to a major chunk of mobile traffic and app-consuming users. React Native’s View elements can be abstracted to have the same API on the web but you will need to write completely separate view code for it, avoid using certain standard web features, and use different calls for certain APIs, so it’s an additional investment. Flutter can be used to build iOS, Android, and Web apps, but its web support requires multiple MBs of code for users so it’s not appropriate for high-performance Progressive Web Apps and speed-sensitive web sites like those that depend on search engine rankings and SEO.

Capacitor, a universal app runtime, avoids these tradeoffs by targeting one universal runtime (the web), and giving you maximum optionality for where you distribute the app that you build. You can deploy your app with one codebase anywhere your users are, even if that happens to change! That might mean the app stores today, but it could mean the web and desktop tomorrow.

What Optionality Looks Like

I was recently helping a team think through an app project they were going to deploy to the app stores on iOS and Android. They were using Capacitor with React, using a home-grown UI based on Tailwind.

During development, the team decided that they wanted to have a strong web portion to their app in order to easily acquire users, benefit from instant access and SEO on the web, and avoid app install bounce risk (meaning, the user leaves without ever installing the app, which is very common in the mobile world!)

Since their app was built with Capacitor, utilizing Capacitor’s cross-platform APIs, they could simply deploy the same app with the same code as a Progressive Web App hosted on a platform like Vercel or Netlify.

And this decision didn’t preclude them from also shipping a native iOS and Android app. They decided that they would unlock some additional features that depended on native functionality missing from the browser environment for users that were “activated” and likely to stick around.

Doing so in Capacitor was straightforward because Capacitor APIs are identical on iOS, Android, and the Web, and Capacitor comes with a number of utilities for adding conditional platform-specific code if desired.

Why this Matters

For new projects, the greatest risk isn’t technical but rather that no one uses your app and it never gains meaningful traction or scale. One of the best ways to avoid that is to reach the broadest possible segment of your target audience on day one.

For most companies, their audience isn’t on a single platform, form factor, or environment (such as mobile or web). This is especially true for consumer and enterprise consumer companies. In fact, there’s a good chance a majority of users aren’t even on a platform that you, the developer, actually use primarily (such as Android if you’re an iPhone user or web apps if you’re in the US and used to installed native apps).

Having optionality might mean the difference between your app project failing or succeeding, and nothing could matter more than that.

How does this compare to Progressive Web Apps?

One of the things to think about when building a Progressive Web App not with Capacitor, is that it will constrain your app to running only in a traditional browser context. This means it will only be accessible on the web and not have the option to access native APIs that don't have a browser analog since it cannot be distributed in popular mobile app stores.

Thus, the decision to build a Progressive Web App can also be limiting. But in this case a very straightforward way to add native iOS and Android support is by installing Capacitor into your Progressive Web App.

Capacitor has full Progressive Web App support and apps use the same Capacitor API calls regardless of the platform they are running on. This makes it easy to bring it to iOS and Android with the same code.

In that sense, Capacitor is "web app virtualization layer" that enables standard web apps to run anywhere with the same APIs, regardless of the "host" platform underneath.

Who's using Capacitor today?

Capacitor is growing quickly (100% YoY) and is installed over 500k times per month. Teams at companies like Burger King, Tim Hortons, Workgrid (Liberty Mutual), and Fidelity, to name a few, are all using Capacitor to enable their web teams to deploy iOS, Android, and Web apps with the same code.

Capacitor was also rated #1 in satisfaction among mobile development tools on the latest State of JS survey.

Capacitor was created by the team behind the popular Ionic Framework as a replacement for Cordova for deploying modern Web Native apps on iOS, Android, Desktop, and Web.

Get started

Getting started with Capacitor and building full distribution optionality into your mobile-enabled web app is as easy as installing the Capacitor library and running a few commands.

Get started with Capacitor today and follow us for more resources and updates on the project!

Building a better Web View for mobile apps

Max Lynch — Tue, 18 May 2021 15:02:21 +0000

Web Views are among the most widely used components in mobile apps for good reason: most apps need to incorporate some internal or external web experience at some point.

Because of this, Apple and Google provide basic Web View controls out of the box: iOS with WKWebView, and Android with WebView (there are other options on Android but this is the primary one most apps use).

Unfortunately, using these Web Views is anything but simple, and native developers are stuck reinventing the wheel every time they need to use one of these Web Views in their app. Luckily, that pain is coming to an end. Read on to learn about our take on a better drop-in Web View for iOS and Android native app developers.

The Use case for Web Views

Web Views feature prominently in many apps. Some apps are built entirely around a single primary Web View instance, and other traditional native apps selectively display and embed Web Views to bring in web experiences.

For apps where most of the functionality and content is built in the Web View, the use case for Web Views is obvious. I don’t want to spend more time talking about that use case here but tools like Capacitor and Ionic Framework excel at this and are widely used.

For traditional native apps, the use cases for embedding web experiences might vary from from embedding an existing web experience such as a mortgage application or a survey, to displaying web-based authentication forms, to hosting prototype web experiences before porting to native.

Generally, the more established the company, the larger their web development teams, and the more prominent that company is on the web, the more likely they will need to bring in web experiences into their mobile app at some point in time.

The Problem with Web Views Today

Generally, Web Views provided by Apple and Google are spartan and bare bones. Nearly every native developer that we’ve talked to has expressed annoyance at extending the stock Web View controls and then maintaining a fairly complex set of code to host web experiences in the app. Thus, the problem with the stock Web Views is that they just don't do enough and don't cover the surface area of what native developers typically need them to do.

I have first-hand experience with this as the creator of Capacitor, which is essentially a supercharged Web View for hosting web apps that need to interface with existing native code. Capacitor is many tens of thousands of lines of code that wrap the core Web Views available on each platform and add a number of features, like:

An API for adding new native “plugins” that expose new Web APIs to web developers based on custom native code, and do so in a controlled fashion and with a web-developer approved API (promises, typescript, etc)
A high performance bridge for communicating between web and native and keeping track of invocations and returning results back to the caller
Handling references to assets to host web content offline and correctly stream data for Web HTML controls like video and audio (surprisingly tricky).
Marshalling data between the native and web layer
Managing native elements such as alert dialogs, keyboard, status bar, scroll regions...all while correctly handling orientation changes
Handling delegate methods for navigation, load, errors, permission requests, and other general housekeeping.
Updating embedded web experiences dynamically and out of band with the slower native release cycle

And then doing this on both iOS and Android (on which even more code and complexity is required). And this list is not nearly exhaustive!

It seems like every meaningfully large native app ends up implementing a subset of the features above, which is no small task!

Building a better Web View

It took many months to build the first version of Capacitor due to the complexity required in building a robust Web View wrapper with the above features, and I never want another developer to have to go through that again.

Sadly, almost every native app developer does have to go through this today, and then has a bunch of complex, custom code to maintain. All that when they could have just imported a stable, well maintained, feature-rich Web View control and got back to the fun part of building their app.

When we realized that what we had with Capacitor could be pulled out to help native app developers everywhere, we knew we were on to something: a much better Web View for native apps.

Announcing Ionic Portals

We’ve been working on bringing the Web View technology behind Capacitor to native apps and native developers everywhere, and we are taking the wraps off the first iteration of that product today: Ionic Portals.

Ionic Portals is a drop-in Web View component for native apps that handles all the messy, annoying parts of using a Web View in a native app. Developers can host multiple different web experiences through different “portals”, and isolate them, selectively exposing custom native functionality that each one needs. Teams can remotely update and deploy new web experiences dynamically to deploy new features and tests in realtime and without disrupting the native app release process.

Ionic Portals uses the same technology currently deployed in major consumer apps like Burger King, Paylocity, H&R Block, Aflac and more, but distributed as a drop-in control for existing native apps.

And on top of all this, Ionic Portals is maintained and supported by us, so you have one less component to have to maintain in your app.

We’re currently working with a few teams who are desperate for a better Web View control in their native apps. If you’re interested in trying it out and sharing your feedback as we built out the product, we’d love for you to get in touch. Visit the Ionic Portals page to see a demo and learn more about our take on a dramatically improved Web View for native apps.

Build Mobile Apps with Tailwind CSS, Next.js, Ionic Framework, and Capacitor

Max Lynch — Mon, 01 Feb 2021 15:24:54 +0000

A very popular stack for building responsive web apps is Tailwind CSS and Next.js by Vercel.

Tailwind, a utility-first CSS framework that replaces the need to write custom class names or even any CSS at all in many cases, makes it easy to design responsive web apps through small CSS building blocks and a flexible design foundation.

Next.js, a React framework for building high performance React apps, is one of the leading environments for building production React apps on the web.

As these technologies have grown, they are increasingly used together for web app development (in fact, Next.js is working on an RFC for official Tailwind integration). This has prompted many users of these projects to ask whether they can be used to build mobile apps, too.

Turns out, they can! And they make a great fit for cross-platform mobile development when paired with Ionic Framework and Capacitor.

As I started playing with these technologies, I realized that each had a natural fit in a combined mobile stack, and I wanted to put together a solid starting foundation for others interested in building real iOS and Android apps using these technologies.

If you're confused by all the project names and how they work together, don't worry, I'll break down each part of the stack each project is concerned with, along with some visuals and code samples demonstrating how all the projects work together. At the end I'll share a starter project with these technologies installed and working together that can form the foundation of your next app.

The Stack Visualized

The above is a live screenshot of a React app built with Next.js that is using Ionic Framework and Tailwind for the UI experience, and Capacitor to natively deploy that app to iOS and provide access to any Native APIs the app uses.

There are a lot of projects working in tandem to provide the full experience here. To visualize it, I've tried to overlay the different layers and how they correspond to each project in this diagram above.

We can see that Capacitor is concerned with the entire app and device layer of the app, Next.js is concerned with the entire web/React app our code and UI is running in, then Ionic handles the "platform UI" including navigation toolbar (including system title and toolbar buttons) as well as the bottom tabs.

Finally, Tailwind is used to then style and customize the content of each page, which is where the bulk of the app-specific styling will occur.

Mobile UI and Native Runtime

If your experience building with web technologies is primarily for desktop or responsive sites, you might not be familiar with mobile-focused libraries Ionic Framework and Capacitor.

Ionic Framework is a cross-platform, mobile-focused UI library for the web. It provides ~100 components that implement platform UI standards across iOS and Android. Things like toolbars, navigation/transitions, tabs, dialog windows, and more. The big draw is those components work on the web and work in frameworks like React, Angular, Vue, or plain HTML/CSS/JS.

Ionic Framework is highly popular and powers upwards of 15% of apps in the app store.

Historically, Ionic Framework would be paired with a project like Cordova which provided the native iOS and Android building and runtime capabilities. However, most new Ionic Framework apps use Capacitor for this part of the stack.

Capacitor is a project built by the team behind Ionic Framework focused on the native side of a web-focused mobile app.

Capacitor provides a plugin layer and runtime that runs web apps natively on iOS, Android, Desktop, and Web, and provides full access to device APIs and features (including extending the web environment by writing additional native Swift/Java code).

As such, any popular web technologies and libraries can be used to build mobile apps with Capacitor, and then deploy the same apps with the same code to the web and desktop.

And, to top it all off, Capacitor was just rated the second highest in satisfaction among popular Mobile & Desktop Tools on the State of JS 2020 Survey! If your last experience with this mobile development approach was with Cordova, we think you'll find Capacitor to be a big improvement.

Introducing the Next.js + Tailwind CSS + Ionic Framework + Capacitor Starter

Now that you have a sense for how these technologies all work together to make it easy for web developers to build mobile apps, let's take a look at a real demo and starter project (GitHub repo):

Let's take a look at the main Feed page (seen above in the screenshot) for an example of how the different technologies in use work together:



import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonButton,
  IonIcon,
  IonContent,
} from '@ionic/react';
import { useState } from 'react';
import { notificationsOutline } from 'ionicons/icons';
import Notifications from './Notifications';

import Card from '../ui/Card';
import { getHomeItems } from '../../store/selectors';
import Store from '../../store';

const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
  <Card className="my-4 mx-auto">
    <div>
      <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
    </div>
    <div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
      <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">
        {type}
      </h4>
      <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">
        {title}
      </h2>
      <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">
        {text}
      </p>
      <div className="flex items-center space-x-4">
        <img src={authorAvatar} className="rounded-full w-10 h-10" />
        <h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">
          {author}
        </h3>
      </div>
    </div>
  </Card>
);

const Feed = () => {
  const homeItems = Store.useState(getHomeItems);
  const [showNotifications, setShowNotifications] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Feed</IonTitle>
          <IonButtons slot="end">
            <IonButton onClick={() => setShowNotifications(true)}>
              <IonIcon icon={notificationsOutline} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding" fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Feed</IonTitle>
          </IonToolbar>
        </IonHeader>
        <Notifications
          open={showNotifications}
          onDidDismiss={() => setShowNotifications(false)}
        />
        {homeItems.map((i, index) => (
          <FeedCard {...i} key={index} />
        ))}
      </IonContent>
    </IonPage>
  );
};

export default Feed;

As we can see, we use Ionic Framework controls (IonPage, IonHeader, IonContent, IonToolbar, etc) for the structure of the page (these controls implement iOS and Android platform-specific styles and navigation/transition behavior), then we use Tailwind for the page content that is where our custom design lives (which will tend to be in IonContent).

If we look at another page that is just a simple list, we see that we don't use Tailwind at all, because the user would expect this page to be a standard iOS/Android list and toggle button (code here):

So, we tend to use Tailwind more for pages with a lot of custom design and assets. That's by design. Generally when building a native mobile app, we want to use platform conventions as much as possible, especially for experience and performance-sensitive elements like Lists, Toolbars, Tabs, and Form inputs. However, for the Feed page, which has a pretty custom UI experience, we end up getting a lot of mileage out of Tailwind.

So, in general, the way to think about when to lean more on Ionic Framework and when to lean on Tailwind is when your UI experience will heavily use typical mobile UI elements (prefer Ionic components) or when it will be more custom (prefer Tailwind).

Finally, this starter also comes with a few small opinions around folder structure and state management. For state management, the library pullstate is used which is a simple yet powerful state management library with a hooks-based API (I wrote more about it here). If want to use something else, removing it is easy.

Deploying to iOS and Android

The app can be easily deployed to iOS and Android using Capacitor and its local CLI tools. After running npm install, you'll have the npx cap command available, which enables a native development workflow:

To add an iOS or Android native project:



npx cap add ios
npx cap add android

Then, to build the Next.js app, export it, and copy it to the native projects:



npm run build
npm run export
npx cap copy

This command is needed every time the built output changes. However, you can enable livereload during development (see the README for more info).

Then, you can launch Xcode and/or Android Studio to build and run the native project:



npx cap open ios

npx cap open android

Next steps

If you've been interested in building mobile apps using popular web dev projects like Next.js or Tailwind, hopefully this starter provides inspiration and a solid foundation for building your next app using web technologies. It's worth mentioning this exact same approach can be used with other UI libraries (like material, bootstrap, or your own!).

When you're ready, dig into the starter project, follow the Capacitor and Ionic Framework docs, and get building!

How to Reduce the Number of Renders in an Ionic React App

Ely Lucas — Thu, 28 Jan 2021 15:45:05 +0000

Hello friends!

Welcome to this first article in a series that I plan on doing around quick tips for routing in Ionic React.

To kick this series off, I'm going to answer one of the top questions I get, and that's "Why do my Ionic Pages render so much?"

For starters, you shouldn't be overly concerned with multiple renders. During the render phase, React will build up a representation of your component in what is called the Virtual DOM. Building this VDOM is relatively cheap. Afterward, React will compare the VDOM to what is in the actual DOM, and it will only do the costly DOM updates if there are actual changes.

This means that if your component renders again, but there aren’t any changes, then the cost is minimal.

However, there are a couple of drawbacks to rendering too much. First, React must construct the VDOM and run its diffing algorithm for each render call. While this is highly optimized and fast, doing so is wasteful if the component doesn’t need to update. Second, if you have costly code in the render method, it will get run each time.

Also, if you are like me, it can drive you bonkers.

Therefore, trying to cut down on the number of renders is a micro-optimization, but sometimes it’s one worth taking.

In this article, we will take a look at why render gets called multiple times, and then I'll show you some techniques you can use in your own apps to help reduce them.

Project Setup

If you want to follow along, start up a new Ionic React app using the Ionic CLI:

ionic start RenderTest tabs --type=react

And in the Tab1.tsx file, add a log statement inside of the function so we can see each time the component is rendered:

const Tab1: React.FC = () => {
  console.log('tab1 render');

  return (
    <IonPage>
      {...}
    </IonPage>
  );
};

Fire up the app with ionic serve, and you will see that, on initial load, the Tab1 page renders twice:

However, if you click around on the tabs, you will see that Tab1 renders 3-4 times each time you switch a tab! What's going on here?

Why you render so much?

Every page in an Ionic React app is wrapped with an IonPage component. The IonPage not only provides some div containers for holding your page and styles around it, but it is also very important when it comes to doing page transitions.

There is some semi-complicated logic that goes on in the background in regards to getting a reference to these IonPages when they are transitioned to and from. Unfortunately, to get the reference, we have to wait until the component mounts, then grab the reference, and store that reference in context. This all happens in the IonRouterOutlet component, but when this component renders, it often causes its children (your routes and IonPages) to render along with it.

This is why you might see an IonPage render two or three times when it is displayed the first time.

Next, you might notice that some pages might render when they are not even in the current view.

To provide some of the smooth transitions and to maintain the state of views that you left but might come back to, we don't actually unmount your component in some scenarios (like navigating between tabs). Instead, when your page transitions out of view, we hide it via CSS. The component is still mounted and can still render. Therefore, if the component gets any new props passed into it, it will render.

By default, the routes are setup to pass in the your IonPage in the component prop of a route, like so:

<Route path="/tab1" component={Tab1} exact={true} />

When using the component prop, React Router will pass in some props on your behalf, like location and history. Each time you make a navigation change, these route props will change, which will cause all your IonPages that are currently mounted to render again.

This can get a bit out of hand, so let’s take a look at a few strategies to cut down on the excessive renders.

Optimizing the renders

So there are two main culprits here. Parent components that are rendering that cause its children to render, and new props being passed in via routing that causes another render.

Let's deal with parent components rendering first.

Component Memoization

In React class-based components, we were able to finely control when components would render with the shouldComponentUpdate lifecycle method. This method would receive the new props/state coming in, which we could compare to the old props/state and determine if we want our component to call its render method. Or, even better, we could inherit from React.PureComponent and let React take care of this logic for us.

This would make it so that your component would only update if its props or state change, and ignore any updates from the parent component rendering.

To accomplish something similar in a React Functional Component (FC), we can wrap our FC in React.memo, which will memoize your component and store a cached version of it based on the props that are passed into it.

To do so, I like to wrap the FC as its being exported with React.memo like so:

export default React.memo(Tab1);

You should notice that now the number of renders is cut down quite a bit when you navigate between the tabs.

Using React.memo is a good way to cut down on needless renders, however, take care when doing this, as you are basically trading fewer renders for memory consumption.

Route Setup

Next, let’s modify our routes so that React Router no longer passes in the Route Component props into our Tab1 page.

In the route setup, we are using the component prop, and React Router will pass in all the route props every time there is a change in navigation.

As of React Router 5.1, there is a new method to specify which component to render when the route matches, and this method is encouraged going forward.

The new method is to pass your component in as a child to the route like so:

<Route path="/tab1" exact={true}>
  <Tab1 />
</Route>

Now, if you check the logs, you will see that the Tab1 page only renders once on its initial load, and has no additional renders when navigating between the tabs. Nice 🎉!

"But what if I need the routing props in my component?" I hear you ask.

React Router has you covered there as well. There are several new React Hooks available that you can use to get access to the same props that were passed in before, namely useParams, useLocation, and useHistory. So if you had a route setup to get an id param from the path, you would access it like so:

/* The Route: */
<Route path="/tab1/:id" exact={true}>
  <Tab1 />
</Route>

/* And inside the Tab1.tsx function: */
const params = useParams<{id: string}>();
// do something with params.id

Wrapping Up

With just a few quick optimizations, we were able to cut down the renders from many times on page navigation, to just a single time when the IonPage first loads. Not too shabby!

Got any comments or want to see me cover something around Ionic React in the future? Hit me up in the comments below or catch me on Twitter @elylucas.

Happy coding!

The Easiest Way for Web Developers to Build Mobile Apps

Max Lynch — Tue, 05 Jan 2021 15:45:13 +0000

For web developers interested in building Mobile apps, there's a plethora of options today. Developers can choose between projects like React Native, NativeScript, Cordova, Ionic Framework, and Capacitor, just to name a few.

Given the large number of options, it's not always clear what would be the most appropriate for a web developer looking for a familiar web-based development experience.

With that, I'd like to make the case that Capacitor (optionally with a mobile-focused UI framework like Ionic Framework) is the most natural and easiest way that web developers can build mobile apps.

"Electron for Mobile"

Electron is a massively popular solution for building cross-platform desktop applications using standard web technologies. Web Developers can use the standard HTML, CSS, and JavaScript they use for web apps, including any popular libraries like React/Angular/Vue, Tailwind, or Material UI, and turn those apps into powerful desktop apps.

This simple formula has turned Electron into one of the most popular cross-platform toolkits. Today, Electron powers many popular apps, like Slack and VS Code.

If you ever find yourself asking "what is the analog to Electron but for mobile apps?" the answer is Capacitor.

Like Electron, Capacitor takes a standard web app that runs in the browser, and extends it with access to powerful native APIs and Native UI (like Camera and Filesystem). These APIs work on iOS, Android, Web, and Electron.

While Electron bundles in a "web view" through Chromium, Capacitor uses the standard embedded Web View native controls available on iOS and Android. This means that Capacitor doesn't suffer from the same bloat issues that Electron does.

The net effect is that Capacitor is really a sort of "Electron for Mobile."

What about React Native or Flutter?

You might be asking yourself: why isn't React Native (or Flutter) the "Electron for Mobile?"

The reason is that React Native and Flutter do not use a standard web browser environment to run an app. Rather, they are abstractions over system UI controls and APIs to provide a "web-like" experience building apps rather than a true web environment. Both require code specifically written for each platform, and cannot use web-specific libraries or code.

This is important, because it means the shortest path for a web developer to build a mobile app is Capacitor, hands down:

An Example

Let's take a simple example of a web app using Ionic Framework with React for a native-quality mobile UI experience, and Capacitor to deploy it natively to iOS, Android, and web.

Taking a look at the code, we see that it's just a plain React app that happens to use Ionic Framework for its UI components. For example, developers familiar with React Router should find the JSX used to build the Tab layout familiar.

Then, by running some Capacitor commands, we can bundle the app and run it right in Xcode:

Since our app is just a plain React app, we can also run it directly in the browser and even deploy it as a Progressive Web App to any static web host:

Finally, Capacitor ships with a JS module, @capacitor/core, that provides a consistent, cross-platform approach to accessing device functionality.

For example, to access the Filesystem API, we can use the same code on iOS, Android, Web, and Electron:



import {

  Plugins, 

  FilesystemDirectory,

  FilesystemEncoding

} from '@capacitor/core';

const { Filesystem } = Plugins;

async fileWrite() {

  try {

    const result = await Filesystem.writeFile({

      path: 'secrets/text.txt',

      data: "This is a test",

      directory: FilesystemDirectory.Documents,

      encoding: FilesystemEncoding.UTF8

    })

    console.log('Wrote file', result);

  } catch(e) {

    console.error('Unable to write file', e);

  }

}

Who's using Capacitor?

Capacitor is being used to power major apps today. Companies like Burger King, Popeyes, and the BBC (who wrote a great article about their use of Capacitor to build universal, web-native apps) are using Capacitor build apps across iOS, Android, Web, and Desktop with one code base and standard web technology.

Capacitor is also the new native foundation of Ionic Framework, which powers over 15% of all apps in the app store today.

Getting started with Capacitor

If you're familiar with Electron, Capacitor should feel very familiar to you. It's installed like a typical JS module directly into your app, and a local CLI tool is added for copying your web app to native iOS and Android projects, as well as syncing and installing new Capacitor plugins.

To get started with Capacitor, check out the official Capacitor Docs and get building!

Ionic Vue: The UI library for Vue 3

Matt Netkow — Fri, 20 Nov 2020 17:04:11 +0000

The Vue team released Vue 3 in September to much-deserved fanfare. With improved performance, smaller bundle sizes, new APIs, and a revamped foundation to support future framework iterations, it’s no wonder the Vue community is excited.

Unfortunately, many UI libraries aren’t compatible with Vue 3 yet. If you’re looking for one that is production-ready right now, then check out Ionic Vue, a UI library with over 100 mobile and desktop components built for Vue 3. Let’s take a look at everything it has to offer.

Ionic Vue: A Native Vue version of Ionic Framework

Ionic Framework is an open-source UI toolkit focused on building high-quality apps for native iOS, native Android, and the web! It’s built from the ground up with HTML, CSS, and JavaScript, so web developers should feel right at home. The components allow developers to build native experiences, all while using web technology. Now used by millions of developers, Ionic powers > 15% of all app store apps.

Ionic Vue is the native Vue version of Ionic Framework. It acts as a wrapper for the core UI component library (aptly named @ionic/core), allowing Ionic to support all Vue 3 features with ease. Here’s the entry point of an Ionic Vue app:

// Vue 3 component definition
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});

<!-- Template with Ionic Framework UI components -->
<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

As you can see, it’s written in modern web code. Ionic likes to say that you don’t learn Ionic, per se - you leverage your existing web development skills to build apps using their UI components.

Production Ready for Vue 3

The Ionic team released Ionic Vue shortly after the launch of Vue 3. Other libraries are still implementing Vue 3 support, so how was Ionic able to ship so fast? The answer: All Ionic Framework UI components are web components consumed by web developers using official framework bindings (including Angular, React, Vue, and basically any other JavaScript framework on the market today, or tomorrow). Developers using each framework get the experience they are familiar with, such as the framework’s routing system, lifecycle events, official APIs and tooling, and more. Frankly, it’s a win-win! Learn more about how Ionic accomplished their “Ionic for Everyone” milestone here.

That’s not all. Ever wish you could use your favorite UI library on multiple platforms but couldn’t because they didn’t leverage each platform’s specific design language? You’re in luck. Every Ionic component adapts its look to the platform the app is running on, such as Cupertino on iOS and Material Design on Android. Through these subtle design changes between platforms, developers achieve a native look and feel while users are happy to receive a high-quality app experience. This adaptation is applied automatically and is entirely configurable should you wish to make theming changes to fit your brand.

Getting Started

Creating a Vue 3-powered Ionic app is a breeze. Begin by installing the Ionic CLI:

npm install -g @ionic/cli@latest

Next, create an Ionic Vue application:

ionic start my-vue-app --type vue

After answering a few questions, you can start a local development server with ionic serve. This command uses the Vue CLI to compile your app, start a dev server, and open your app in a new browser window.

From here, you can explore Ionic’s 100+ UI components or take the “First App” tutorial that covers Ionic’s core app development concepts.

Adding Ionic Vue to an Existing Vue 3 App

If you’ve already started working on a Vue 3 app, you can add in Ionic Framework components. First, install two packages:

npm install @ionic/vue @ionic/vue-router

After that, add the IonicVue package into your app.

// main.js
import { IonicVue } from '@ionic/vue';
import App from './App.vue'
import router from './router';

const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

Finally, there are some small routing and CSS changes to make. Once those steps are complete, you can start adding Ionic’s components to your Vue 3 app.

Bonus: Deploy your Vue 3 app to mobile

You’ve built a great Vue 3 app that works well on the web and desktop. What about native mobile? Once again, Ionic has you covered. With Capacitor, Ionic’s official cross-platform native runtime, you can deploy your Vue 3 apps as progressive web apps and iOS/Android apps, all from the same codebase.

Capacitor also provides APIs with functionality covering all three platforms. Here’s the Geolocation API, for example:

// Capacitor Geolocation plugin example
setup() {
  const locationData = ref({});

  const getLocation = async () => {
    const { Geolocation } = Plugins;
    const results = await Geolocation.getCurrentPosition();

    locationData.value = {
      lat: results.coords.latitude,
      long: results.coords.longitude
      };
    };
  return { locationData, getLocation };
}

<ion-button @click="getLocation()">Where am I?</ion-button>
<p>{{ locationData }}</p>

Notice that there’s no separate logic for each platform (“web,” “iOS,” or “Android”) in the code. That’s because Capacitor automatically detects the platform the app is running on then calls the appropriate native layer code. With Core APIs like these, coupled with full access to native SDKs and a growing roster of community-supported plugins, Capacitor empowers you to build truly native mobile apps from your Vue 3 projects.

Start Building awesome Vue 3 apps for web and mobile

If you’ve been holding off from trying Vue 3 until more libraries become compatible, now’s a great time to give Ionic Vue a try. With Ionic, you can build a fully-featured app then deploy it to multiple platforms with Capacitor.

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. If you already have a Vue 3 app, bring it to iOS and Android with Capacitor. Built something neat? Share your Ionic Vue app with us over @IonicFramework.

What is it about Vue?

Max Lynch — Mon, 19 Oct 2020 16:06:24 +0000

On the heels of announcing official Vue support for Ionic Framework, I wanted to dig into why we decided to officially support Vue here at Ionic, and why we’re so excited about it.

But first, if you aren’t familiar with Ionic, we make popular open source projects like Ionic Framework and Capacitor, focused on enabling web developers to build award winning mobile apps with their existing web development skills and libraries. Ionic Framework provides a cross-platform UI toolkit focused on the visual aspect of a quality mobile experience, and Capacitor provides a cross-platform runtime and plugin API to access the full native functionality your app needs on each platform it runs on. Use them together or use Capacitor with any web-based UI framework for mobile!

Many developers know Ionic Framework as a mobile toolkit for Angular. And while we fully support Angular today, in the last few years we’ve branched out to supporting React, and now Vue.

It’s no small task for us to officially support a framework. While Ionic Framework’s web components work in any web technology, integration with framework-specific tooling like Routers, CLIs, and more is where the bulk of the work comes, so choosing to support a framework officially is a big deal for us.

Why, then, do we feel it is crucial to support Vue? And why do we feel that Ionic Framework + Vue brings unique value to the ecosystem and an experience that lives up to our goals as a project?

“The best of React and Angular”

Ionic Framework was initially built around AngularJS (that’s the 1.x version) back in 2013. What drew us to AngularJS back then was the ability to incrementally adopt it in any web app, extend HTML with powerful control flow constructs (loops, conditionals, etc), create essentially new HTML tags powered by JS, and easily apply it to any size app from small to enterprise-scale.

While Angular 2 evolved from the original approach taken in AngularJS, doubling down on its focus on large, complex enterprise apps (the kind Google and other large companies build), those original features of AngularJS that drew so many to it in the beginning fell out of favor in exchange for a monolithic solution focused on building large apps from scratch.

When talking to Vue developers, one way they frame why Vue is so great is it essentially perfected that early approach in AngularJS, creating something fundamentally new and compelling along the way. It’s no surprise then that so many Ionic 1.x developers who used AngularJS back then were drawn to Vue when the Angular 2 fork in the road appeared, and picked it up very quickly.

Vue developers often contrast it with React as well, appreciating more powerful data binding (especially with forms), compilation-free templating that uses standard HTML (i.e. no JSX required), and the batteries-included approach where key libraries for routing and state management are officially supported and maintained by the Vue team.

Add these up and it’s clear why many Vue developers consider it to be the best of both worlds.

Vue is exploding

With all the benefits above, it’s no wonder that Vue has found itself a passionate developer base that wasn’t satisfied with the binary Angular or React decision tree and tradeoffs.

That developer base is absolutely exploding, with some metrics, like stars, growing faster than React and nearly any other project on GitHub:

While stars are a vanity metric, there’s proof that this popularity has fostered a strong ecosystem of Vue-specific addons, projects, and frameworks. Vue-specific web app frameworks like Nuxt.js and Gridsome add powerful Jamstack features to the Vue ecosystem. UI libraries like Vuetify, and mobile solutions like Quasar, NativeScript, and Ionic Vue provide options for building engaging UI experiences with Vue across nearly any platform.

It’s clear that Vue is a force to be reckoned with and any web library like Ionic that purports to support the key frameworks web developers are using simply has to take it very seriously.

Ionic Framework and Vue is a perfect match

One of the most common questions we received over the last two years has been “when is Vue support for Ionic Framework coming out?” In fact, we received that question so often that it became a meme inside the company, with us often taking bets on how long it would take for someone to ask about Vue support on any given tweet or blog post (even if it had nothing to do with Vue!)

Obviously, the Vue ecosystem has been hungry for more mobile app development solutions. While a few solutions already exist for building mobile apps with Vue, including NativeScript Vue and Vue Native, what Ionic Framework brings to the table is a mobile development solution that is much more web centric. When you build with Ionic Vue, you’re able to target native iOS and Android with a truly native app that gives you full access to the native device and any native API. At the same time, you get the benefit of a UI layer that is truly web, so any existing web libraries, vue add-ons, UI components, or CSS styles will fit right into your Ionic Vue mobile app. Plus, as a bonus you can deploy your Ionic Vue mobile apps as pure mobile web apps or PWAs.

Ionic is focused intensely on web developers using popular web development technologies, with a massive community, and with support and features for serious apps and enterprise teams. To add on to that, Ionic Framework is backed by a growing company that is focused exclusively on commercializing Ionic Framework and its companion native runtime project, Capacitor.

From a developer experience standpoint, Ionic and Vue have similar roots. Both were inspired by AngularJS to some extent, and both focus on empowering web developers to build incredible things with the technologies they already know, with a low barrier to entry. Vue’s approach of using standard HTML in templates pairs incredibly well with Ionic Framework’s move to Web Components at the core, so using Ionic components feels like any other HTML tag, only with magic mobile powers.

Finally, Ionic is immensely popular, powering nearly 15% of all app stores, and has become synonymous with “mobile for web developers.”

The future is Bright for Vue

The technical challenges and long term maintenance concerns that come with choosing to officially support a framework for Ionic Framework are significant. We will invest considerable resources, financial and otherwise, to support any new framework integration in Ionic Framework.

We have decided to fully embrace and support Vue starting with Vue 3, because we think it is increasingly a pillar of the web development ecosystem, and will only grow in importance and relevance over time.

We also think it spiritually aligns incredibly well with our values and approach with Ionic Framework. We believe in the web platform. We believe in enhancing HTML, CSS, and JavaScript and enabling web developers to do incredible new things with it. Vue helps teams build and orchestrate the functionality and rendering of their app, and Ionic Vue helps those teams make their Vue apps feel great on mobile.

If you’re curious about Ionic Vue and want to try building iOS, Android, and Progressive Web Apps using Vue 3 and all the Vue-compatible web libraries you know and love, take a look at Ionic Vue!

Hey, you there! Want to build a mobile app with Vue but already have a UI library or can't use Ionic Framework's UI controls? Check out Capacitor. It's the native runtime part of the Ionic stack that runs any web app on mobile regardless of what it was built with.

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!

How to Confirm Leaving a Page in Ionic React with React Router

Ely Lucas — Fri, 09 Oct 2020 14:00:42 +0000

Have you ever been in the middle of an important task on a page, like filling out a form, and accidentally left and lost all your work? That bites!

And it's a bad experience for your users, especially on mobile.

A typical technique is to confirm with the user if they do want to leave the page with a confirmation dialog. In this post, I'll show you how to do so in an Ionic React application, and how you can customize the confirmation UI to fit your particular app. Let's go!

Using React Router's Prompt Component

An Ionic React application uses React Router for all of its navigation, and, fortunately, React Router has good support for prompting the user on navigation with their Prompt component. With Prompt, a confirmation box pops up asking the user if they want to leave the page. If they click yes, the navigation takes place, and if they click no, they are left on the current page.

The Prompt component takes two props, a message to display, and a when boolean to activate it.

Here is a simple IonPage with a form that utilizes the Prompt component:

const Tab1: React.FC = () => {
  const [text, setText] = useState('');

  useIonViewWillLeave(() => {
    setText('');
  });
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonInput
          value={text}
          placeholder="Name"
          onIonChange={(e) => {
            setText(e.detail.value!);
          }}
        ></IonInput>

        <IonButton
          expand="block"
          onClick={() => {
            setText('');
          }}
        >
          Submit
        </IonButton>
        <Prompt
          when={!!text}
          message="You have unsaved changes, are you sure you want to leave?"
        />
      </IonContent>
    </IonPage>
  );
};

Prompt is imported from 'react-router'

To determine if the form is "dirty" (if the form has been modified), we check to see if the IonInput has a value or not. This is a simple method, and you will probably need to expand on the concept in your app. Many form libraries provide a way to determine if the form has been modified as well.

In the useIonViewWillLeave hook, when a user leaves the page, we set the value of text back to a blank string to "reset" the form. This keeps the prompt from showing on other pages.

Now, if we try to leave the form, by say, accidentally tapping one of the other tab buttons, we get a nice confirmation:

This is fairly functional as is. The confirm dialog on mobile devices looks decent, but if you want to customize the UI, we will dive into that next.

Customizing the Confirm UI

Instead of showing the built-in confirm dialog that comes with the browser, you might want to display something a bit more custom to match the look and feel of your app. To change it up, we will use an IonAlert with custom buttons for the confirmation.

React Router provides a way to tie into the process by passing in a getUserConfirmation prop when setting up the router. In an Ionic app, we use IonReactRouter and we can pass this prop here and the router will, in turn, pass the prop back down to the underlying ReactRouter.

This prop excepts a function that gets passed in the message to display, as well as a callback. The callback takes a boolean parameter to indicate if the route navigation should happen or not. We'll add it to the main App.tsx page, where the routing is set up:

<IonReactRouter
  getUserConfirmation={(message, callback) => {

  }}
>

When getUserConfirmation is called, we want to display an IonAlert overlay with the message that was passed in. We will use a state variable to store the message. Also, we utilize a ref object to hold a reference to the callback that will be used in the alert:

const [leaveConfirmMessage, setLeaveConfirmMessage] = useState<string>();
const confirmCallback = useRef<(ok: boolean) => void>();

And to set them in the getUserConfirmation:

<IonReactRouter
  getUserConfirmation={(message, callback) => {
    setLeaveConfirmMessage(message);
    confirmCallback.current = callback;
  }}
>

Next, we add the IonAlert towards the bottom of the page, but before the closing </IonReactRouter>:

<IonAlert
  isOpen={!!leaveConfirmMessage}
  message={leaveConfirmMessage}
  buttons={[
    {
      text: "No",
      handler: () => {
        confirmCallback.current && confirmCallback.current(false);
      },
    },
    {
      text: "Yes",
      handler: () => {
        confirmCallback.current && confirmCallback.current(true);
      },
    },
  ]}
  onDidDismiss={() => setLeaveConfirmMessage(undefined)}
/>

To determine if the alert is shown, we check if the confirm message has a value, and then set the message back to undefined when the alert is dismissed. In the buttons, we use the ref we set up to invoke the callback function, passing true when the user clicks "Yes", and false when "No" is clicked.

And that's it! We use the Prompt component as we did before in any page we want to use this custom UI. No changes are needed in our form page.

Using the Browsers `beforeUnload` Event

One last thing we need to cover, which is what happens when the user tries to move away from the page outside of our app, like via the back button or changing the URL manually?

We can use the browser's beforeUnload event for this, though it is not customizable, browser support is limited, and it requires a bit more code. However, setting it up will give our users whose browsers support it extra protection if they, say, accidentally refresh their page.

Back in the page with the form, we will add a useEffect hook to monitor the text state. We set the onbeforeunload method on the window object to a function that returns true when the text has a value, and when the effect changes, set it null to turn it back off:

useEffect(() => {
  if (text) {
    window.onbeforeunload = () => true;
  }
  return () => {
    window.onbeforeunload = null;
  };
}, [text]);

This could also be abstracted into its own component or hook for reuse.

Wrapping up

Adding some safeguards to prevent your users from accidentally leaving a page while they are performing an important task is, thankfully, pretty straight-forward in an Ionic React app thanks to the built-in support in React Router.

I put together a demo app you can take a look at, feel free to check it out. Also, hit me up on twitter @elylucas or in the comments below if you have any questions.

Happy Coding!

Pullstate - Simple hooks-based state management for React

Max Lynch — Mon, 21 Sep 2020 22:25:53 +0000

State management is one of the most important pieces of an app, and there are a ton of choices for those in the React ecosystem.

In particular, developers building iOS and Android mobile apps with React using Capacitor and Ionic React often ask us for state management recommendations. Of course, there's Redux, which I remain a major fan of, but also much simpler state management approaches like MobX and rolling your own using the Context API.

I've spent a lot of time using Redux and also the bespoke approach with the Context API. Yet, I wasn't satisfied. I wanted to find something that was simple but high performance, and had native integration with Hooks and Function components which I now use exclusively in React (sorry, never want to write the word class ever again 😆).

That's when I stumbled on Pullstate. Pullstate is a small, relatively unknown library (just 300 stars at the time of this writing), but I expect it will become much more popular in time.

Exploring Pullstate

Pullstate provides a simple Store object that is registered globally, and provides hooks for accessing data from that store in a component:

store.ts:

interface StoreType {
  user: User | null;
  currentProject: Project | null;
}

const MyStore = new Store<StoreType>({
 user: null,
 currentProject: null
});

export default MyStore;

Then, in your component, simply use the useState method provided on the store to select data from the store:

const UserProfile: React.FC = () => {
  const user = MyStore.useState(s => s.user);
}

Modifying state

To update state in the store, use the update method:

const setUser = (user: User) => {
  MyStore.update((s, o) => {
    s.user = user;
  });
}

The update function works by mutating a Draft of the state. That draft is then processed to produce a new state.

Usually, a state mutation would raise a red flag, but the magic of Pullstate comes from a really interesting project called Immer. Immer essentially proxies an object and then turns mutations on that object into a new object (in my limited experience with it). Sort of how the vdom does diffing to figure out a new DOM tree.

This is incredibly powerful and simple, but does have a few gotcha's. First, reference comparisons on objects in the s value above will fail, because they are actually Proxy objects. That means doing something like this won't work:

MyStore.update(s => {
  s.project = s.projects.find(p => p === newProject)
});

Instead, use the second argument, o above, which contains the un-proxied original state. Another gotcha is making sure not to return anything from the update function.

Next steps

After having used Pullstate, I will have a hard time not recommending it to all Ionic React developers, and those using Capacitor with other React UI libraries.

I think Pullstate is a great middle ground between being simple for small projects, but clearly capable of scaling to much more complicated projects. For larger projects multiple stores can be created in parallel, for a sort of redux reducer-inspired organization.

Pullstate also comes with some convenience helpers for async actions to cut down on async state boilerplate (such as handling success and failure states), though I have not used those extensively yet.

Next on my list is exploring how this might work with something like reselect for building reusable, memoized selectors.

What do you think? Have you used Pullstate? Please share in the comments!

DEV Community: Ionic

Introducing the New Overlay Hooks for Ionic React

Overlay Components

Overlay Hooks

More Info

10 Reasons to Choose Ionic for Mobile Development

1. You’re a web developer

2. You are building a new app dev engineering team

3. You’re an enterprise (or work at one)

4. You have existing web experiences and investments

5. You want to join a massive community of developers

6. You’re on a tight deadline

7. You want your apps to be on iOS, Android, Web, and even desktop on day one

8. You want to be able to benefit from both app store and web traffic

9. You already have web developers on your team

10. You’re a student or new to app development

Get started today

App store or web? Why not both!?

What Optionality Looks Like

Why this Matters

How does this compare to Progressive Web Apps?

Who's using Capacitor today?

Get started

Building a better Web View for mobile apps

The Use case for Web Views

The Problem with Web Views Today

Building a better Web View

Announcing Ionic Portals

Build Mobile Apps with Tailwind CSS, Next.js, Ionic Framework, and Capacitor

The Stack Visualized

Mobile UI and Native Runtime

Introducing the Next.js + Tailwind CSS + Ionic Framework + Capacitor Starter

Deploying to iOS and Android

Next steps

How to Reduce the Number of Renders in an Ionic React App

Project Setup

Why you render so much?

Optimizing the renders

Component Memoization

Route Setup

Wrapping Up

The Easiest Way for Web Developers to Build Mobile Apps

"Electron for Mobile"

What about React Native or Flutter?

An Example

Who's using Capacitor?

Getting started with Capacitor

Ionic Vue: The UI library for Vue 3

Ionic Vue: A Native Vue version of Ionic Framework

Production Ready for Vue 3

Getting Started

Adding Ionic Vue to an Existing Vue 3 App

Bonus: Deploy your Vue 3 app to mobile

Start Building awesome Vue 3 apps for web and mobile

What is it about Vue?

“The best of React and Angular”

Vue is exploding

Ionic Framework and Vue is a perfect match

The future is Bright for Vue

Announcing Ionic Vue

A bit about Ionic Framework 💁‍♀️

A Brief History 📖

A Big Milestone 🏆

Getting Started 🏃‍♂️

Building upon the Vue Router 🧭

Doing Things the Vue Way 🛠

Building your way with either TypeScript or JavaScript ✌️

Truly native experiences with Vue 📱

What's Next? 🛣

Thank You 💙

How to Confirm Leaving a Page in Ionic React with React Router

Using React Router's Prompt Component

Customizing the Confirm UI

Using the Browsers beforeUnload Event

Wrapping up

Pullstate - Simple hooks-based state management for React

Exploring Pullstate

Modifying state

Next steps

Using the Browsers `beforeUnload` Event