Bubble: Web Apps vs Mobile Apps

Whether you’re new to no-code, or you’re a veteran no-coder, Bubble stands out as one of the best no-code tools for web development in the market. Its robust feature set makes it the ideal option for anyone looking to build a web or mobile app – simple or complex.

Bubble is also continuing to grow, with third-party developers extending its capabilities even as its developers constantly imbibe feedback into their feature development plans.

As with any tool that offers a complete suite of customization and optimization options, though, you may need to take some time to get a hang of Bubble’s inner workings. But once you do, the results are priceless.

Is it Really Possible to Build a Mobile App With Bubble?

Since its inception in 2012, Bubble has served as a no-code platform for the development of websites and web-based applications. This posed a challenge to many developers who needed mobile apps to go along with their web apps.

Thankfully, that’s hardly the case today! Building a mobile app with Bubble is very possible, with many successful native apps built without code via the Bubble platform; including one by No Code Academy’s Joe Manier which currently boasts over 90,000 downloads. But this process is not as straightforward as building a regular web app – and for good reason!

Between them, Apple (iOS) and Google (Android) control over 99% of the mobile phone market. As a result, developers looking to develop native mobile apps must play by their respective rules. 

To develop an application for iOS, you’d need to write your application using the Swift programming language. Once completed, the app is then sent over to the folks over at the Apple App Store for review and approval. 

For Android, the process is different. Instead of Swift, Java is recognized as the official language for app development on Android, with Kotlin and Dart also heavily used by Android developers. The developed app must also be submitted for review by the Play Store.

The net result of these differences for the no-code world is that tools like Bubble which only supports JavaScript cannot directly develop native apps for Android or iOS. Thanks to its large and vibrant community, though, third-party apps have been developed to help you “wrap” your web app with a WebView wrapper for your desired mobile platform.

In this article, we will be going over the differences between building a web app on Bubble versus building a mobile app on the platform. We will also see some examples of web and mobile apps built using Bubble.

Building Web Apps with Bubble

Web apps are the bread and butter of the Bubble platform. In fact, the current iteration of Bubble is a full-stack platform that offers support for the development and launch of everything from single landing pages to very complex software on the web.

The first step to building a web app on Bubble is setting up a plan for your app. Bubble’s pricing plans range from a free plan that carries Bubble’s branding and offers limited features and storage capacity, to more robust paid plans that enable API linking, support custom domains, and provide dedicated servers and multiple development versions.

Once you’ve determined the best plan for your needs, it’s time to let the possibilities bubble forth. From job boards to marketplaces, project management platforms, and even social networking platforms, Bubble gives you the ability to build just what you need for your business. 

Depending on what you’re looking to build, Bubble provides you with the option of either building from scratch or employing ready-made templates for your project. Selected templates can then be customized – both for functionality and appearance – to match your project vision.

Bubble provides a linear workflow builder that allows you control frontend and backend workflows separately. This enables you to seamlessly determine where a user goes after each action, and can be combined with user permissions and field controls to keep certain features/functionalities of your app limited to only users with specific roles.

Sample Web Apps Built on Bubble

The best way to understand the versatility of a tool is to experience it. Consider some of the web apps developed using Bubble today; pay special attention to the wide range of niches to which they belong.

 

  • Goodgigs: A freelance platform that connects tech talents with job opportunities (both on-site and remote).
  • Moone: An employee feedback platform that integrates with Slack. Built to help team leaders and employers conduct safe employee surveys and better understand their team.
  • Reachr: An influencer marketing platform that matches brands with the ideal influencers for their campaign in the UAE.
  • Uneebo: A web app that helps you affordably design or redesign your office interior. 

 

Building Mobile Apps with Bubble

Building a mobile app on Bubble follows all of the same processes highlighted above. First, you decide on a plan; then, you select your desired template or design your template from scratch, and design the workflow for your screens. But this is where the similarities end.

Once your web app is completed, it’s time to convert it from an app that’s only accessible via a browser into a mobile app that can be installed via the app store just like any other native application. To do this, you’d need to extend the processes described above.

First, you take advantage of Bubble’s built-in features to optimize the app for mobile. How can you do this? Consider some recommended best practices.

Best Practices for Building Mobile Apps on Bubble

  1. Make your app a single page app that uses groups for the various screens. You can do this by using the show/hide element feature to make the mobile experience even smoother.
  2. AVOID including  any Navigation-based workflow actions that would lead the user to a different page. Instead, keep all screens on a single page by using conditionals to show/hide them based on how the user interacts with the app.
  3. Build the app at 320px wide and make sure the main page’s settings in the property editor for fixed-width is unchecked.
  4. On all main groups, also uncheck fixed-width but check the box for max width and give a value of 200%, allowing the screens to expand to 640px. This ensures the app will look good on all the mobile devices from iPhone’s popular SE phone up to tablets.

With your app optimized for mobile, it’s time to wrap it into a native mobile app for iOS or Android. Native “wrappers” conform your app to the required technical standard of your chosen mobile platform (Android or iOS), without altering its visual appearance.

Now it’s time to select your native wrapper for your app. Although there are a slew of options out there, we’ve found the following to be the best of the bunch.

Best Native Wrappers for Bubble Apps

 

 

Built specifically for Bubble apps, BDK offers you a complete suite of options for integrating native features into your app. This includes the integration of biometric data, Touch ID/Face ID, push notifications, GPS service, access to native contacts, splash screens, QR code scanner, etc. It also supports both Android and iOS native apps, and can be previewed before publishing.

 

 

Zeroqode converts your Bubble web app into a native mobile app using its wrapper. It promises a 100% guarantee of acceptance on App Store and Google Play, and offers support for splash screens, Android/iOS icons, GPS services, device vibrations, and more. 

 

 

Like BDK, Codeless Academy was designed for Bubble Apps. Again, it supports the integration of native features using a plugin system – from Apple Pay to location tracking, custom splash screens, biometrics, and more. Users can also preview their app before purchase.

Sample Mobile Apps Built on Bubble

As with web apps, a wide variety of native mobile apps have been built using Bubble and third-party wrappers. Some of these include:

 

  • Lingua Fortis: A data-driven language-learning app that helps you build conversational skills in your target language.
  • Naturally Free: A mobile app that helps you discover natural products, search out ingredients, and filter products/ingredients based on your nutritional preferences or allergens.
  • Qoins: A financial technology application that helps users pay off their debts faster through a combination of grounded financial coaching and an automatic payments system. 

 

Conclusion 

Bubble’s continued growth and expansion is a marvel, even for long-time followers of the platform. The platform has continued to expand the possibilities of what’s possible without code. It also boasts a bubbling community (pun intended) that continues to extend the capabilities of the platform.

Today, there’s almost no limit to what kind of app can be built on Bubble. Its extensive feature options, curated templates, custom API support, and endless plugin options make it easy for you to implement almost any feature you can imagine. 

Third party platforms like Zeroqode, BDK, and Codeless Academy, also make it possible to create dedicated native apps for your web app, saving you the time and cost of building custom native apps from scratch.