Flutter vs. React: A cross-platform showdown to end all cross-platform showdowns
Note: I am not an expert, and everything contained herein is a potentially temporary opinion.
So, you’ve got an idea and you’re a developer. This is great, and your first thought might be: “well, I’m a developer, so I’ll just go build it myself”; and maybe your second thought was “what am I going to build it in”. Maybe if it’s a sort of personal project that will only be used by you or maybe a couple others, an internal command line app will do, without much need to consult larger frameworks that formal application development might necessitate.
However, if you really want to go for it with something externally facing, whether that’s a mobile app, a mobile website, a desktop website, or even a desktop app, you might seriously start to consider development frameworks as your trusty steed that will ride with you.
Here’s the situation, you’ve been hired part time to build someone’s project. The project shows promise, but they’ve been doing everything manually. They tell you they want a website, but that eventually they would also like a mobile app. You then open your big mouth and tell them about “React Native”.
What’s React Native?
For those who don’t know, React Native is a mobile app development framework that formed as a sort of offshoot from React.js, a popular front end web development framework built by Facebook, and used to construct the websites — or rather, their user interfaces (UI’s) — of Facebook, Netflix, and DropBox to name a few. Whereas React has stormed the world of web development frameworks, React Native has enjoyed more moderate usage, with many companies opting out of React Native and switching to / focusing on native iOS and Android development.
Now, back to the “situation”. Now that you’ve told them about a seemingly dazzling way to get a website and mobile apps, they have stars in their eyes. Then, turns out there’s another developer on the project, and they suggest Flutter; and you damn near lose your mind, because what the f*** is a “Flutter”?!?
Enter chirp, chirp, chir — oh, I mean Flutter :)
Flutter is a cross-platform development framework released in 2016, that although was originally released for mobile app development, spread this year to also include web development. Flutter, similarly to React, employs a declarative component based style of programming (in Flutter, these components are called “Widgets”) that essentially allows for a single thread of execution flow, in which a home page is a widget, with child widgets, that when clicked on by the client (person on their computer), perform some action that may lead to some other widget, like another page, or potentially submit a form, or activate an animation, and the entire app is mediated by this interaction of widgets. Thus, the promise is that Flutter can do it all. One codebase. Component-based programming. Three platforms. That’s right, folks, Flutter is the one framework to rule them all…
…or is it?
Back to the “situation” (again). Now that we know what Flutter is, what do we do? Do we choose Flutter for everything? Do we choose React and React Native?
The response: It depends!
The reveal
It turns out I’m actually currently in this situation, and if my “supervisor” is listening, here’s the plan:
If I’m correct, the priority is a website. Flutter for web has been out in a stable form for 17 days now. I think the finished flutter projects for web reflect that. Don’t get me wrong, there is a beautiful gallery for flutter projects that can be found here. Maybe it’s just me, but I don’t particularly like the websites, and maybe it’s because they don’t feel like fully realized websites. They feel like something in between something that was designed for web, and something that was designed for mobile.
But, but, but, what about one Flutter to rule all the flutters?!?
Potential cons in flutter could include an animation issue in iOS (seen in an app built on flutter, will not be listed here for the sake of the app), as well as many things in the flutter GitHub repo (issues tab, suggest sorting by most commented) including the app crashing for google sign in, and reusability of the code. In conceptualizing the code I would write, I concur as to the potentially limited reusability of the code. I would want to use Cupertino widgets on iOS and Material for Android, and then design the website with neither. Although there may be some aspects of reusability, I think I may find myself still writing platform-specific code. Thus, if I’m writing platform specific code, although there may still be an improvement on pure native development in terms of learning curve and maintenance, it loses ground in the time aspect and not really being a single codebase (one codebase with a lot of platform specific code seems to defeat the point of one codebase).
Currently, due to perceived and documented issues relating to iOS, I would not recommend Flutter for iOS development. However, it could be a way towards an MVP in Android. Many Flutter packages and plugins work right out of the box for Android, but not for iOS, and both Flutter and Android being supported by Google could have something to do with it. However MVP’s are not necessarily scalable, and I do not see Flutter as a long-term solution in any sense, as for every platform, there are visual UI benefits to other platforms (on mobile, native development; online, JS frameworks or even a lot of vanilla JS).
I think, and Flutter’s rollout would suggest this, that Flutter was made as a mobile development cross-platform solution that could also work on the web. Since it’s not native, and therefore will take some time to work with the newest API updates of iOS and Android operating systems on mobile, Flutter should primarily be considered as a MVP-type solution. In terms of web, it seems possible that a moderately well-designed site could be built using Flutter, but the author has his doubts that such a site would translate nicely to a mobile site, at least as the platform currently exists.
React.js to save the day
I think our priority is a website, and I think a responsive website that can also be tailored to mobile, built in React.js, is our best bet. The website will be beautiful, we still get to have a product that works on mobile devices, and if we really need to, although I don’t necessarily recommend it, we could build a mobile app in React Native, with at least moderate code reusability along the way.
Closing Thoughts
To everyone who stayed this long, thanks for sticking around. I would like to again point out that I am not an expert, nor do I work for or am I currently affiliated with the makers of the platforms described herein. On a closing note, I would not want to give the impression that Flutter has absolutely no place in the SWE world. I think the HAMILTON app, seemingly built using Google’s Material Design guidelines, looks, for the most part, beautiful (just an endless list of news on the first page that I would scrap/cap, but I’ll leave you to see if for yourself). By the way, the title may have been a bit misleading, so if you came here for a comparison of Flutter vs. React Native, if not already obvious, the answer the article recommends is neither — learn iOS or Android, and hire someone to do the other .
Again, the author only fully stands by the comments made herein for the day the article was published/originally written — 3/31/2021. I fully acknowledge that Flutter could progress wonderfully in the time since writing!
Feel free to comment away!
