-
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.
-
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:
-
Solution template available for a quick start
-
Vue Webpack template available to use .vue files
-
Reuse ViewModel designed for WPF with a different View Engine.
-
Build UI on a 100% Open Source Stack
-
Reactive
-
Two way-binding beetween view and viewmodel, including command binding
-
Pluggable architecture:
-
Easily plug-in new javascript frameworks or even embedded browser.
- 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.
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!
Best way to start with Neutronium is to download template C# solution from visual studio gallery.
-
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 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.
ChromiumFx browser and knockout.js
This project is a continuation and improvement of MVVM-for-awesomium.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent