Flutter for Native Mobile Apps?

[nelsonic]

Our plan for the next 6-12 months is to create two apps:

1. @dwyl App = personal effectiveness: https://github.com/dwyl/product-roadmap#what - help people capture everything that is on their mind in order to de-clutter. Help them transform the raw text/thoughts into actionable items (of various kinds) and then focus on the most important items.

The @dwyl App is our priority because we want to use it to improve our personal effectiveness ASAP!

2. @home App = all home-related functions e.g: to door entry, hot desk reservation, library book checkout, etc.

These two Apps have a decent amount of overlap: Auth, UI/Layout, Notifications,

Given that we would like to make the @home App a Native Mobile App so that it functions as fast as possible, we spent a bit of time over the last few weeks investigating our options for writing a cross-platform native mobile app.

Our short-list included Ionic https://ionicframework.com and NativeScript https://www.nativescript.org but we quickly dismissed those because we want the benefits of native performance not a "wrapped" JS (WebView) app with native components and APIs.

Why Flutter?

@dwyl we have guiding principals for technology selection for the Apps we build: #33

• 1. Security: advanced security features: https://flutter.dev/security
  • https://medium.com/@mehmetf_71205/securing-flutter-apps-ada13e806a69
• 2. Accessibility: Support for screen readers, high contrast and large fonts: https://flutter.dev/docs/development/accessibility-and-localization/accessibility
• 3. Open Source: Flutter was initially developed by Google but has since been spun out into an independent GitHub Org. Google still handles security reporting and that's a good thing because you know someone at Google is responsible for acting fast when a security report is made.
• 4. People Centric: the fact that it can ship to any device/platform makes it very people-centric because the UX will great no matter where the person is using it.
  • Gorgeous Native User Interaction including built-in support for gestures, voice, transitions and animations. These might feel like "nice to have" but some people really love these micro-interactions.
  • Native performance up to 120fps means buttery smooth UI anywhere (where there is a display with a sufficiently high refresh rate) because of the Dart compiler.
• 5. Mobile First: the first platform Flutter targeted was (Native) Android. Flutter is still predominantly used for Mobile UI but it can be used to build Desktop, Google Assistant, Web Apps and "Ambient Computing"! See: https://flutter.dev/showcase and https://youtu.be/NfNdXgJZfFo?t=884
• 6. Responsive: The Flutter UI framework is designed to work on any screen size without the Dev(s) having to jump through hoops to check the device width/height and debug random screen sizes!
  see: https://flutter.dev/docs/development/ui/layout/responsive
• 7. Offline First: SQLite database for caching/storing data locally:
  https://flutter.dev/docs/cookbook/persistence/sqlite
• 8. Developer Effectiveness - from everything we have seen - excellent documentation, regular predictable releases, good IDE support and stateful hot-reloading for rapid development - we are keen.
• 9. Internationalisation: Flutter has been built for internationalisation from the start: https://flutter.dev/docs/development/accessibility-and-localization/internationalization
• 10. Custom UI: with Material Theming, Devs/Designers can have full control over the UI see:
  https://www.youtube.com/watch?v=NfNdXgJZfFo&list=PLjxrf2q8roU0o0wKRJTjyN0pSUA6TI8lg

With that in mind we have tasked padawan @miguelmartins17 - who has experience of building Native Android Apps - with being our sherpa in exploring this exciting tech! He is on a mission to become a Flutter Expert in the next 6 months and make the journey as easy as possible for everyone that follows!

Note: I (Nelson) planning to invest 2 weeks to learning Flutter soon to determine if it can be our front-end tech of choice. I am currently doing work for @home so I need to figure out when I will have time ... 💭

Google ...

Google is investing heavily in Flutter and they are using Flutter for several of their cross-platform Native Mobile Apps including Google Assistant, Google Adds (their main money maker) and Stadia their recently launched gaming platform.
https://flutter.dev/showcase

This is not a reason to use a particular technology, but the fact that they are backing it and using it for their apps means it's a decent bet.

Proposal

I propose that we investigate using Flutter for cross-platform mobile apps.
My first objective is to test Flutter Web and see how easy it is to build a PWA: dwyl/learn-flutter#9
Then I will attempt re-use the same code for an Android Native App.

[nelsonic]

13 Reasons Why you should choose/ consider to move to Flutter by @ganeshsp1 (Jan 6, 2019 · 8 min read):
https://medium.com/flutter-community/13-reasons-why-you-should-choose-consider-to-move-to-flutter-in-2019-24323ee259c1
Number 12 (Desktop & Web) is already available. (the article was published in early 2019...)
I think it's worth him updating the article for 2020 given how much the ecosystem/community has grown!

[SimonLab]

I've also been testing Flutter the last couple of weeks.

The good:

• Good list of documentation/tutorial to get started: https://flutter.dev/docs
• Creating a nice UI with Flutter is much easier with declarative UI compare to css
• Testing the application on real device with hot reload help to iterate quickly on ideas

The less good:

• Setting up Flutter is not quick. On ubuntu I manage to install everything I needed with a bit of search, however I think it was a bit more complicated for mac users Flutter Mac Installation  learn-flutter#13
• I've been stuck trying to create a google signin without Firebase and haven't find a solution yet Feature: Log in with Google in Flutter App learn-flutter#4
  • The error report are a bit cryptic but I guess it's going to be difficult to beat Elm on this part.
  • Package documentation are succinct and often don't have an example on how to use them.
  • Flutter is highly coupled to Firebase.
