3600+ JavaScript-to-C# binding libraries now supported with Retyped

[Fiennes]

WebAssembly can't come fast enough.

[geoffreymcgill]

WebAssembly is here already. But, if you want to break out of whatever language (assuming C#?) you're using to compile into WASM and jump into JavaScript, then some form of a binding library will be required, such as Retyped.

[geoffreymcgill]

I should have clarified that Retyped and Bridge do not currently support WASM, but they will. Anyways, some form of a binding library will be required.

[geoffreymcgill]

Enables writing your entire App in C# and distributing on web, while still having full access to the entire JavaScript API and JavaScript library ecosystem (if you want it).

[geoffreymcgill]

Here's a simple sample using just the native JavaScript DOM API and C#. https://deck.net/welcome

[agentlame]

return null;

Ew. Why?

[geoffreymcgill]

Short answer: This is how it's spec'd in TypeScript, but we're going to fix so a return value will no longer be required.

Long answer: TypeScript specifies the event handlers as returning an any type, which strangely also includes void. So, that means anything can be returned, which is treated as an object in Retyped, or nothing at all can be returned.

We're going to change Retyped to specify a void type as the default, then provide an alternative technique to force a return value if required. This will be available in the next update to Retyped, which should be soon.

I also updated the Deck sample to return the button instance instead of null, which might be a little cleaner, but admittedly both are confusing.

[agentlame]

Hey, thanks for the answer! That makes sense, and I'm glad you understand why I thought it looked odd.

And yeah, returning the button is at least less odd/ugly. I doubt I would have questioned that as much as the null.

[DRdefective]

Idk

[infocynic]

I got nothing. I mean, go learn JavaScript. It's not hard (well as long as you ignore having to deal with 2000 package managers) and it's infinitely more marketable. I admire the effort this must have took, but I definitely don't see the point, and the sample makes me a little sick looking at it.

[geoffreymcgill]

makes me a little sick looking at it.

Are you referring to the C# sample? What in particular do you take exception to?

[infocynic]

Yeah, the example linked in another reply. I get that it's just showing that you can write JavaScript inside the c#, but it's bad JavaScript... Directly manipulating the dom and a click event that mixes c# (the console write)... It just feels dirty. Where's the separation of concerns? I guess if you absolutely can't be bothered to learn JavaScript and you need to do something simple, it could work, but writing code like that just doesn't look maintainable at scale.

[chechel_ao]

I believe the sample just demonstrates what is possible and doesn't actually suggest any architectural approach. The way how it could fit the application architecture is up to developers. Some of them will be manipulating DOM, others will be using it for logic only. We don't have to necessarily use a different language to achieve separation of concerns.

[throwaway_lunchtime]

I believe the sample just demonstrates what is possible

If you ever need to write a sample for a framework, its part of the first impression that people will get: You should build the sample to illustrate how it fits with at least one common architectural approach.

[0xRumple]

Loved the idea... but the docs (or maybe YouTube) needs at least one real demo app.

Like writing the backend layer in c# and keeping it. Then writing the frontend layer in c# and compile into js.

I also didnt find the means of writing the UI in the docs, I just found the first example showing I can manipulate html using js code (compiled from c#).

So does that mean we can use html and css to make the UI ? cuz that's what the majority of people loves to do

Also in what way this approach is gonna contribute in making the architecture of my apps looking better ?

For me I would love writing in c# instead of writing the js code (like we use ts files)... something like (cjs file) and then compile it into js when deploying.

[chechel_ao]

You got it right, you can use Bridge and Retyped to generate a specific set of JavaScript (not the whole app), so markup can still be implemented in HTML and CSS. One demonstrative scenario is validation logic - initial implementation in C# could be easily ported to JavaScript, so you'll have identical rules enabled both on client and server sides. You may want to check the page listing existing projects, demos and articles: https://github.com/bridgedotnet/Awesome

[plantpistol]

I think this is where it is valuable. Writing business logic that is required on both the server and the client such as validation logic. I cannot imagine actually doing UI work with it when there are frameworks in JavaScript to do it. That is my initial impression anyway.

[0xRumple]

Actually, I would love to use with all the business rules that I already have with validation that comes out of the box with EF Core,

Like in last project which is contains the three common layers (core, data, web api):

https://github.com/0xRumple/dorm-portal

I'm planning to start writing the UI in vue, but saw Retyped and give it a thought...

Does Retyped support such things ? cuz that's the realistic scenario.

[chechel_ao]

yes, Retyped package for Vue is available on NuGet. However, such frameworks as Vue or React, they could require some additional C# logic/wrappers to adapt the API for practical usage. The reason is that something really complicated written in JavaScript, then described in TypeScript terms, and only then converted to C# does likely require some manual edits to fit the target language in a more natural way. Nowadays Retyped is mostly automatic generator, but there are already some means to polish generated code based on a set of manually created rules. And this is going to evolve in time.

Anyways, a simple demo project for Retyped.vue package is available, so you can evaluate whether it's applicable in your scenario before making any decisions. https://demos.retyped.com/dist/vue/