Typescript or Dart? And More Important, React or Flutter?
Tags: react, flutter, typescript, dart
Published: 2020-05-13 08:10:48

---
title: Typescript or Dart? And More Important, React or Flutter?
published: true
description: A comparison on developer experience between React and Flutter from a web developer perspective.
tags: React, Flutter, Typescript, Dart
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/srnvawrx1r62bf7rf5ai.png
series: Wrapping my head around 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[^credits] adapted as mobile app in **Flutter** . If you didn't read the first part you can find it [here](https://dev.to/_denb/wrapping-my-head-around-flutter-1-of-x-4l7b). 

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:
```dart
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](https://api.flutter.dev/flutter/widgets/Padding-class.html) widget and its only purpose is to wrap an element and add a padding around or inside it. Another example is the [Opacity](https://api.flutter.dev/flutter/widgets/Opacity-class.html) 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:

```dart
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](https://github.com/dbertella/hector-app) where this snippets are taken from.
 
```dart
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![^peter]

[^credits]: [Hector the little dinosaur](https://hector.aureliemercier.com) written and illustrated by [Aurelie Mercier](https://www.instagram.com/aurelie_mercier/). Cover image is also part of the book.
[^peter]: Once again thanks [Peter](https://petervaro.com/) for being patient with me and proof reading all my posts! 😘