‍

When the mobile app is a Progressive Web App (PWA) and shares a common codebase with the desktop web app, porting components from web to mobile often requires only minor adjustments to align with platform-specific nuances. However, this seemingly straightforward process comes with its own set of challenges. In this article, I’ll explore some of the common pitfalls to watch out for when migrating components.

‍

By the way, if you are curious about what framework we at ilert use for our mobile app, read our article “Ionic vs. React Native: Which one should you choose for mobile apps?”

‍

What is a Progressive Web App (PWA), and why is desktop-to-mobile migration straightforward with it?

Feel free to skip this chapter if you have already worked with PWAs. 

‍

A Progressive Web App, also known as PWA, is a web app that combines the best of both worlds. PWAs use modern web capabilities like offline support, push notifications, and installability while running in a browser. Since a PWA shares a single codebase across platforms, moving components from a desktop web app to a mobile PWA is often easier than moving to a fully native mobile app. Many components can be reused with minimal changes, just adapting to touch, screen sizes, and mobile UI patterns. However, while the shared codebase saves development time, user behavior and platform constraints still require thoughtful tweaks to make it seamless across devices. So, let's see what are those constraints. 

Touch vs. click / Finger vs. cursor

The most obvious but still crucial difference is how the user interacts with desktop and mobile applications. For accessibility, action areas in a mobile app have to be bigger. Hovering over components is not available with touch, only in a focused or active state. 

‍

For example, in a web app, a dropdown menu with hover effects works well because users can precisely navigate with a cursor. On mobile, the same dropdown becomes frustrating to use. Instead, a modal or a full-screen menu with large touch targets is a better solution.

‍

In the web app, the code for this component in JSX would look something like this:

1<Popover>
2	<PopoverContent>
3		<Stack>
4			<Searchbar />
5			<List />
6		</Stack>
7	</PopoverContent>
8</Popover>
9

‍

Transforming this component to mobile, using the Ionic framework, this looks in JSX like this:

1<IonModal>
2	<IonHeader>
3	   <Searchbar />
4	</IonHeader>
5	<ModalContent>
6		<IonList>
7			<IonItem>
8				<IonListHeader>
9					<IonLabel>Option 1</IonLabel>
10				</IonListHeader>
11			</IonItem>
12   		  	…
13   	 </IonList>
14	</ModalContent>
15</IonModal>

‍

A Modal ensures full-screen content, while the List with items provides large touch targets. If less customization is necessary, Ionic also provides another component specifically for dropdowns, which leads to even easier migration:

1<IonSelect value={selectedValue} onIonChange={handleChange}>
2	<IonSelectOption value="option1">Option 1</IonSelectOption>
3	<IonSelectOption value="option2">Option 2</IonSelectOption>
4	<IonSelectOption value="option3">Option 3</IonSelectOption>
5</IonSelect>

‍

A similar problem occurs with tooltips. On the desktop, users can hover over items, and tooltips appear with additional information. No hover is available for mobile devices. Holding over items suggests an action menu rather than a tooltip with brief text. In such cases, it’s better to display information without hiding it or using another modal).

Visual differences

Mobile screens are smaller and allow content to grow only vertically, while web apps usually have more space horizontally. Thanks to the screen sizes, content can grow in both dimensions.

‍

For example, in a web app, a navigation bar displays all menu items horizontally. While on mobile, the same navigation bar collapses into a hamburger menu to save space.

‍

Another example is when working with popovers: while popovers are sufficient on the web app, on mobile, they often don't have enough space to display their content. This becomes even clearer when one of the components inside the popover is a dropdown menu, requiring another modal on mobile. The solution here is to stack multiple modals over each other, providing enough space for each component to be displayed.

Performing actions

Navigating with a cursor allows for more precise movements and clicks, reducing accidental actions. On mobile, the combination of small screen size with touch results in more mistakes when using an app. To tackle this problem, mobile apps often need confirmation steps and smart placement of action buttons.

‍

‍

While the accept button at the top is sufficient for desktops, having it at the bottom of the action bar makes it accessible to click with the thumb.

Steps to Migrate Desktop Components to a Progressive Web App 

The final migration from the desktop app to the PWA depends heavily on the complexity of the components, the final use case, and whether a component library is used. 

Roughly, these steps should be followed:

• Identify reusable components
• Replace hover states
• Implement touch actions
  
  • Simplify interactions if necessary
• Check whether orientation change is needed
• Scaling fonts/visuals for screen size

‍

Using a component library (like Ionic) immensely helps in the process as it offers a platform-specific style change to match the device while also providing native functionality. However, if components and design are consistent across devices, further work is needed, and a custom solution from the start may save a lot of migration work.

We are pleased to announce a new inbound integration in the ilert catalog: RapidSpike. This integration enhances incident management by connecting ilert with RapidSpike’s website monitoring capabilities, ensuring teams receive real-time alerts on website performance, uptime, and security threats.

What is RapidSpike, and How Do ilert users benefit?

RapidSpike is a comprehensive digital experience monitoring platform that enables businesses to maintain optimal website performance, security, and availability. It provides synthetic monitoring, which simulates user interactions to identify performance bottlenecks proactively. 

‍

Additionally, RapidSpike offers cybersecurity insights, helping organizations detect vulnerabilities, prevent security breaches, and ensure compliance with industry standards. By continuously assessing website performance and security, RapidSpike allows businesses to enhance user experience, protect sensitive data, and maintain high availability.

‍

With the ilert + RapidSpike integration, users can:

‍

