Skip to content

NeutroniumCore/Neutronium

Repository files navigation

Neutronium

Build status NuGet Badge MIT License

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:

  • Build UI on a 100% Open Source Stack

Uses cases

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

Jetbrains logo

Many thanks to JetBrains for support and awesome Resharper!