Mobile app architecture with FlutterFire

In my time working as a software developer, I previously had a chance to be part of small development teams building production ready apps. Hopefully, this article can guide other teams in building their apps.

Traditionally, if you wanted to build an app for mobile users, you would have to form a sizable development team to write the different parts of the app. It can be hard to find people to do this, so the question is – Can this be done with a much leaner team of 3 or less? The good news is that it can! There are technologies in the market that allow engineers to build mobile apps quickly and cost-efficiently.

Depending on the type of app you are building, development requirements may differ. Some apps need to store and retrieve large amounts of data, so those require a database; If the app needs to communicate to other users, you need a server; Finally all apps definitely need a user-interface(UI). Other things your app may need, like payments and video streaming are out of the scope of this article. To fulfil most app requirements, I recommend a FlutterFire Architecture.

Architecture overview

FlutterFire comprises of 2 parts: Flutter and Firebase. Flutter is the frontend code which can be deployed to both iOS and Android devices. Firebase will be the backend of the app, residing wholly in the cloud. If you are familiar with either Flutter or Firebase, you may skip the introductions and proceed to the FlutterFire Implementation.

Image 1: Overview diagram

Flutter – Flutter is a framework written in Dart language which is used to package apps to both Android and iOS devices. Before Flutter, developers had to build Android and iOS apps separately. Flutter allows users to maintain a single code base for both. React-Native is another cross-platform solution not discussed here. You can find instructions on how to install Flutter on your device here: https://docs.flutter.dev/get-started/install

Firebase – Firebase is Google’s mobile development platform Firebase has a range of cloud services that provide easy-to-implement solutions to common needs such as accounts and database management. AWS and Azure provide similar services, however in the case of Flutter the integration is better supported and documented at the time of writing.

The benefit of using cloud services like Firebase is that you do not have to buy your own servers and pay only what you use. You also have to added benefit of writing simple code to perform calls to Firebase to for most of your app features. The rest of this article is dedicated to explain the services and how they integrate to mobile apps.

FlutterFire Implmentation

Authentication – Use this for signups, sign ins and account management. Firebase Authentication helps you securely store and authenticate logins for free! You also have additional options like sending verification emails/sms. https://firebase.flutter.dev/docs/auth/usage/

Cloud Firestore – This is a no-SQL database. Instead, it stores data as documents and provides fast and cost-effective querying. Flutter can directly perform CRUD operations on Cloud Firestore. Docs can be found here: https://firebase.flutter.dev/docs/firestore/usage/.

I recommend Engineers check these 3 things when using Cloud Firestore:
1. Configure the security settings on the database to ensure data protection. This can be found in the console under the ‘rules’ tab.
2. There are limits to querying due to the structure of data. This is especially the case with compound queries. Check out the docs here: https://firebase.google.com/docs/firestore/query-data/queries.
3. I would advise programmers to create a class for every document type in Flutter. This class will store type information like String, double, List<>, etc. This is to ensure the data types sent and retrieved from the database are consistent. Firebase and Flutter types are not totally compatible

Cloud Functions – This is the where the main backend code will reside. Any code that performs database operations, network calls or traditional server work, will be deployed here. Again, the benefit of having a serverless architecture is cost-efficiency. There is no need to buy and maintain a server, you can pay-per-use on Firebase.

There are 3 types of functions you should be aware of:
1. On Request – As the name suggests, these functions are called Ad Hoc.
2. Scheduled – These functions are run at specified intervals.
3. Triggered – These functions are useful if you want code to run when certain events happen. Some common examples are running database checks or operations when the database is changed. Other triggers include when a user authenticates, when a file is uploaded to Cloud Storage etc.

With these functions, you do not need to provision any servers. Firebase will spin up server instances to run these functions when required! Check out the docs here: https://firebase.flutter.dev/docs/functions/overview/

Edit: In my excitement in writing all the benefits of Cloud Functions, I neglected to mention one very important drawback – Cloud Functions are written in Javascript or Typescript, NOT Dart. So you may have to learn how to code in those languages and setup the libraries.

Cloud Storage – Cloud Storage is similar to AWS S3 and Azure Cloud Storage. It is a storage for files like images, videos, audio, etc. There is nothing that make it stand out from other cloud storage solutions, you could even use others like AWS S3 if you want, but since the Firebase account is already setup, you save time and effort implementing this part of your app. Docs for Flutter’s integration with Cloud Storage can be found here: https://firebase.flutter.dev/docs/storage/overview/

Cloud Messaging – If you want your app to notify users when the app is in the background or is not running at all, you need to setup Cloud Messaging. This could be the most tricky to setup out of all the other services because different platforms control notifications differently. However, once you manage to setup Messaging correctly, Firebase and Flutter help you send and receive notifications to both iOS and Android users with no fuss! Docs for Cloud Messaging: https://firebase.flutter.dev/docs/messaging/overview

Final note about using Firebase: TRACK YOUR BILLING. This article describes how a charity racked up a 30k bill overnight from poorly written code: https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-than-72-hours-307490bd24d. You can track you billing easily in the Firebase console’s settings.

Conclusion

There is long term support and planned upgrades for both Flutter and Firebase. The features listed here are not extensive and one should examine the docs to see if the FlutterFire architecture is appropriate for your app. Nevertheless, it is worth stating that building an app with this architecture can be done by a solo developer (I have done it). The free tier of Firebase is very generous and if you have little traffic on your app, no need to sweat because you pay close to nothing.

Happy coding!

Author: Lim Chee Keen

I'm a Singaporean who is always itching to travel. I work as a software engineer by day and program games and AI during my free time.

Leave a comment