[dart-misc] 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!

Post by Dave Ford
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

['Michael Thomsen' via Dart Misc]

Yup, AngularDart has a great set of Material components:
https://dart-lang.github.io/angular_components_example/

Post by Jan Mostert
1: it's should be its (multiple places)
2: Angular does have material design widgets
Otherwise, cool article!

Post by Dave Ford
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

--
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

[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?

Post by 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)
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),
],
),
);
}
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).
--
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

[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.

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

Post by 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)
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),
],
),
);
}
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).
--
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

--
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 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

--
Dave Ford
Developer and Trainer
Smart Soft
https://smart-soft.com <http://www.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' via Dart Misc]

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

Post by Dave Ford

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).
--
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

[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.





On Fri, Jun 23, 2017 at 11:49 AM, 'Karan Sikka' via Dart Misc <

Post by 'Karan Sikka' via Dart Misc
Perhaps we can take the JSX vs HTML to a separate thread? The intent of
this one is to discuss flutter.

Post by Dave Ford

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).
--
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

--
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 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

--
Dave Ford
Developer and Trainer
Smart Soft
https://smart-soft.com <http://www.smart-soft.com>
https://twitter.com/@daveford
https://medium.com/@daveford

[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".

[Vadim Tsushko]

Post by 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 is
much better then traditional way.

[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?