Typescript or Dart? And More Important, React or Flutter?

This is the second part of a series of articles I want to write about my first attempt to build a children's book¹ adapted as mobile app in Flutter . If you didn't read the first part you can find it here.

My intention is not to dive deep into technical details but to give a fair comparison of the developer experience of these two worlds: React + TypeScript vs Flutter + Dart.

I'm sure many people wrote about it already but I think it's still worth iteration. If you are like me, a web developer, and you are planning to write your next app in Flutter at least you know what you're up against.

Components vs Widgets

This is going to be the first battle: in Flutter we have Widgets which are very similar to old school React components. It's good that at least they made the new keyword optional in Dart, thus instantiating a class would feel like calling a function 🥶 (You could find many examples online written in the old style though.) Either way, this syntax still looks quite ugly in my opinion.

Parenthesis, commas, and semicolons are all over the place.

A simple widget can end up this way very easily in my very little experience:

Align(
  alignment: Alignment.topCenter,
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white.withOpacity(0.9),
      ),
      child: Padding(
        padding: EdgeInsets.all(12.0),
        child: Text(
          text,
          textAlign: TextAlign.center,
          style: GoogleFonts.walterTurncoat(
            fontSize: 16.0,
            fontWeight: FontWeight.bold,
            color: Colors.blueGrey, // Color(0xff185122),
          ),
        ), // Text
      ), // Padding
    ), // Container
  ), // Padding
); // Align

This is not a complete widget you need to declare a class around it. It's just its content, what we return. Basically this is what one would write in JSX if this was written using React. When JSX was introduced people where skeptical. I believe having an HTML-like syntax with opening and closing tags is easier to read and understand and it's quite difficult to come up with something better than that.

In this case vscode is nice enough to add those smart comments after every closing parenthesis indicating what it's matching. Yet it's not the same.
Don't even get me started on the commas and semicolons!

Fragments in React are a very good feature that helps you write less and keep your code more maintainable. JSX FTW!

On the plus I like the way in Flutter widgets are super specialized. Some accept a single child, some a list of children for example.

There is a Padding widget and its only purpose is to wrap an element and add a padding around or inside it. Another example is the Opacity one but really all of them have a single responsibility. Leveraging this concept I believe it will help you write better React apps after all.

There is a lot of documentation about the different widgets and it's very easy to find the right one to use. StackOverflow is your friend here, as always, but the autocompletion in vscode is amazing so you might be able to find what you need without leaving your text editor.

I spent more or less two days googoling how to do bits and pieces and I was able to find what I needed quite easily.

Stateful or Stateless

As far as I know you have two types of Widgets: Stateful and Sateless:

class MyPageView extends StatefulWidget {
  MyPageView({Key key}) : super(key: key);

  _MyPageViewState createState() => _MyPageViewState();
}

In the example above we are missing the whole implementation that is in _MyPageViewState class. If you want to see what happens next have a look at the repository where this snippets are taken from.

class PageSlide extends StatelessWidget {
  final String path;
  final String text;

  PageSlide({
    @required this.path,
    @required this.text,
  });

  @override
  Widget build(BuildContext context) { ... }
}

And this is a stateless one. Pretty straight forward, right? Also you will have a lot of help from your editor of choice in building the constructor with the required parameters for example or if you forget to add @override, etc.
The fact that Dart is a real statically typed language brings a lot of powerful tooling opportunity to the table and the compiler is there to help you along the way.

Does this ring any bells? To me it looks very similar to what React was a year ago: class components with lifecycle and state vs plain functional components, doesn't it?

Classes why classes?

This brings me to the thing I miss most from React. The hooks! They made such a wonderful job there and wiped out the needs to use classes. In Flutter classes are the way to go, everything seems to be a class. I really don't like this, but there's no other way around it.

Conclusion

I'll wrap it up because I also want to write some code tonight and I don't want this post to be too long anyway.

I don't think anything could move me away from React (and Typescript and JSX) anytime soon. I'm totally into it and I'm enjoying writing it on a daily basis.

But hey, something else is out there, it's nice to discover a new world and figure out why people liked it. I'm interested in seeing if there is something worth to learn from it, in order to make myself a better dev.

I'm really enjoying working with Flutter so far. I want to publish my first app soon. Let's see if I can accomplish this!²

1. Hector the little dinosaur written and illustrated by Aurelie Mercier. Cover image is also part of the book. ↩

2. Once again thanks Peter for being patient with me and proof reading all my posts! 😘 ↩