Loic.NeutroniumCore.Neutronium 1.0.0

dotnet add package Loic.NeutroniumCore.Neutronium --version 1.0.0
                    
NuGet\Install-Package Loic.NeutroniumCore.Neutronium -Version 1.0.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Loic.NeutroniumCore.Neutronium" Version="1.0.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Loic.NeutroniumCore.Neutronium" Version="1.0.0" />
                    
Directory.Packages.props
<PackageReference Include="Loic.NeutroniumCore.Neutronium" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Loic.NeutroniumCore.Neutronium --version 1.0.0
                    
#r "nuget: Loic.NeutroniumCore.Neutronium, 1.0.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#addin nuget:?package=Loic.NeutroniumCore.Neutronium&version=1.0.0
                    
Install Loic.NeutroniumCore.Neutronium as a Cake Addin
#tool nuget:?package=Loic.NeutroniumCore.Neutronium&version=1.0.0
                    
Install Loic.NeutroniumCore.Neutronium as a Cake Tool

<p align="center"><img width="100"src="./Deploy/logo.svg?sanitize=true"></p> <h1 align="center">Neutronium</h1>

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

<p align="center"> <a href="https://www.chromium.org" > <img height="60" src="https://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif?revision=3"> </a> <a href="https://bitbucket.org/chromiumembedded/cef"> <img height="70"src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2015/Mar/14/3042045877-1-cef-logo_avatar.png"> </a> <a href="http://vuejs.org/"> <img height="70" style="margin-top: 10px;" src="http://vuejs.org/images/logo.png"> </a> <a href="http://knockoutjs.com/"> <img height="70" style="margin-top: 10px;" src="http://knockoutjs.com/img/ko-logo.png"> </a> </p>

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!

Product Compatible and additional computed target framework versions.
.NET net5.0 is compatible.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net5.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0 2 7/31/2021