Flutter

[Dave Ford]

I wrote an article on Flutter in case anyone is interested:

https://codeburst.io/googles-flutter-react-java-swing-8174c8d9d402

[Jan Mostert]

1: it's should be its (multiple places)
2: Angular does have material design widgets

Otherwise, cool article!

On Thu, 22 Jun 2017, 07:57 Dave Ford <*@smart-soft.com> wrote:

I wrote an article on Flutter in case anyone is interested:

https://codeburst.io/googles-flutter-react-java-swing-8174c8d9d402

--
For other discussions, see https://groups.google.com/a/dartlang.org/
 
For HOWTO questions, visit http://stackoverflow.com/tags/dart
 
To file a bug report or feature request, go to http://www.dartbug.com/new
---
You received this message because you are subscribed to the Google Groups "Dart Misc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to misc+uns...@dartlang.org.

[Michael Thomsen]

Yup, AngularDart has a great set of Material components:

https://dart-lang.github.io/angular_components_example/

[tatumizer-v0.2]

From the article

> While JSX-less code is pretty ugly in React/JavaScript, it is quite elegant in Flutter/Dart.

When I look into examples, "elegant" is not the first word that comes to mind.

The structure contains  too many nested levels. It's difficult to read, and even more difficult to edit (e.g. to add more stuff).

We discussed the problem before, attempting to come up with more readable (less verbose) format.

Now I think the solution lies on the surface - the structure should be flattened (so it becomes in a sense more verbose, but carries more meaning as a side effect)

Example:

    return new Material(

      child: new Column(

        mainAxisAlignment: MainAxisAlignment.spaceEvenly,

        children: <Widget>[

          new Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[

              new Text(_batteryLevel, key: const Key('Battery level label')),

              new Padding(

                padding: const EdgeInsets.all(16.0),

                child: new RaisedButton(

                  child: const Text('Refresh'),

                  onPressed: _getBatteryLevel,

                ),

              ),

            ],

          ),

          new Text(_chargingStatus),

        ],

      ),

    );

  }

  

  Flat version:

  

  final refreshButton = new RaisedButton(child: const Text('Refresh'), onPressed: _getBatteryLevel);

  final refreshButtonPadded = new Padding(padding: const EdgeInsets.all(16.0), child: refreshButton);

  final noClueWhatItIs = new Column(

      mainAxisAlignment: MainAxisAlignment.center,

      children: [

         new Text(_batteryLevel, key: const Key('Battery level label')),

         refreshButtonPadded,

         new Text(_chargingStatus)

      ];

  );

  //etc.

  

 For some reason, everybody is obsessed with making it a single literal, but why? Is it cool or something?

This is strange: if you had a complex, 50-line-long math expression - won't you introduce intermediate named vars to simplify it?

Pretty sure JSX is trying to solve the same non-problem, or else there would be no justification for it

(javascript interpolation with `...${name}` solves the problem for text, and the rest is addressed by flattening; dart supported interpolation from day 1).

 

 

[Jan Mostert]

I don't get the hype around JSX.
Why not just write HTML?

[Dave Ford]

I don't think it's hype. It's not so much JSX. It's more a question of avoiding external DSL's. There are huge benefits to avoiding external DSL's and keeping everything in the "host" language.

You received this message because you are subscribed to a topic in the Google Groups "Dart Misc" group.
To unsubscribe from this topic, visit https://groups.google.com/a/dartlang.org/d/topic/misc/1CMvaAA4ToU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to misc+uns...@dartlang.org.

--

Dave Ford
Developer and Trainer
Smart Soft
https://smart-soft.com
https://twitter.com/@daveford

https://medium.com/@daveford

[tatumizer-v0.2]

 > There are huge benefits to avoiding external DSL's and keeping everything in the "host" language.

Yes. JSX is just a generic syntax helping to represent complex object literals in a programming language.

They use it for DOM objects, but it could be anything (and I think they use it more broadly, even in react).

The point I'm trying to make is that when we are inside programming language, we have enough expressing power to write same thing

without any special syntax, by flattening the structure. So far I haven't heard any explanation about the benefits of deeply nested literals compared with gradual building of objects from parts (see my post above).

It might be the case of some "functional extremism", which is considered "cool" by default (without even stating the position explicitly).

[Karan Sikka]

