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
-
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
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
Comparison with other libraries:
-
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.
-
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.
-
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 mono-process option.
-
Same as CefGlue + remote API that handles communication between Chromium processes. Neutronium recommended 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 knockout.js
This project is a continuation and improvement of MVVM-for-awesomium.
Support
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
