nreact

nreact copied to clipboard

First of all, nice job!

When do you think we can start trying all this cool CSX stuff out? :D

I have absolutely no time frame to share atm.

1. I have a working CSX transpiler (similar to XAML -> g.cs), but integrating it into VS with useful debugging experience is very difficult.
2. Roslyn-based approach seems to be more meaningful. But there are several obstacles regarding this.

• Microsoft made Roslyn so monstrous, even VS has a troubles to open and compile Roslyn itself.
• With minimal changes to Roslyn's C# parser, I've generated constructs shown on this project's title page. However there is internal Roslyn architectural problem: each token has to have a length that matches its textual representation, otherwise everything dependent on Roslyn just fails (editors, syntax highlighting, etc.). Xml has different textual and C# tokenization, that's why I abandoned this approach.
• Correct way of CSX via Roslyn is then full-blown support of Xml tags and corresponding code generator. This takes more time and deeper knowledge of Roslyn architecture. I'm not yet there.

1. Maybe it makes sense to invest time to CSX transpiler again, bring it to some level of usefulness. I don't know.

What do you think?

@demigor it's too bad that Roslyn can't support this out of the box, but CSX syntax would be the way to go, it would make writing WPF apps way more fun!

The Roslyn team really needs to check this out. :)

it would make writing WPF apps way more fun Absolutely!

React approach to generate UI is so much better and clearer than VM+DataBinding in typical WPF/UWP app.

@demigor I'm actually considering ditching WPF entirely and use Electron solely due to the bad DX of WPF, but if CSX sees the light of day, it'll be a serious contender!

@jeffijoe Just FYI, it's quite possible to build apps using WPF and NReact even w/o CSX right now, take a look ;)

Here's a current state of my work on building a TodoMVC tutorial app entirely using WPF and NReact (with NUnit tests):

https://www.facebook.com/daniel.kornev/posts/10154441515853783

Here's the tutorial I'm following: http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/

Here's my repository (@demigor - it includes several updates to NReact, I'll make a PR once I'll complete the tutorial): https://github.com/danielkornev/ToDoApp1

@danielkornev thats pretty cool! Not a fan of the boilerplate get-set in the components but that could actually be solved by writing a Fody weaver.

Also, very impressed with the styling! Didn't know WPF could pull that off, I can't seem to figure it out. :P

any way you can upload your transpiler to a branch? I want to take a shot at this, maybe other contributors will to...

@jeffijoe, What about a string based approach in the mean time? It'd still be cleaner than the existing syntax. For instance:

class TodoApp : NComponent
{
  protected object[] Items { get; set; }

  public override NElement Render()
  {
    var items = Items;

    return Render.Output(@"
      <StackPanel HorizontalAlignment=""Center"">
        <TextBlock Text=""TODO"" FontSize=""24"" HorizontalAlignment=""Center"" />
        <TodoList Items={Items} />
        <StackPanel Orientation=""Horizontal"">
          <TextBox Text=""Text"" TextChanged={OnChange} Width=""200"" />
          <Button Click={OnAdd} Content={ ""Add #"" + (Items.Length + 1) } />
        </StackPanel>
      </StackPanel>");
  }
}

Or something similar. I'm not familiar with how this works under the hood, but I feel this approach could easily return NXaml after parsing the string and it'd be much easier on the eyes for the developer. Granted, I understand that this won't necessarily lend itself to much in the way of useful debugging.

@JohnLouderback I think the problem with that is passing in scoped variables, which wouldn't work with strings.

Looking forward to CSX though!