Flutter ❤ Firebase
Written by:
Costa Souza Gabriel
Dillen Robbe
This article has been written by two last year students who study IT at the Karel de Grote University College in Antwerp. We got the opportunity to choose some interesting technologies in which we wanted to experiment. Flutter, Firebase, and Micro-Frontends caught our attention and definitely seemed to be worth our time, so we gave it a go. And so the group “Thirty Fingers” was formed and consists of three students. This article only focuses on Flutter and Firebase. If you wish to read the tutorial written by our third member Issam, about Micro-Frontends, you can do so by clicking the following link: https://dev.to/issamelnass/let-s-create-a-web-application-with-micro-frontends-and-firebase-3b0o.
Flutter
Flutter is an open-source UI software development kit created by Google and launched in May 2017. It is used to develop Android, iOS, Linux, Mac, Windows, and its web variant, all using the same codebase.
It is known for its high-quality overall performance due to the utilization of the Dart language. This is compiled into native code by the assembly and because Flutter has its own Widgets, so there is no need for having access to external widgets. This results in much less communication between the app and the platform. These two together ensure a quick startup and little to no overall performance issues.
With the use of Flutter, you will additionally observe that it provides you the hot reload functionality. This will dramatically reduce your development time due to its immediate changes to the code and its emulators and simulators. Another advantage of Flutter is the fact that we can be certain that the developer will have little to no trouble when the next OS version gets released due to it having its own widgets. As a result, you can focus on fixing associated bugs in older os versions.
After a while of using Flutter, I ought to say that it is a first-class framework to work with. Even if you don’t know Dart, you’ll be able to pick it up quickly. You can compare the syntax with JavaScript. If you know JavaScript, you know Dart. Although I’m sincerely pleased with the android version of it, I can’t say the same for the Flutter Web version of the framework.
As stated above, Flutter is well known for its hot reload functionality, which is one of its promoting factors to the public. But this functionality does not have support for the web version. If you look at React or Vue, for example, they do provide this function. Not as complete as Dart however they do have it. While doing this college project, I encountered many blunders and worrying issues. We’re certain that these issues are known between the Flutter devs. For example, many features need to be implemented twice, once for mobile and once for web. This is very annoying if you try to run a mobile-only version of the widget. The compiler may or may not say what the problem is. Making this a loss of time and hours of debugging solely to find out that a widget is no longer designed for web usage. Secondly, building the web version takes ages! The longest build time I’ve had was over two minutes! Sometimes the debugger simply gives up on us and does not even want to open. Even though web support has been announced as stable, we simply don’t think the current Flutter version is prepared yet. This might be better with the flutter 2.0 launch. However I haven’t given it a test run yet.
Another issue that I’ve discovered is that on the web version the transitions aren’t as fluid as on mobile. Sometimes you can experience a stutter when altering views. Which can be traumatic for some customers and provide an “unprofessional” look to your app.
The more I use Flutter, the more I get the impression that flutter web is solely supposed to be used with certain kinds of apps, like a Spotify mock or something similar. If you want something more “sophisticated” I would suggest the usage of VueJS or even React. This being said, from our point of view, The Flutter devs have marked the web version as stable way too soon. It needs more testing and improvements for sure!
I suppose that the main reason for the Flutter devs to be releasing a “stable” version this soon in the project is so that more and more developers will take it more seriously due to it being out of the beta phase. Because as we know, beta is nonetheless beta, and many of the “beta” development doesn’t even get released. So the Flutter devs think that by sending a “stable” version, people will start also developing their widgets and extensions with web version support.
If you take a look at their available packages, you will see that 70–80% of them are iOS and Android only! This breaks a lot of the project’s potential and makes us slow down a lot by having to make a different project for just the web version.
Knowing this, the Flutter devs were kind of forced to push the current beta to a “stable” stage so that developers would start to support it. Otherwiseit would simply stagnate the development process.
Fluttert is still a brilliant framework and it will make you win time in the long run. But consider using some other framework for your web environment until flutter web receives full support. Because for now, Flutter web is simply not ready.
Firebase
Firebase is a Backend as a Service (BaaS) provided by Google. Backend as a Service is a cloud service model that lets you outsource all the backend functionalities of a web or mobile application. Because of this you only have to write and maintain the frontend. By using firebase you don’t need to worry about setting up backend servers or implementing repeating functionalities for your applications. This is achieved by the use of API’s (Application Programming Interfaces) and SDK’s (Software Development Kits).
Backend as a Service is relatively new but there are already different providers, every provider has its own core features on its own focus. Some may choose to focus on mobile applications while others choose for offline synchronization as an essential feature. Most of them have a free plan to try them out and when you scale up you have different payment options with different prices for each provider. Therefore they are difficult to compare. All have their advantages and disadvantages. Here is a list of different Backend as Service providers:
- Firebase
- Back4App
- Parse
- Backendless
- AWS Amplify
- Kii
- Kumolos
- ….
Firebase itself is primarily focused on providing a backend for mobile applications. Some call Firebase a mBaaS which stands for Mobile Backend as a Service. One of firebase’s core features and advantages is that it’s automatically scalable to billions of users. This means you don’t have to worry about upgrading your servers if your application attracts more users. If it works for 100 users it will still work for 1 million users.
Firebase has different products that provide a lot of functionalities. These products are divided into three groups:
- Build
- Release
- Engage
Because our study project was only a proof of concept, we only used products from the build group and never needed one from the other two groups. Therefore we are going to give some additional information on the products that we used. If you are interested in the other products, you can get more information on the official firebase website. Firebase also has the option to use extensions which can be written by external developers to provide extended functionality to your application.
To begin with, we used the authentication product in our proof of concept. Authentication works with different providers, the basic one is just email and password and then there are the social logins. Firebase Authentication also supports anonymous and phone authentication. Other authentication functionalities like email address verification, password reset and email address changes are also supported.
Firestore is the name of the default database in firebase, it is a NoSql-database. It has a Json-like collection and a document syntax much like MongoDb. Firestore is an improvement on the older database which is called Realtime Database. But firestore itself can also function as a realtime database using snapshots to let your frontend listen to data changes in the backend. This can be tricky but there is a lot of documentation to help you succeed at it.
If you want to store files instead of data there is the Storage product that can help you. This is actually a google cloud storage bucket that is linked to your firebase project. However you don’t need to go to a separate google cloud console or get separate SDK’s to manipulate your files. All this can easily be done inside the firebase console itself or with the firebase SDK.
Our experience with flutter and firebase has been one that has surprised us. While firebase isn’t nearly as powerful as your own written backend, it has lots of opportunities and support for people who want to build an application without the hassle of building and deploying your own backend from the ground up. Firebase is certainly useful for developers who want to build an application and don’t have an entire team behind them to support every process that comes with releasing a stable app. Firebase also has a lot of products to aid with maintaining your app after it’s release. Flutter and Firebase are both Google products and therefore integrating these two systems is very easy and well documented.