Neutronium

MVVM HTML View engine for C# application

2 years after

Neutronium

MIT License NuGet Badge MIT License

What is Neutronium?

  • Neutronium is a library to create .NET desktop applications using HTML, CSS and javascript.

  • Neutronium uses MVVM pattern exactly the same way as WPF application.

  • Neutronium provides bindings with Vue.js and Knockout.js to build powerfull HTML5 UI.

Why Neutronium?

  • Use all the power of the javascript stack to build .NET desktop applications.

  • Easy to use:

    • Focus on ViewModel logic and abstract away from complex context, process and binding management you have to deal with other lower level embeded WebBrowser solutions available for .NET such as Awesomium, CefGlue, CefSharp and ChromiumFx
    • Architecture Neutronium application just like standard WPF application.
    • Compatible with popular MVVM libraries such as MVVM Light Toolkit and reactiveUi
    • Use standard javascript frameworks to build UI
  • Easy to set-up:

  • Reuse ViewModel designed for WPF with a different View Engine.

  • Build UI on a 100% Open Source Stack

Main features

  • Reactive

    • Two way-binding beetween view and viewmodel, including command binding
  • Pluggable architecture:

    • Easily plug-in new javascript frameworks or even embedded browser.

How?

  • Neutronium combines Chromium via ChromiumFx C# lib and a binding engine that converts back and forth C# POCO to javascript POCO.
  • Javascript objects are then used as ViewModel for javascript MVVM library such as knockout.js or Vue.js.
  • Listeners are set-up on C# and javscript side for two-way binding.

On the shoulders of giants

Usage - Example

ViewModel (C#)

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void Set<T>(ref T pnv, T value, string pn)
    {
        pnv = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(pn));
    }
}

public class Skill
{
    public string Type { get;}
    public string Name { get;}

    public Skill (string name, string skillType)
    {
        Name = name;
        Type = skillType;
    }
}

public class Person: ViewModelBase
{
    private string _LastName;
    public string LastName
    {
        get { return _LastName; }
        set { Set(ref _LastName, value, "LastName"); }
    }

    private string _Name;
    public string Name
    {
        get { return _Name; }
        set { Set(ref _Name, value, "Name"); }
    }

    public IList<Skill> Skills { get; private set; }

    public ICommand RemoveSkill { get; private set; }

    public Person()
    {
        Skills = new ObservableCollection<Skill>();
        RemoveSkill = new RelayCommand<Skill>(s=> this.Skills.Remove(s));
    }     
}

View (HTML)

  • First option: use Vue.js

    <!doctype html>
    <html>
    <head>
        <title>Vue.js Example</title>
    </head>
    <body>
        <input type="text" v-model="Name" placeholder="First name" >
        <ul>
            <li v-for="skill in Skills">
                <span>{{skill.Type}}:{{skill.Name}}</span>
                <button @click="RemoveSkill.Execute(skill)">Remove skill</button>
            </li>
        </ul>
        <div>
            <h2>{{Name}}</h2>
            <h2>{{LastName}}</h2>
        </div>
    </body>
    </html>
  • Alternativelly use knockout.js

<!doctype html>
<html>
    <head>
        <title>knockout.js Example</title>
    </head>
    <body>
        <input type="text" data-bind="value: Name, valueUpdate:'afterkeydown'" placeholder="First name" >
        <ul data-bind="foreach: Skills">
            <li><span data-bind="text:Type"></span>:<span data-bind="text:Name"></span>
            <button data-bind="command: $root.RemoveSkill">Remove skill</button></li>
        </ul>
        <div>
            <h2><span data-bind="text: Name"></span></h2>
            <h2><span data-bind="text: LastName"></span></h2>
        </div>
    </body>
</html>

Create the component(C# Xaml)

<Neutronium:HTMLViewControl RelativeSource="src\index.html" />

The binding is done on the DataContext property just as standard WPF, That's it!

Get started

Best way to start with Neutronium is to download template C# solution from visual studio gallery.

Documentation

Here

Comparison with other libraries:

  • Electron

    Neutronium is electron for .NET? Well, kind of. Neutronium however is a higher abstraction so that you don't need to care about Chromium implementation such as renderer or browser processes.

  • Awesomium

    Different from other libraries Awesomium is not open source. Last update was embedding Chrome 19 so it is pretty out of date. One neutronium distribution offer Awesomium as WebBrowser.

  • CefGlue, ChromiumFx, CefSharp

    All are open source libraries presenting up-to-date C# binding for CEF

    Offers all API of CEF. Used by Neutronium as a test WebBrowser using the monoprocess option.

    Same as CefGlue + remote API that handles comunication between Chromium processeses. Neutronium recomended set-up uses ChromiumFx as a WebBrowser.

    Well documented and package solution (including nuget). Does not offer all CEF binding to javascript however.

Nuget packages

ChromiumFx browser and Vue.js

ChromiumFx browser and knockout.js

This project is a continuation and improvement of MVVM-for-awesomium.

Related Repositories

CodeDependencyScanner

CodeDependencyScanner

Neutronium Application: inspect .Net assembly code ...

NeutroniumDemo

NeutroniumDemo

Demonstration Neutronium Application ...

Neutronium.SPA.Demo

Neutronium.SPA.Demo

Reference Vue Neutronium implementation ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...


Top Contributors

David-Desmaisons sjoerd222888

Releases

-   v2.3.0 zip tar
-   v2.2.0 zip tar
-   v0.1.0 zip tar