Cycle.js alike extension

[dadhi]

Hello @demigor,

First. Wow! When I googled "virtual dom in xaml wpf" I did not expect anything to see. Next. Thumbs up for demos!

To the topic. The state of things in WPF is rather stale. Given that Rx exists for years I would expect some mature libs with FRP for WPF, and not just Observable to INPC adapter. Recently watched a lot regarding Cycle.js and Redux. But for Xaml we need something similar to VDom to make it work.. and I found NReact.

Given that Cycle by itself is a thin layer on top of Rx - it seems (may be completely wrong) feasible to add such layer to NReact.

What do you think?

Thanks,

• Maksim

[demigor]

Привет, Максим.

Дело в том, что версия на github уже давно не обновлялась. Я убрал транскомпилятор и приделал debugger-friendly опцию для конструирования Xaml-а в коде. Версии для всех вариаций Xaml (SL, WPF, UWP). Мне нравится концепция создания виртуального xaml как результата функции от состояния приложения.

Теперь по существу дела. Если честно, у меня едва хватает времени на NReact, Redux для .NET я сделал, но не опубликовал еще нигде.

Насчет Cycle.js – вряд ли я найду на это время. На повестке для есть более интересные задачи, как, например, динамическое создание компонентов из CSX (аналог JSX только для C#) . Было бы круто сделать редактор в окне слева и справа сразу видеть, что получилось...

Вот такие пироги,

С уважением Алексей

[dadhi]

Тогда интересно увидеть обновленную версию. Если что-то прикручивать, то к актуальному.

Под дебагер френдли имеешь в виду fluent синтакc, типа New blah?

Буду разбираться с твоим транспайлером, очень интересно как это сделано.

[demigor]

CSX Транспайлер делался просто – обычный C# парсер, который форфардит все, что C#. Как только встречается HTML, тогда выплевывает что-то преобразованное.

Debugger-friendly:

Было:

public override object Render()
{
  return
    <StackPanel VerticalAlignment=”Center” HorizontalAlignment=”Center”>
           <NClock FontSize={FontSize}/>
           <Button Click={(EventHandler)ClickMe} Foreground=”Red” HorizontalAlignment=”Center” Content={“Click me #” + (int)FontSize}/>
           <NClock FontSize={60.0 - FontSize}/>
    </StackPanel>
}

Стало:

public override object Render()
{
  return
    New<StackPanel>(NewProps.Alignment(VerticalAlignment.Center).Alignment(HorizontalAlignment.Center),
      New<NClock>(NewProps.FontSize(FontSize)),
      New<Button>(NewProps.Click(ClickMe).Foreground("Red").Alignment(HorizontalAlignment.Center), "Click me #" + (int)FontSize),
      New<NClock>(NewProps.FontSize(60.0 - FontSize))
    );
}

То, как было - ужасно неудобно отлаживать, потому как VS отлаживает другой, сгенерированный файл (CS). Нельзя ставить точки останова. Нет intellisense. Нет syntax highlighting.

Чтобы встроить полноценный CSX, нужно пилить саму VS, а это совсем другой размер геморроя. Может Roslyn каким-то боком может помочь, я не разбирался пока. Нет времени.

[dadhi]

Понятно, буду разбираться. Спасибо.

[demigor]

With last redesign Render in code looks like this:

    public override object Render()
    {
      return
        new NXaml<StackPanel>().
              Alignment(VerticalAlignment.Center).
              Alignment(HorizontalAlignment.Center).
              Children(
                new NClock { FontSize = FontSize},
                new NXaml<Button>().
                         Click(ClickMe).
                         Foreground(Colors.Red).
                         Alignment(HorizontalAlignment.Center).
                         Content("Click me #" + (int)FontSize),
                new NClock { FontSize = 60.0 - FontSize});
    }

This should be quite easy to product out of CSX syntax.

[dadhi]

Interesting. Btw I did not forget about nreact and hope to find time soon to look. Thanks for update.