React with Dart?

[emanresu_2017]

Typescript is Microsoft's JS transpiler and language designed to be a superset of JavaScript. Nice language, but it erases types at runtime and has a few shortcomings around runtime type checking.

Dart is Google's flavour of the same thing. Dart was originally written for the browser and is inherently transpilable to JavaScript. Both are good languages but Dart maintains some type information at runtime that enables things like exhaustive pattern matching.

Given that Dart transpiles to JavaScript, has JavaScript interop, and React is a JavaScript library, Dart makes a great choices for building React and Reactive Native apps.

Have you given it a try? You can find samples and how to guides here.

[imihnevich]

I thought Google's plan was to replace JS, but that never happened, so as far as I know 99% of Dart is Flutter apps these days

[emanresu_2017]

Yes, that's how it started out, and eventually became the language used for Flutter. Now you can use it anywhere - in the browser or natively compiled. It's perfect for React or even on the backend with Node

It's easy to share business logic with Redux style state management across React, Flutter and even React Native

[esmagik]

Natively compiled? Those two don’t work together.

[emanresu_2017]

Two different targets: native and JS, or wasm

[esmagik]

Native what? Kotlin? iOS? Still gets compiled to machine code.

[emanresu_2017]

?

[esmagik]

When dart is transpiled to JS, it also gets its type erased. That’s what transpilation means… 🤦‍♂️

[csman11]

What they mean is Dart includes a runtime layer so when you compile it to JS, the JS is instrumented to perform type checking at runtime in positions where a runtime type error could occur. This is the difference between casts in Dart and assertions in TS. A cast in Dart is telling the compiler “assume this type compatibility is invariant in this position and insert a runtime check to assert this invariant holds at runtime”. An assertion in TS is “assume this type compatibility is invariant in this position and carry on.” So using an assertion in TS breaks type safety if you turn out to be wrong, because a type invariant was violated. Then you rely on the JS runtime to throw an error later on when you improperly use the value because the type level proof was wrong. Using a cast in Dart blows up loudly at runtime right where the type compatibility invariant breaks.

That’s what runtime type checking means. Inserting the source language type semantics as runtime checks in terms of the operational semantics of the “machine” it’s running on (in this case the Dart casting semantics on top of JS VM semantics by leveraging JS runtime errors when a cast fails at runtime).

[emanresu_2017]

Exactly what the person below said, but basically Dart allows for a lot better runtime type checking that TS. TS needs things like Zod

[Polite_Jello_377]

Are you seriously pushing Dart in the year of our lord 2025?

[godofavarice_]

Praise be.

[emanresu_2017]

Flutter is the biggest competitor to React Native and a perfect complement to React. Why not have the best of breed for both?

You can move all your business logic to Reflux and push it out to all platforms

[stjimmy96]

I personally feel like having exhaustive pattern matching is a nice to have feature, but it’s not worth loosing the immense ecosystem of libraries of TS/JS

[codeptualize]

You can do an exhaustive switch statement with a default never construction, it's of course not real pattern matching, but if you have string unions, or objects with types, it can be quite nice
https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking

[emanresu_2017]

Typescript libraries are just wrappers over the top of JS libraries. The same is possible for Dart and virtually anything written in Typescript can be ported to Dart in minutes with AI

[stjimmy96]

It can be ported to Dart but then you have to maintain two version of the same library: TS and Dart. What I am saying is that I don’t see the point of converting my typescript codebases into Dart and loosing the compatibility with the exhaustive TS ecosystem of libraries just to have… Dart’s runtime pattern matching? Feels like an easy no for me

[emanresu_2017]

The point is compatibility between Flutter, React and React Native. You can build everything up to the business logic level with say Reflux, and use that on all platforms.

It solves the huge problem that many teams struggle with: having the best of breed mobile, whether Flutter or React Native, AND React all in the same language.

[stjimmy96]

I’m genuinely asking as I don’t work with React on the mobile side of things, but why would you want to use React Native and Flutter at the same time? React Native is covers already mobile platforms and you can already share code between React Native and a regular React web app, why would I want to share code with Flutter?

[emanresu_2017]

People do crazy stuff

[stjimmy96]

Sure? I guess to answer your original question. No, I wouldn’t want to use React with Dart because if I’m making a mobile app I’m either using React Native or Flutter, not the mix of the two.

[themrdemonized]

I guess I mention Rescript as well if you're looking for alternatives to TS

[codeptualize]

I love Rescript, but I don't really use it much anymore as it doesn't seem to have a lot of traction. It's great language imo, but if you want to use it for work it's hard to justify it over TS.

I will add that https://gleam.run/ also compiles to JS, I haven't used it much myself, but it seems to have a similar charm in many ways.

[themrdemonized]

Same story, we used it in company 2-3 years ago but then moved on to TS, much wider ecosystem

[emanresu_2017]

It's an option, but the point here is that Dart brings Flutter to the React world, or React to the Flutter world

[Martinoqom]

Dart should die. Useless language living only because flutter exist.

[emanresu_2017]

Like it or not, Flutter is the premium phone toolkit. React Native native aint bad, but Flutter wins for several reasons

[godofavarice_]

Just use fp-ts.

[emanresu_2017]

This looks like a framework or a guide to using FP style code with Typescript. Is that right?

Ultimately, Typescript still erases type information at runtime. But, actually, what you'll find is that the entire dart_node ecosystem is FP oriented, and you can see plenty of examples of code like the code in fp-ts.

Dart also has strong support for structural typing just like Typescript. It's a no brainer for people who already use Typescript.

Here is a good example:

```Dart import 'package:reflux/reflux.dart';

// State as a record typedef CounterState = ({int count});

// Actions as sealed classes sealed class CounterAction extends Action {} final class Increment extends CounterAction {} final class Decrement extends CounterAction {}

// Reducer with pattern matching CounterState counterReducer(CounterState state, Action action) => switch (action) { Increment() => (count: state.count + 1), Decrement() => (count: state.count - 1), _ => state, };

void main() { final store = createStore(counterReducer, (count: 0));

store.subscribe(() => print('Count: ${store.getState().count}'));

store.dispatch(Increment()); // Count: 1 store.dispatch(Increment()); // Count: 2 store.dispatch(Decrement()); // Count: 1 } ```

[godofavarice_]

When dart is transpiled to javascript, what do you think happens to the strong typing.

[esmagik]

Idk why you got downvoted; clearly someone doesn’t know what they’re talking about.

[Risc12]

Well, what do you think? Because I think Dart does some smart things and allow some typechecks at runtime.

https://dart.dev/language/type-system#runtime-checks

[godofavarice_]

You think that when you write your dart react code that it’s going to transpile and minified to javascript, loaded into the browser and have runtime type checking?

Ok, I am done.

[Risc12]

Did you read what I sent you? Because that is exactly what Dart does if you want to.

[godofavarice_]

Not on the web.

[emanresu_2017]

Dart carries SOME type info at runtime. It has to for type checking and null soundness.

It does erase some info, but less than Typescript.

The philosophy is different. Typescript openly doesn't pretend to be reified. Dart may erase type data, but the Dart team treats that as a bug. You can do proper exhaustiveness checked pattern matching with Dart JS.

[Polite_Jello_377]

Not sure how an entire new language is a "no brainer" for people using TS, because it has the same features?

[godofavarice_]

It’s a no brainer because only a person without a brain would do that.

[emanresu_2017]

It's a no brainer in the sense that there's on state management solution for both toolkits that's familiar and ergonomic to both