You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Bootsharp streamlines consuming .NET C# apps and libraries in web projects. It's ideal for building web applications, where domain (backend) is authored in .NET C#, while the UI (frontend) is a standalone TypeScript or JavaScript project. Think of it as [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) for C++ or [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) for Rust.
17
+
Bootsharp streamlines the integration of .NET C# apps and libraries into web projects. It's ideal for building applications where the domain (backend) is authored in .NET C#, while the UI (frontend) is a standalone TypeScript or JavaScript project. Think of it as [Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html) for C++ or [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) for Rust.
Facilitating high-level interoperation between C# and TypeScript, Bootsharp lets you build the UI layer within its natural ecosystem using industry-standard tooling and frameworks, such as [React](https://react.dev) and [Svelte](https://svelte.dev). The project can then be published to the web or bundled as a native desktop or mobile application with [Electron](https://electronjs.org) or [Tauri](https://tauri.app).
22
+
21
23
## Features
22
24
23
25
✨ High-level C# <-> TypeScript interop
@@ -32,75 +34,8 @@ Bootsharp streamlines consuming .NET C# apps and libraries in web projects. It's
In contrast to solutions like Blazor, which attempt to bring the entire web platform inside .NET, Bootsharp facilitates high-level interoperation between C# and TypeScript, allowing to build the UI layer under its natural ecosystem using industry-standard tooling and frameworks, such as [React](https://react.dev) and [Svelte](https://svelte.dev).
45
-
46
-
### Why not `System.JavaScript`?
47
-
48
-
Bootsharp itself is built on top of [System.Runtime.InteropServices.JavaScript](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/import-export-interop?view=aspnetcore-8.0) introduced in .NET 7.
49
-
50
-
If you need to expose a simple library API to JavaScript and don't require type declarations, Bootsharp is probably overkill. However, .NET's interop is low-level, lacks support for passing custom types by value, and requires extensive boilerplate to define bindings, making it impractical for large API surfaces.
51
-
52
-
With Bootsharp, you can simply provide your domain-specific interfaces and use them seamlessly on the other side, as if they were originally authored in TypeScript (and vice versa). This ensures a clear separation of concerns: your domain codebase won't be aware of the JavaScript environment—no need to annotate methods for interop or specify marshalling hints for arguments.
53
-
54
-
For example, consider the following abstract domain code:
— the code doesn't use any JavaScript-specific APIs, making it fully testable and reusable. To expose it to JavaScript, all we need to do is add the following to `Program.cs` in a separate project for the WASM target:
73
-
74
-
```cs
75
-
usingBootsharp;
76
-
usingBootsharp.Inject;
77
-
usingMicrosoft.Extensions.DependencyInjection;
78
-
79
-
[assembly: JSImport(typeof(IProvider))]
80
-
[assembly: JSExport(typeof(IGenerator))]
81
-
82
-
// Bootsharp auto-injects implementation for 'IProvider'
83
-
// from JS and exposes 'Generator' APIs to JS.
84
-
newServiceCollection()
85
-
.AddBootsharp()
86
-
.AddSingleton<IGenerator, Generator>()
87
-
.BuildServiceProvider()
88
-
.RunBootsharp();
89
-
```
90
-
91
-
— we can now provide implementation for `IProvider` and use `Generator` in JavaScript/TypeScript:
Copy file name to clipboardExpand all lines: docs/guide/getting-started.md
+4Lines changed: 4 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -46,6 +46,10 @@ public static partial class Program
46
46
}
47
47
```
48
48
49
+
::: info NOTE
50
+
Authoring interop via static methods is impractical for large API surfaces—it's shown here only as a simple way to get started. For real projects, consider using [interop interfaces](/guide/interop-interfaces) instead.
Copy file name to clipboardExpand all lines: docs/guide/index.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -2,25 +2,25 @@
2
2
3
3
## What?
4
4
5
-
Bootsharp is a solution for building web applications, where domain is authored in .NET C# and is consumed by a standalone JavaScript or TypeScript project.
5
+
Bootsharp is a solution for building web applications where the domain logic is authored in .NET C# and consumed by a standalone JavaScript or TypeScript project.
6
6
7
7
## Why?
8
8
9
-
C# is a popular language for building maintainable software with complex domain logic, such as enterprise and financial applications. However, its frontend capabilities are lacking, especially compared to the web ecosystem.
9
+
C# is a popular language for building maintainable software with complex domain logic, such as enterprise and financial applications. However, its frontend capabilities are lacking—especially when compared to the web ecosystem.
10
10
11
-
Web platform is the industry-standard for building modern user interfaces. It has best in class tooling and frameworks, such as [React](https://react.dev) and [Svelte](https://svelte.dev) — allowing to build better frontends faster, compared to any other language/platform ecosystem.
11
+
The web platform is the industrystandard for building modern user interfaces. It offers best-in-class tooling and frameworks, such as [React](https://react.dev) and [Svelte](https://svelte.dev), enabling developers to build better frontends faster than with any other language or platform.
12
12
13
-
In contrast to solutions like [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor), which attempt to bring the entire web platform inside .NET (effectively reversing natural workflow), Bootsharp facilitates high-level interoperation between C# and TypeScript, allowing to build domain and UI layers under their natural ecosystems.
13
+
In contrast to solutions like [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor), which attempt to bring the entire web platform into .NET (effectively reversing the natural workflow), Bootsharp facilitates high-level interoperation between C# and TypeScript. This allows you to build the domain and UI layers within their natural ecosystems. The project can then be published to the web or bundled as a native desktop or mobile application with [Electron](https://electronjs.org) or [Tauri](https://tauri.app).
14
14
15
15
## How?
16
16
17
-
Bootsharp installs as a [NuGet package](https://www.nuget.org/packages/Bootsharp)to the C# project dedicated for building the solution for web. It's specifically designed to not "leak" the dependency outside entry assembly of the web target, which is essential to keep the domain clean from any platform-specific details.
17
+
Bootsharp is installed as a [NuGet package](https://www.nuget.org/packages/Bootsharp)into the C# project dedicated to building the solution for the web. It is specifically designed not to "leak" the dependency outside the entry assembly of the web target—essential for keeping the domain clean of any platform-specific details.
18
18
19
-
While it's possible to author both export (C# -> JS) and import (C# <- JS) bindings via static methods, complex solutions will benefit from interface-based interop: simply feed Bootsharp C# interfaces describing export and import API surfaces, and it will automatically generate associated bindings and type declarations.
19
+
While it's possible to author both export (C# → JS) and import (C# ← JS) bindings via static methods, complex solutions benefit from interface-based interop. Simply provide Bootsharp with C# interfaces describing the export and import API surfaces, and it will automatically generate the associated bindings and type declarations.
20
20
21
21
22
22
23
-
Bootsharp will automatically build and bundle JavaScript package when publishing C# solution, as well as generate `package.json`, so that you can reference the whole C# solution as any other ES module in your web project.
23
+
Bootsharp will automatically build and bundle the JavaScript package when publishing the C# solution, and generate a `package.json`, allowing you to reference the entire C# solution as any other ES module in your web project.
Instead of manually authoring a binding for each method, make Bootsharp generate them automatically with`[JSImport]` and `[JSExport]` assembly attributes.
3
+
Instead of manually authoring a binding for each method, let Bootsharp generate them automatically using the`[JSImport]` and `[JSExport]` assembly attributes.
4
4
5
-
For example, say we have a JavaScript UI (frontend), which needs to be notified when a data is mutated on the C# domain layer (backend), so it can render the updated state; additionally, our frontend may have a setting (eg, stored in browser cache) to temporary mute notifications, which needs to be retrieved by the backend. Create the following interface in C# to describe the expected frontend APIs:
5
+
For example, say we have a JavaScript UI (frontend) that needs to be notified when data is mutated in the C# domain layer (backend), so it can render the updated state. Additionally, the frontend may have a setting (e.g., stored in the browser cache) to temporarily mute notifications, which the backend needs to retrieve. You can create the following interface in C# to describe the expected frontend APIs:
6
6
7
7
```csharp
8
8
interfaceIFrontend
@@ -12,28 +12,15 @@ interface IFrontend
12
12
}
13
13
```
14
14
15
-
Now add the interface type to the JS import list:
15
+
Now, add the interface type to the JS import list:
16
16
17
17
```csharp
18
18
[assembly: JSImport([
19
19
typeof(IFrontend)
20
20
])]
21
21
```
22
22
23
-
Bootsharp will generate following C# implementation:
— which you can use in C# to interop with the frontend and following TypeScript spec to be implemented on the frontend:
23
+
Bootsharp will automatically implement the interface in C#, wiring it to JavaScript, while also providing you with a TypeScript spec to implement on the frontend:
37
24
38
25
```ts
39
26
exportnamespaceFrontend {
@@ -42,7 +29,7 @@ export namespace Frontend {
42
29
}
43
30
```
44
31
45
-
Now say we want to provide an API for frontend to request mutation of the data:
32
+
Now, say we want to provide an API for the frontend to request a mutation of the data:
46
33
47
34
```csharp
48
35
interfaceIBackend
@@ -59,7 +46,7 @@ Export the interface to JavaScript:
59
46
])]
60
47
```
61
48
62
-
Get the following implementation auto-generated:
49
+
This will generate the following implementation:
63
50
64
51
```csharp
65
52
publicclassJSBackend
@@ -76,16 +63,16 @@ public class JSBackend
76
63
}
77
64
```
78
65
79
-
— which will produce following spec to be consumed on JavaScript side:
66
+
— which will produce the following spec to be consumed on the JavaScript side:
80
67
81
68
```ts
82
69
exportnamespaceBackend {
83
70
exportfunction addData(data:Data):void;
84
71
}
85
72
```
86
73
87
-
To make Bootsharp automatically inject and inititliaize generate interop implementations, use [dependency injection](/guide/extensions/dependency-injection) extension.
74
+
To make Bootsharp automatically inject and initialize the generated interop implementations, use the[dependency injection](/guide/extensions/dependency-injection) extension.
88
75
89
76
::: tip Example
90
-
Find example on using interop interfaces in the [React sample](https://github.com/elringus/bootsharp/tree/main/samples/react).
77
+
Find an example of using interop interfaces in the [React sample](https://github.com/elringus/bootsharp/tree/main/samples/react).
Copy file name to clipboardExpand all lines: docs/index.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ titleTemplate: Bootsharp • :title
7
7
hero:
8
8
name: Bootsharp
9
9
text: Use C# in web apps with comfort
10
-
tagline: Author domain in C#, while taking full advantage of the modern JavaScript frontend ecosystem.
10
+
tagline: Author the domain in C#, while fully leveraging the modern JavaScript frontend ecosystem.
11
11
actions:
12
12
- theme: brand
13
13
text: Get Started
@@ -31,7 +31,7 @@ hero:
31
31
<div class="icon">✨</div>
32
32
<h2 class="title">High-level Interoperation</h2>
33
33
</div>
34
-
<p class="details">Generates JavaScript bindings and type declarations for your C# APIs facilitating seamless interop between the domain and UI.</p></article>
34
+
<p class="details">Generates JavaScript bindings and type declarations for your C# APIs, enabling seamless interop between domain and UI.</p></article>
35
35
</div>
36
36
</div>
37
37
<div class="grid-3 item">
@@ -41,7 +41,7 @@ hero:
41
41
<div class="icon">📦</div>
42
42
<h2 class="title">Embed or Sideload</h2>
43
43
</div>
44
-
<p class="details">Choose between embedding all the C# binaries into single-file ES module for portability or sideload for best performance and build size.</p></article>
44
+
<p class="details">Choose between embedding all C# binaries into a single-file ES module for portability or sideloading for performance and size.</p></article>
45
45
</div>
46
46
</div>
47
47
<div class="grid-3 item">
@@ -51,7 +51,7 @@ hero:
51
51
<div class="icon">🗺️</div>
52
52
<h2 class="title">Runs Everywhere</h2>
53
53
</div>
54
-
<p class="details">Node, Deno, Bun, web browsers and even constrained environments, such as VS Code extensions — your app will work everywhere.</p></article>
54
+
<p class="details">Node, Deno, Bun, web browsers—even constrained environments like VS Code extensions—your app runs everywhere.</p></article>
55
55
</div>
56
56
</div>
57
57
</div>
@@ -63,7 +63,7 @@ hero:
63
63
<div class="icon">⚡</div>
64
64
<h2 class="title">Interop Interfaces</h2>
65
65
</div>
66
-
<p class="details">Manually author interop APIs via static C# methods or simply feed Bootsharp your domain-specific interfaces — it'll figure the rest.</p></article>
66
+
<p class="details">Manually author interop APIs via static C# methods or feed Bootsharp your domain-specific interfaces—it'll handle the rest.</p></article>
67
67
</div>
68
68
</div>
69
69
<div class="grid-4 item">
@@ -73,7 +73,7 @@ hero:
73
73
<div class="icon">🏷️</div>
74
74
<h2 class="title">Instance Bindings</h2>
75
75
</div>
76
-
<p class="details">When an interface value is specified in interop API, instance binding is generated allowing to interoperate on stateful objects.</p></article>
76
+
<p class="details">When an interface value is used in interop, instance binding is generated to interoperate with stateful objects.</p></article>
77
77
</div>
78
78
</div>
79
79
<div class="grid-4 item">
@@ -83,7 +83,7 @@ hero:
83
83
<div class="icon">🛠️</div>
84
84
<h2 class="title">Customizable</h2>
85
85
</div>
86
-
<p class="details">Configure namespaces for emitted bindings, function and event names, C# -> TypeScript type mappings and more.</p></article>
86
+
<p class="details">Configure namespaces for emitted bindings, function and event names, C# -> TypeScript type mappings, and more.</p></article>
0 commit comments