Perhaps we can take  the JSX vs HTML to a separate thread? The intent of this one is to discuss flutter.

[Dave Ford]

> So far I haven't heard any explanation about the benefits of 

> deeply nested literals compared with gradual building of 

> objects from parts

Well React supports both: "deeply nested literals" via JSX and "gradual building of objects from parts" via the mechanisms of JavaScript. Since you never leave JavaScript in React, you have all the power of JavaScript to "gradual building of objects from parts". Namely functions.

Regarding the  "deeply nested literals" thing. Many people disagree. There are a number of solutions that demonstrate the need for this:

1. JavaFX script had  "deeply nested literals" for UI as it's primary motivating factor. Check JavaFX Script's hello world: https://en.wikipedia.org/wiki/JavaFX_Script

2. The fact that many tools like android and GWT use XML for their UI.

3. Kotlin's type-safe builders

But, I mostly agree with you. My main thing is that I don't want to use external DSL's I prefer to keep it all in the host language. With things like object literal in JavaFX Script, JSX in React and type-safe builders in Kotlin, you can have your cake and eat it too.

I really wish Dart would have studied JavaFX Script or Kotlin and provided some way to do type-safe "deeply nested literals".

[Dave Ford]

I think it is very relevant to a Flutter discussion. 

A key design choice of Flutter is to not have an external DSL for describing deeply nested UI structures. And Flutter also chose to keep the UI specification entirely in the host language (Dart). This is very similar to what React did. 

HTML: external DSL

JSX: internal DSL (JSX is a JavaScript extension)

By using the host language (Dart for Flutter, JavaScript for React) for the UI you get access to loops, variables, functions, type-checking etc. Something you don't get when using an external DSL (like XML or HTML) to define your UI hierarchy. This was one of the main points I was trying to make when writing the article.

You received this message because you are subscribed to a topic in the Google Groups "Dart Misc" group.
To unsubscribe from this topic, visit https://groups.google.com/a/dartlang.org/d/topic/misc/1CMvaAA4ToU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to misc+uns...@dartlang.org.

[Vadim Tsushko]

суббота, 24 июня 2017 г., 0:44:25 UTC+5 пользователь Dave Ford написал: 

I really wish Dart would have studied JavaFX Script or Kotlin and provided some way to do type-safe "deeply nested literals".

I believe in Dart if you use `built_value` built pattern - you can improve your experience with deeply nested literals very significantly.

I'll probably soon be integrating highcharts.js library into our solution - so I made a `built_value` based wrapper for it (using https://github.com/gonzalopezzi/highcharts_api_gen as a starting point)

You can compare how highchart sample code looks with traditional, flutter-like library 

https://github.com/gonzalopezzi/highcharts_options/blob/master/demo/lib/spline_with_symbols.dart

and how it looks with `built_value` based library

https://github.com/vadimtsushko/built_highcharts/blob/master/demo/lib/spline_with_symbols.dart

Arguably it is not on par with Kotlins type-safe builders, but for me it looks and feels much better then traditional way. 

(but for me crucial requirement in that project is not easy of use but ability to use same models both in JSON serialization and in JS interop, and with `built_value` I can do it)

 

[tatumizer-v0.2]

@Dave: I'm pretty sure they looked into JavaFx script - it was mentioned during discussion (plus, there are people in the team who are very familiar with javaFx, maybe even designed it).

The problem is that javaFx syntax doesn't fit in dart (e.g., it's impossible to get rid of commas).

But still, I think, something can be done. "new" can be removed with no much pain. Also, I think "children" can be removed, too.

How would you like the following:

return Material(
    [column]: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        [column]: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            [text]: Text(_batteryLevel, key: const Key('Battery level label')),
            [paddedRefreshButton]: Padding(
                padding: const EdgeInsets.all(16.0),
                [button]: RaisedButton(
                    [text]: const Text('Refresh'),
                    onPressed: _getBatteryLevel
                ),
            ),
        ),
        [text]: Text(_chargingStatus)
    )
);

The trick here is to make *everything* a named attribute. Syntax [foo]: Text(...) means: add a child "foo", which is a text element. 

The names of children are arbitrary, just have to be unique within a container.

To generalize: whenever there's vararg parameter in the function signature, we can pass *named" arguments, which are treated as vararg items.

(Or something like that).

Compare the version above with the original version (a couple of posts earlier). Do you find it *way* more readable?