Why Does Jaspr Use a Different Syntax from Flutter?

[michalkubizna]

I am curious about why Jaspr employs a distinct syntax compared to Flutter. For example, React Native for Web (https://necolas.github.io/react-native-web/docs/) uses React DOM and hence the HTML DOM for object manipulation, yet it does not introduce a separate syntax. Would it be feasible to directly translate standard Flutter code into HTML/CSS?

[cybertheory]

Hey, I am working on trying to add this right now. Trying to make Jaspr more approachable for Flutter devs. I think the creator just meant for Jaspr to be able to use Dart to interact with the DOM and include SSR and SSG. I'm trying to build wrappers around Material UI with Jaspr right now for a UI Component Library:

https://github.com/cybertheory/caspr/tree/main

Fairly new project, would love some help getting it set up and developing!

[fusion44]

Take a look at the UI library: https://github.com/schultek/jaspr/tree/main/packages/jaspr/lib/src/ui

[cybertheory]

Awesome! It's a good start! Is it based off material?

[fusion44]

I don't think the components in the UI library have any styling attached to it, but you can build a material type UI library on top of the existing one. May save you some work.

[cybertheory]

Yup definetly 😀

[schultek]

Jaspr employs a distinct syntax compared to Flutter.

What exact syntax are you referring to? Jaspr is built to resemble Flutters syntax very closely. It has some differences (like Iterable<Component> instead of Component in build methods), the reasoning is documented here: https://docs.page/schultek/jaspr/jaspr-vs-flutter-web#differences-between-jaspr-and-flutter

Would it be feasible to directly translate standard Flutter code into HTML/CSS?

Manually sure, automatically probably not in the near future (its just not a priority right now).
Generally it is important to understand that Flutters Widgets will never be directly compatible with Jasprs Components (part of the reason I chose not to name it also Widgets to make it clear). Its just technically not doable and also not a goal of Jaspr.

As others pointed out there will be (and already are in the works) more high level ui component libraries for jaspr, some of which might be designed to more closely resemble flutters standard widgets. But I don't have a specific timeline for this.

[michalkubizna]

I was thinking about a mechanism with two options: one for compiling into HTML/CSS code and the other for a typical Canvas Kit compilation. The idea is to use the identical Flutter code, yet the output would vary based on the selected rendering method.

[schultek]

Seems nice to have in theory, but its not feasible in practice. I mean Flutter has the html renderer already you can use, but it does not produce nice html at all.

But as I said compatibility with flutter is a non goal of jaspr. The compromises on quality and web best practices would be too great.

[cybertheory]

I think that's a good desicion! It gives Jaspr flexibility to become its own powerful framework. I have been using it on my personal site and it's surprising easy to pick up. I like how you can just transfer in your HTML/CSS know how and there's already a huge knowledge base for that. I think being compatible with Flutter should not be a goal, but Flutter interoperability on the client is definitely a cool feature! I think jaspr allows for this.

Also the UI component libraries should completely remove the need for low level web design concepts.