Should I create a Single Page app (SPA) or Multi Page app

Deciding Between a Single Page App and a Multi-Page App: The Right Way

Understanding the key differences between a single page and multi-page application is vital for an optimal user experience. Here are some key considerations:

Single Page App: When all your content is on a single page, it is all loaded at once, which can initially increase the page load time. However, once loaded, navigation between different sections of the page can feel very fast and responsive because everything is already there and ready to be displayed.

Multi Page App: With multiple pages, each page's content is loaded only when that page is accessed. This reduces initial load time because you're only loading a portion of your content. However, each time you navigate to a different page, there's an additional load time for that page.

An example: Twitter

Consider building a popular social media app like Twitter using bubble. Your main page might have your timeline, followed accounts, and recommended posts. Additionally, there are other sections for sign up, sign in, user settings, account information, and your profile.

In a single page scenario, if you were to build all these sections on one page, every user would have to load all these sections every time they open the page (and therefore the native app), increasing the load time. This is not ideal as it can slow down the overall experience.

Instead, consider that users don't need to login or edit their profile every time they use the native app. They might not check their subscriptions or billing information each time either. Hence, it's more efficient to put these less frequently accessed sections on separate pages, which are only loaded when actually needed.

Rule of thumb: if you expect your user to use a particular section or feature at least 3 out of every 10 times they open your app, include it on the main app page. All other features can be placed on separate pages. In our experience, this approach balances loading times and user experience effectively.

Single Page Apps and Wrappers: A Common Misconception

Most native app "wrappers" are designed with a single page app in mind, which can lead to a misconception that single page apps are always the best choice. In reality, while these wrappers can navigate between pages, they do so within the same 'view', similar to browsing in a single browser tab.

However, BDK Native has been - from the very beginning - designed with support for multi-page apps. It can create multiple 'views' or tabs as needed, leading to a more dynamic and responsive user experience. This functionality allows for what we call 'native transitions', similar to opening a new browser tab and loading a new page in it. To navigate back to the previous page, users simply swipe from the left edge of the screen on iOS or press the device back button on Android. This enhances the overall user experience and makes the interaction feel more like a native app.

Let's compare this with the single page app scenario using the same Twitter example:

In a Single Page App: If you navigated from your timeline to the profile settings page, the only way to return would be to navigate back to the timeline page. This is akin to pressing the browser reload button for every page, which can be slower and less intuitive.

In a Multi Page App with BDK Native: If you navigated from your timeline to your profile settings page, you could employ a 'native transition'. This transition feels like opening a new tab in your browser and loading the profile settings page there. Moreover, BDK Native provides an animated loading experience that you can customize in your BDK project settings. To return to your timeline, you simply swipe from the left edge of the screen on iOS or click the device back button on Android. This action feels like closing a browser tab; the profile settings page disappears instantly, and your timeline is immediately visible once more.

This comparison highlights how multi-page apps wrapped with BDK Native can provide a more native-like, seamless experience, enhancing the overall user journey and interaction with your app. Of course, if you feel like moving things around the pages or building everything into a single page app later, you can do it anytime without needing a rebuild.

Testing the Native Transition Feature

To experience BDK Native's native transitions firsthand, follow these steps:

Install the BDK Native app on your mobile device if you haven't already. You can install it by scanning the QR code above, or by opening the link on your device's browser (Safari on iOS, Chrome on Android).

Launch the BDK Native app and navigate to the 'Native transition demo' in the Feature Demos section.

Enter your Bubble page link (or any other link you want to test) and press 'Go'.

Watch as the app executes a native transition to your provided site URL.

To navigate back, simply swipe from the left edge of the screen on an iOS device or press the device back button on an Android device.

With these steps, you can experience firsthand the smooth native transitions offered by multi-page apps and understand why they can offer a more user-friendly experience. Remember, the key is to balance the content and features on your main page versus additional pages, focusing on what your users will use most frequently.

Updated on: 05/23/2023