• The phone emulator was slow on my computer (so I've just been using my device directly)

From a Flutter beginner point of view, once set up it is nice to see your app running on your phone. However when attempting to do some logic a bit less conventional (i.e. not using Firebase, #16 (comment)) it becomes really difficult to find an easy solution. So at this stage I haven't find it easy to be able to iterate quickly on features and to deploy a web app with Flutter.

[nelsonic]

@SimonLab thanks for sharing your thoughts on Flutter. ❤️

Indeed setting up on Mac was a bit tedious ⏳
because it requires XCode in order to compile an iOS App. 📱
But given that XCode is always required for any Native iOS App,
this is discounted as "That's Life" ... 🙄
And at least flutter doctor simplified the process with a simple checklist. ✅

As for Sign in with Google ... we spent way too much time on that "SPIKE"⌛️
and ultimately we are going to use Server-side Auth (Elixir)
and redirect back to the Native App as described in dwyl/learn-flutter#22 (comment)
This will work for all Native Apps (iOS, Android and Desktop)
we simply need to pass a JWT back to the Native Client
and then use the JWT for all subsequent API requests.

I don't see much advantage to using emulators when we have physical devices
that run the actual App and allow for hot-reloading. 💭
I think the Emulators are for the instances where people want to test on devices
that they don't have access to ... e.g: "legacy" Android devices. 🤷‍♂
It's good to have a simulator as a backup,
but real devices are always better for testing. 👍

Flutter being coupled to Firebase is fairly logical from Google's perspective.
They want to promote the use of Firebase both internally and externally in the wider dev community because they want to standardise the way mobile apps are built ...
Obviously Firebase is not an open "standard" ... so the coupling is annoying. 🤦‍♂
We will be using both a REST API and WebSockets in our eventual Native Clients.
Which is why we have decided to re-focus our efforts on the dwyl/app-mvp-phoenix 🎯

Building the Phoenix/Elixir App will mean that we get the REST/Realtime API (almost "free").
Which will in turn mean that people using the @dwyl App will be able to access their data using the API directly from very early on. And by doing API-driven development whereby API users are "first class citizens" we can allow people to build their own interfaces/dashboards to visualise and interact with their data. i.e. we build a platform for personal effectiveness that anyone can build on top of!

@miguelmartins17 should 100% continue with the Flutter Todo List Tutorial dwyl/flutter-todo-list-tutorial#2 and I will review all additions to the README.md and code.
Once the Flutter Todo List Tutorial is complete we will be able to extend it with the ability to:
(a) save data to the "backend" using the REST API dwyl/learn-flutter#6 and
(b) modify the UI to match the @dwyl app (it's just Material UI so it won't be difficult)
(c) add task timer/tracking functionality! dwyl/app#265

I am still very optimistic we'll be able to use Fluter for both the @home and @dwyl Native Apps. 🤞
But for now we (@SimonLab, @iteles and I) need to focus on the Phoenix App.

[nelsonic]

Flutter Web is making good progress: 🎉
https://medium.com/flutter/flutter-web-support-updates-8b14bfe6a908

Flutter 1.17 is looking good: (a significant performance boost for iOS!) 📱 🚀
https://medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e

I'm still focussed on building the "backend" in Phoenix. 🧑‍💻
But it's really great to know Flutter is making good progress. ❤️

[nelsonic]

Performance: https://medium.com/swlh/flutter-vs-native-vs-react-native-examining-performance-31338f081980

While this is a "synthetic" benchmark (as opposed to running a "real world" app written in the various programming languages/frameworks) it does have a pretty clear-cut conclusion:
React Native always uses more memory and CPU to perform the same tasks:

In some cases it uses 15x more resources and is 10x slower at returning the result of the calculation than the equivalent Swift or Flutter version. Which means it will drain the battery and overheat the device much faster.
There is limited real-world relevance for a "High CPU" app.
What would interest me is the memory consumption, refresh rate and battery consumption due to background processes. The fact is that most RN development still happens in JS as opposed to "native" C/C++ modules so the resulting App is bigger and slower than the equivalent Flutter binary.

[nelsonic]

https://www.smashingmagazine.com/2020/04/responsive-web-desktop-development-flutter/

[nelsonic]

Free (Official) Udacity course "Build Native Mobile Apps with Flutter":
https://github.com/flutter/udacity-course
https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905

[nelsonic]

2022 and SEO is still not resolved for Flutter Web Apps: flutter/flutter#46789 (comment)
That means for a certain class of Apps, e.g: those with public user-generated content using Flutter for Web is a no-go.

E.g. imagine building a Recipe + Meal-planning Web App
where you want people to be able to add their own recipes
or make a variant of an existing recipe.
or allow people to review recipes
leave comments or upload photos ... etc.

If all the content was locked up in a Canvas rendered UI with ZERO SEO it would fall flat on its' face.

If you're building something that needs to found (on the open internet) in order to get traction,
Flutter is not the answer.

[nelsonic]

https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0

[nelsonic]

https://survey.stackoverflow.co/2022/#most-popular-technologies-misc-tech

[nelsonic]

#finally ready for review: #80