• Receive instant alerts in ilert when RapidSpike detects downtime, slow load times, or security risks.
• Automate incident response by routing alerts to the right teams through on-call schedules and escalation policies.
• Reduce alert fatigue with ilert’s smart notification rules and AI-powered noise reduction.
• Improve service reliability by correlating RapidSpike events with other monitoring tools in one centralized incident response platform.
• Track and analyze alerts and incidents with the help of reports to improve long-term reliability.

ilert and RapidSpike: Ideal combination for Retailers

Both ilert and RapidSpike serve retailers across Europe by providing essential tools to maintain high website availability, security, and performance. Retailers of all sizes rely on seamless digital experiences to maximize customer satisfaction and revenue. 

‍

This integration offers a comprehensive monitoring and incident response solution, enabling companies to detect and resolve issues swiftly. For small and medium-sized retailers, this combination ensures a cost-effective and reliable way to manage uptime and mitigate performance risks. Larger enterprises benefit from advanced automation and real-time alerting, allowing IT and operations teams to respond proactively to incidents.

‍

With ilert and RapidSpike working together, retailers of different sizes can ensure their websites remain operational, secure, and optimized—regardless of business size or technical complexity.

How to use the integration

To send alerts from RapidSpike to ilert, begin by locating RapidSpike among the other alert sources in the ilert interface.

Next, follow the on-screen instructions to configure the settings for RapidSpike. Once you have set everything up, copy the generated URL and log into your RapidSpike account. There, select the Webhook integration option in the RapidSpike user interface and paste the Webhook URL into the designated field.

Check the complete step-by-step guide on how to connect ilert and RapidSpike, and feel free to reach out to the ilert support team if you have any questions.

Building a mobile app often involves selecting the right framework that aligns with your team’s skill set and project requirements. Two popular choices are Ionic and React Native, both of which enable cross-platform development. 

‍

In this post, we’ll compare these frameworks and share why we, at ilert, decided to use Ionic for our mobile app.

Ionic vs. React: Quick overview

What is Ionic?

Ionic is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies like HTML, CSS, and JavaScript/TypeScript. Ionic apps are essentially web apps that run inside a native container via tools like Capacitor or Cordova, giving access to native APIs and device features.

What is React Native?

React Native is a JavaScript framework for writing real, natively rendered mobile applications for iOS and Android. It leverages React, Facebook’s popular UI library, enabling developers to build UIs with declarative components that are compiled to native components under the hood.

Comparing Ionic and React Native

Why did we at ilert choose Ionic

We evaluated both React Native and Ionic. Ultimately, Ionic resonated more with our needs and tech stack. Here are the primary reasons for our decision:

• Capacitor
  Capacitor is Ionic’s official cross-platform app runtime. It allows you to build web apps and then deploy them across iOS, Android, and the web with ease. Capacitor offers a streamlined approach to accessing native APIs compared to traditional Cordova plugins, making our development process more efficient.
• Consistent UI out of the box
  Ionic provides a robust library of pre-designed UI components, such as buttons, lists, tabs, and forms that automatically adapt to each platform’s design guidelines. This consistency saved us time that would otherwise spent building and fine-tuning a consistent user interface from scratch.
• Capacitor’s native layer flexibility
  Capacitor integrates with native iOS and Android projects, allowing developers to write custom native code when needed. This flexibility enables us to easily incorporate specialized features or optimize performance-critical parts of our app.
• Flexible styling
  Because Ionic is a web-based framework, we can apply CSS and popular frontend libraries, such as MUI. This approach offers more flexibility in design and theming than React Native’s style system.
• Code and component sharing
  Since Ionic apps are web-based, we can share code, components, and even design patterns from our existing React-based web app. For us, this was a huge advantage—reducing code duplication and ensuring consistency across our product.
• Large community and plugins
  Ionic’s community has grown significantly over the years. Capacitor’s ecosystem is packed with plugins and integrations. The community support and the library help us quickly integrate new features without reinventing the wheel.

When might React Native be a better fit?

While Ionic excels in many areas, React Native also has strengths that might be better suited for some teams:

• Heavier emphasis on native-like performance: React Native uses native platform components directly, which can be a benefit for apps demanding highly optimized performance or that heavily use complex native functionality.
• React ecosystem familiarity: If your entire team is deeply invested in React (JSX) and is already proficient in React Native’s style and navigation paradigms, React Native can lead to faster iteration.

If your project demands advanced native integrations with intricate animations or direct access to platform-specific UI elements, React Native might be more aligned with those goals.

‍

Ionic vs. React: Making your decision

Ultimately, whether you choose Ionic or React Native depends on:

1. Team skill set
   
   • Does your team have a background in web technologies, or are they more familiar with developing native apps?
2. Project requirements
   
   • Does your app require deep native functionality or are you building an app that closely mirrors a web experience?
3. Code sharing needs
   
   • If you plan on sharing a large portion of code between your web app and mobile app, Ionic can reduce duplication.
4. Time-to-market
   
   • Ionic’s pre-built UI components and familiar web tech can accelerate development for many teams.
   • React Native can be similarly fast for teams already well-versed in React Native’s approach.

Ionic vs. React: Conclusion

Both Ionic and React Native are strong contenders for cross-platform mobile development. Each framework has its own ecosystem, community, and unique way of building apps.

• Choose Ionic if you want to leverage standard web technologies like HTML, CSS, JavaScript/TypeScript, require a consistent UI library out of the box, and seek an approach that simplifies code sharing with a web application.
• Choose React Native if you’re already heavily invested in React Native patterns, require close-to-native performance for complex apps, or want direct access to a wide range of third-party native modules.

At ilert, we opted for Ionic due to our existing expertise in web technologies, the flexibility offered by Capacitor, and the ability to reuse code from our web app. This choice has streamlined our mobile development process and allowed us to focus on delivering new features to our users quickly and efficiently.