3 Reasons why React is King (& why Flutter will never surpass it)

#react #flutter #reactnative #npm

There is a common notion around the development community (especially focused on the React and Flutter communities) that Flutter will eventually "take over" the role of king of cross-platform (web, mobile, desktop, etc.) development. The following are x reasons why:

1. Prevalence & Community

Hundreds of thousands (if not millions) of developers already know and are fluent in React. In addition, companies of the caliber of Tesla, Facebook, Reddit, Salesforce, Tesla, Netflix, WhatsApp, Khan Academy, & more are all powered by React in order to fulfill their software-based initiatives (which many are dependent on for their core business model).

In short, these companies are all already utilizing React in their day-to-day, and implementing a completely new codebase is simply not a viable option for many internet-based companies. Let me give you an example:

Take Khan Academy, for example. Their platform is used by over 100M students, teachers, and parents to expand upon school-based subjects and learning materials with interactive lectures and practices. Could you even imagine the tremendous overhaul, amount of money, and time it would take for it to even become possible (much less feasible) to translate their entire codebase (likely in the hundreds of millions of lines of code) over to something like Flutter? It's the same intrinsic scenario for others like Tesla, Reddit, Salesforce, WhatsApp, and more. It is simply not a viable option.

You might be thinking it is not the right approach to base the fact companies will not switch to Flutter on the difficulty and complexity it would take to do so. Think about the following:

Even if companies wanted to migrate to Flutter, they would still struggle with finding the necessary development personnel, infrastructure, resources, and tools in order to do so, as it is well known the community in and around React.js trumps anything that Flutter has managed to acquire over its few short years of existence.

2. Ease of Use & Practicality (Developer Experience)

Let's get technical. The following is an excerpt of Flutter code that uses Dart's built-in type safety (according to the documentation & proper convention) that uses an array of a certain BloodTypes enum to subsequently handle functionality within class methods:

List<List<List<BloodTypes>>> possibleCombinations = [
    [BloodTypes.opos, BloodTypes.opos],
    [BloodTypes.opos, BloodTypes.oneg],
    [BloodTypes.oneg, BloodTypes.oneg],
    [BloodTypes.apos, BloodTypes.opos],
    [BloodTypes.apos, BloodTypes.oneg],
    [BloodTypes.apos, BloodTypes.apos],
    [BloodTypes.apos, BloodTypes.aneg],
    [BloodTypes.aneg, BloodTypes.oneg],
    [BloodTypes.aneg, BloodTypes.aneg],
    [BloodTypes.bpos, BloodTypes.opos],
    [BloodTypes.bpos, BloodTypes.oneg],
    [BloodTypes.bpos, BloodTypes.bpos],
    [BloodTypes.bpos, BloodTypes.bneg],
    [BloodTypes.bneg, BloodTypes.bneg],
    [BloodTypes.bneg, BloodTypes.oneg],
    [BloodTypes.bneg, BloodTypes.bneg],
    [BloodTypes.abpos, BloodTypes.opos],
    [BloodTypes.abpos, BloodTypes.apos],
    [BloodTypes.abpos, BloodTypes.aneg],
    [BloodTypes.abpos, BloodTypes.bpos],
    [BloodTypes.abpos, BloodTypes.bneg],
    [BloodTypes.abpos, BloodTypes.abpos],
    [BloodTypes.abpos, BloodTypes.abneg],
    [BloodTypes.abneg, BloodTypes.oneg],
    [BloodTypes.abneg, BloodTypes.aneg],
    [BloodTypes.abneg, BloodTypes.bneg],
    [BloodTypes.abneg, BloodTypes.abneg,]
]

List<List<List<BloodTypes>>> generate() {
    List<List<List<BloodTypes>>> models = [];
    for (int i = 0; i < 324; i++) {
      List<List<BloodTypes>> model = [];

      for (int j = 0; j < 6; j++) {
        List<BloodTypes> pair = [];
        int r1 = Math.Random().nextInt(7);
        int r2 = Math.Random().nextInt(7);
        BloodTypes donor = matchNumType(r1);
        BloodTypes patient = matchNumType(r2);
        pair.add(donor);
        pair.add(patient);

        model.add(pair);
      }

      models.add(model);
    }

    return models;
  }

Take a look at how messy that type annotation is: List<List<List<BloodTypes>>>. Jeez. Not to mention the actual syntax superiority in the actual functionality, although that does come down to personal preference.

That being said, the following is how the aforementioned type annotation would be represented in TypeScript: BloodTypes[]. Or hey, if it's JavaScript, no type annotation at all. You've got options with React.

Ah, simplicity.

3. NPM

NPM (Node Package Manager) has close to 2M packages in total and 167.6B downloads in the last month alone. Yes, that's billion. Its reach? Unprecedented. Its reliability? Unmatched.

While Dart's own pub.dev has made tremendous advancements in recent years, it simply does not compare to the sheer amount of packages and developers contributing to npm's ever-growing library every day.

Concluding Thoughts

There are a myriad other reasons I can think of for why I would say React is superior to Flutter (job availability, integrations with TS, yarn workspaces, cross-platform and web integration w/mobile + desktop, etc.). At the end of the day, it all comes down to personal preference.

That being said, I have a great amount of respect for Flutter. In no way, shape, or form do I hate the language or Dart, I simply prefer React (from using them both extensively).

I encourage you to do your own research on the topic and try both React and Flutter out before you jump to any conclusions.