use named parameters?

[sethladd]

What do you think about:

div(className: "somehing", children: [
  h1(style: style(height: "20px"), "Headline"),
  a(href:"something.com", "Something"),
  "Some text"
])

instead of

div({"className": "somehing"}, [
  h1({"style": {"height": "20px"}}, "Headline"),
  a({"href":"something.com"}, "Something"),
  "Some text"
])

?

[hleumas]

Hi @sethladd,

I am not sure what are the benefits of this. I see at only as a little bit different syntax and that is not enough to outweight the cons I see:

• In React, you can easily access all of your props as a simple Map structure. This is convenient because it allows you to manipulate them using standard map operations and through functions operating on top of Map. I actually dislike the OOP way of masking standard data structures like List and Map by some fancy objects. It feels like building the Babel tower.

As Alan Peris said:
"It is better to have 100 functions operate on one data structure than to have 10 functions operate on 10 data structures."

• The set of valid props for elements is not limited. This would mean that Mirrors would be needed to make this happen and I really don't understand Mirrors performance implications.

[sethladd]

The benefit would be better code completion and static warnings when you misspell something.

Compare:

div({'styl': 'color:red'});

with

div(styl: 'color:red');

The second one will have a warning, and you'll be able to code complete the options.

[wstrange]

+1 :-)

On Tue, May 26, 2015 at 2:00 PM Seth Ladd notifications@github.com wrote:

The benefit would be better code completion and static warnings when you
misspell something.

Compare:

div({'styl': 'color:red'});

with

div(styl: 'color:red');

The second one will have a warning, and you'll be able to code complete
the options.

—
Reply to this email directly or view it on GitHub
#53 (comment)
.

[hleumas]

@sethladd thanks for pointing out the benefits. Unfortunately, I don't see way to overcome obstacles I mentioned in previous comment.

[jonaskello]

+1 for the typed version. I am currently working on making a typed Dart wrapper for react-bootstrap. For this I am using the approach suggested by @sethladd. It is a work in progress but for reference, the repo is here. The main benefit is that you can easily check what props are available. In theory you should be able to get parameters for each bootstrap component listed in Webstorm but seems it does not work at the moment. Possibly because of the return value being a typedef.
Btw I also provide a typed parameter for props that takes an untyped Map. That way you can add any extra untyped props you want.

[aaronlademann-wf]

@sethladd @wstrange @jonaskello

Workiva's UI Platform Team (@greglittlefield-wf specifically) has developed an API for strongly typed React-dart components, and we will be open-sourcing it soon!

[DanTup]

In React, you can easily access all of your props as a simple Map structure. This is convenient because it allows you to manipulate them using standard map operations and through functions operating on top of Map. I actually dislike the OOP way of masking standard data structures like List and Map by some fancy objects. It feels like building the Babel tower.

One of the main attractions to Dart is types, so I'm surprised you don't miss them here! If I was going to use React in Dart I was absolutely want strong typing of Props etc.

One of my colleagues created bindings for us to use React from Bridge.NET (a C#-to-javascript transpiler):

https://github.com/ProductiveRage/Bridge.React

There's an example on that page; the Props classes are nested within the components; all access to them is completely typed (and refactorable etc). Maybe worth a look :)

[kasperpeulen]

@aaronlademann-wf Are you still planning to open source it? I'm curious!

[aaronlademann-wf]

@kasperpeulen @DanTup it hasn't been prioritized, but it is still planned, yes.

[aaronlademann-wf]

@kasperpeulen @DanTup @sethladd @wstrange @jonaskello @hleumas

@greglittlefield-wf will be speaking at Dart Summit 2016 in Germany (Thursday, October 27th) about "Getting the most out of React in Dart". As part of that, he'll be announcing Workiva's framework for building statically-typed React UI components with Dart (new OSS repo).

The wait is almost over!

cc/ @joelleibow-wf @trentgrover-wf

[aaronlademann-wf]

@kasperpeulen @DanTup @sethladd @wstrange @jonaskello @hleumas

The wait is over. Workiva's Dart library for building statically-typed React UI components is public, and available on pub.dartlang.org!

https://workiva.github.io/over_react/

[sethladd]

Congrats!