Neutronium

https://neutroniumcore.github.io/Neutronium/

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 powerful HTML5 UI.

Why Neutronium?

Use all the power of the javascript stack to build .NET desktop applications.
Easy to use:
- 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:
- Solution template available for a quick start
- Use javascript framework cli tools to use the same tool chain as web developmenet taking chance of tools such as live reload.
- Reuse ViewModel designed for WPF with a different View Engine.
Build UI on a 100% Open Source Stack

Uses cases

Create an application from scratch
Migrate an existing WPF MVVM application to Neutronium
Use Neutronium to embed an HTML control in an WPF application

Main features

Reactive to property and collection changes
- 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 javascript 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="viewModel.Name" placeholder="First name" >
    <ul>
        <li v-for="skill in viewModel.Skills">
            <span>{{skill.Type}}:{{skill.Name}}</span>
            <button @click="RemoveSkill.Execute(skill)">Remove skill</button>
        </li>
    </ul>
    <div>
        <h2>{{viewModel.Name}}</h2>
        <h2>{{viewModel.LastName}}</h2>
    </div>
</body>
</html>

Create the component(C# Xaml)

<Neutronium:HTMLViewControl Uri="pack://application:,,,/src/index.html" />

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

Examples

here

Get started

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

See Here for detailed instructions.

Complete 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
- CefGlue
Offers all API of CEF. Used by Neutronium as a test WebBrowser using the mono-process option.
- ChromiumFx
Same as CefGlue + remote API that handles communication between Chromium processes. Neutronium recommended set-up uses ChromiumFx as a WebBrowser.
- CefSharp
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.

Support

Many thanks to JetBrains for support and awesome Resharper!

NeutroniumCore / Neutronium

readme