We have a large ecosystem of Javascript websites, actually Angular, that we don't plan to rewrite in c# any time soon. So the goal here is to be able to use a vendor dll in our javascript to add new features. This is a proprietary system, we don't have any alternative, either we use their dll, either we don't have the feature. I'm putting a lot of hope in webassembly here because this looked like the silver bullet to use that dll without having to rewrite the whole project in a new language.
Problem: all the examples I can find are more about using Blazor to write a website or call javascript from Blazor, I can't find anything to include some ad-hoc C# code into an existing project. I would have thought it would be a great use case though because being able to leverage C# threadpool on a webpage sounds pretty good to me!
Anyone has done something similar or know some examples/tutorials I could follow?
As Tuan says Angular and C# don't really live together in the way you suggest.
I would say there are 2 separate approaches here.
Have an C#.NET MVC app but adjust the routing so the Angular App Handles some pages and the .NET app handles others. This is OK but there are so many pitfalls such as the fact that you can not share bundled CSS and JS or maintain the structure of your Angular controllers (amongst others).
A better way would be keep your lovely Angular app the way it is but have a separate Web API application/project and use the angular app to call the dll (reference in the project) within the correct context as a REST API (via a simple POST or GET call).
It's not too clear exactly what you want to do when you say "... able to use a vendor dll in our javascript to add new features ..." but you can find info on writing and implementing C# as a Web API in .NET core here
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio
Related
We have a bunch of JavaScript code that uses UWP APIs that was written for a UWP Javascript app (.jsproj). Now this app is rewritten as a UWP C# app.
The UWP APIs in C#, JS and C++ are similar enough, see these examples for ApplicationData.LocationSetting, so migrating the code would not be that much of an effort - but it would still be work that has to be done.
Is there a way so that I do not have to rewrite all our JavaScript code in C# to be able to use it in our rewritten app? Can I somehow use the UWP JS APIs in a UWP C# app?
I was hoping I could use a simple webview to somehow access the APIs (my thinking was that the UWP JS app basically is just a webview), but in my testing I could not access them there.
Although I totally agree that JavaScript code looks similar to C# code. I'm afraid you cannot get what you want like your first post mentioned. The webview control is lightweight and I don't think it is possible for this control to include all required components for your js code to run.
If you've wrote some code in Windows Runtime Component before, like this doc Walkthrough: Creating a Simple Windows Runtime component and calling it from JavaScript mentioned, then you can reuse the Windows Runtime Component. But if you haven't done this, then I'm afraid you have to rewrite your code in C#.
Well, by the way, I believe you will find C# code is easy for you to write since there are more UWP C# demos then UWP JS demos.
This never got a proper answer, but the correct answer is to use the now-deprecated JSRT apis. These can be found here, and an old blog post about them to provide some understanding can be found here.
Obviously this isn't as useful anymore with the deprecation of Spartan Edge, but still can be helpful when there's no alternative options.
I went through below article
https://medium.freecodecamp.org/get-started-with-webassembly-using-only-14-lines-of-javascript-b37b6aaca1e4
and very impressed that we can use c++ code in javascript using web assembly.
Do we have any option to create such web assembly using c# where we can create web assembly and use in javascript like angular or react.
went through
https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio
But that does not look like creating an assembly that can be used in a separate angular only project with by importing
Thanks
From msdn:
JavaScript interop
For apps that require third-party JavaScript libraries and browser APIs, Blazor interoperates with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code. For more information, see JavaScript interop.
[https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/?view=aspnetcore-3.0][1]
Ithink looking to Blazor source code can help you to.
I think what you're looking for isn't Blazor, because it's a complete UI framework for ASP.NET client/server stuff using SignalR, that uses WASM at the client side. Maybe too much for your purposes, even if you're able to use any JavaScript framework together with Blazor, too.
But you're looking for a simple way to create just a WASM that exports methods to JavaScript that you can write using C#, right? Well, then I suggest you to have a look here:
https://itnext.io/run-c-natively-in-the-browser-through-the-web-assembly-via-mono-wasm-60f3d55dd05a
It seems the Mono way is working as you'd expect: You write methods in C#, compile a WASM and then you're ready to load and call them from any JavaScript client app, and you don't have to deal with ASP.NET stuff at all.
Compared to a WASM that has been created using lower level C++, you'll have a big bunch of DLLs for the Mono runtime, that need to be loaded to the client browser (!). That's a huge overhead, if you plan only a small feature set to be exported by the WASM. The best argument for creating WASM using Mono for me is, that I can use my existing codebase with all the algorithms and business logic for a really complex app, so I don't have to write and maintenance the same code twice in different languages.
I have a big project in GWT and i'm trying to integrate Angular2 with it. (angular2-gwt is not an option as i'm running on version 2.7 and can't migrate to 2.8 at the time)
I'm facing a couple of problems i don't seem to know how to face:
1) I heard that you can use JSNI to use the angular app but i didn't seem to be able to do that or to find any information about it. how does it work and what can i do with it? (invoke a function is an option?)
2) I tried to add the selector tag of the angular app to the GWT entry point html and that works well but when i'm trying to add the selector to a .ui.xml file (UI Binding) it doesn't work, why?
3) Is there an option to invoke the GWT client side from a servlet? What i mean is i'm at the angular2 app and use a rest call, can this rest call invoke something on the GWT Client side?
Thanks!
First off, I should note that migration from GWT 2.7 to GWT 2.8 was pretty painless for me. I updated my apps and didn't had any major issue (some Maven dependencies that changed, some flag here and there, etc).
I'm mentioning this because native JS support is vastly improved in GWT 2.8 vs GWT 2.7, so if at all possible you really should do the switch.
Regardless, in GWT 2.7:
You can call any kind of JS from GWT like this:
public static native void sayHello() /*-{
$wnd.alert("Hello world!");
}-*/;
Note the $wnd construction which is placeholder for the "global" namespace in JS (i.e. in JS you'd simply call alert() without using a specific namespace).
Please be aware however, that if you're interfacing with a lot of JS native code (such as using complex objects from angular), you will pay a hefty price for going this route. This route is good for when you want to invoke a function or two from JS, but other than this I don't recommend it.
You could have a look for example at the source code of gwt-openlayers at http://www.gwtopenlayers.org/ and see how it looks like for a more complex example (this library wraps a lot of native JS)
I don't really know any angular, but the .ui.xml is a special beast. Some obfuscation takes place in the background / some other stuff happens. The closest you will get to HTML, is to put some stuff inside a g:HTMLPanel widget, but to my knowledge, you can't really have JS in there.
A bit confusing what you're asking here. You can't easily invoke any client-side code from a server-side servlet, unless you insist; then, you could do workarounds and use techniques such as long polls, etc, but I'm not a big fan of those. I can expand more on the subject, but it appears that my understanding of your point might be lacking.
Our team is building a javascript library that enables other web apps in our company to consume and insert data into our app, using widgets we built with angular directives.
So we got our own app (that could be used independently), built with MVC .net (in visual studio), and with angular. And also we are producing sort of a javascript library that other apps can use and insert widgets (that are connected to data from our app through ajax calls).
We are really struggling with our deployment proccess. We need the following to happen:
Concatenating and minifyinh our javascript, and in the right order.
Compiling less, and concatenating and minifing css.
Handle external dependencies because we are using multiple 3rd party libraries also, which maybe others are using also.
We know about requirejs, but we are not sure it is suitable for a 3rd party sort of library we are building. Also we want to enable loading as CDN, is it still suitable?
We also know about grunt, but we are not using nodejs but MVC .net. Is it relevant?
We would appreciate your input! Thanks!
I would strongly recommend using a build tool such as Gulp or Grunt, both of which can easily handle the requirements you've given. An added benefit is both can be set up to initiate parts of the build process as files are saved, freeing developers to use any editor they want instead of a particular IDE.
I am building a website using the below stack. For this question, I think the software stack should not matter. I am more interested to know whether the way I am doing the project seems like a good idea or following the best practice.
- Twitter Bootstrap for the UI
- CherryPy
- jQuery
So the way I approached the project is like the below
- Use the Twitter Bootstrap to create the basic layout
- I have one js file and one css file for my project
- Based upon the requirement, let say for this button I need to do something like ajax call
- go to the js file and write like $("#id").click() and do the necessary stuff
- write the necessary action code in python
- Test
So basically, what I am doing, modifying the html file, adding the necessary code that I need in my single js file and do the python code. Seeing all this java script framework like backbone.js, require.js makes me feel that maybe I am not following the best way to do it.
In a sense, what I want to know is that assuming you have a website with few pages that does not have heavy user interaction how would you do it? Is there anything wrong the way I am approaching it? What would be best way to do it?
Thanks
Client side frameworks like Backbone, Angular, and Ember are built to help bring structure to heavy javascript applications. Don't get confused between a client side language like javascript (although now it can be used as a server side language to) and a server side language like C#, Python Php etc.
Most Single Page Applications consume a REST API. So all your functionality will be on the client side. Your server's primary responsibility is to push data to your client so the user can interact with it. Think of your client (written in js) and server(written in python) as two completely separate entities/apps.
If your application is not javascript heavy, I would not go with a Single Page Application and use your current listed tech stack. I would always recommend keeping your javascript structured, but you dont need a framework for this. Just follow one of the js patterns you feel most comfortable which can be listed here.