Forem: Filippo Fonseca

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

Filippo Fonseca — Tue, 14 Jun 2022 01:02:16 +0000

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.

How to set up a Next.js project with TypeScript and React

Filippo Fonseca — Mon, 26 Oct 2020 20:08:17 +0000

NextJS is one of the most important, widely-used, and reliable frameworks for server-side rendering and production with React. This, combined with the ability to integrate TypeScript into your NextJS project makes it all-the-more great to use.

But how exactly do you go about doing so?

1. Initial setup

Before we begin integrating TypeScript into our project, we must first set up our boilerplate Next app with the default JavaScript.

Generate the Next app

In order to generate our boilerplate Next starter code, run the following command in your terminal:

yarn create next-app

NOTE: You can always use NPM's npx create-next-app, but we will be utilizing Yarn over the course of this project and walkthrough.

After you run the initial script, the CLI will prompt you with the following question:

? What is your project named? >

After you type in the name of your project and press Enter, you'll be good to go! (at least for the basic NextJS setup).

You can now test that the setup has gone smoothly by running yarn dev in your command-prompt and opening the port (usually localhost:3000, on a browser:

cd my-app
yarn dev

2. Create a tsconfig.json file

In order to implement TypeScript into our NextJS project, we must first create. a tsconfig.json file. Having this file automatically tell NextJS that the root directory is one of a TypeScript project. To put it simply, the presence of a tsconfig.json file in a project indicates that TypeScript is present as well.

How do we go about creating one? Simply run this command in the root directory of your project:

touch tsconfig.json

3. Install TypeScript & Test Server

Install dependencies

Install all required dependencies for TypeScript and NextJS by running the following command in your terminal:

# If you're using NPM
npm install --save-dev typescript @types/react @types/node

# If you’re using Yarn
yarn add --dev typescript @types/react @types/node

Now, pause your server (Ctrl+C) and start it back up again by using yarn dev.

As you do so, you will notice that NextJS has automatically detected TypeScript in your project (due to the tsconfig.json file that we created earlier).

4. Convert to TypeScript (really simple)

Change the file extensions

Now that TypeScript is properly set up in our project, we can now use it to program our app.

For starters, I would suggest you convert all existing JavaScript files in the pages directory of your project into TypeScript (REMEMBER: filename.tsx for React).

You are now ready to enjoy the benefits of using TypeScript inside of your NextJS app.

Happy hacking!