integrating GWT and angular2 - javascript

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.

Related

How can i integrate C# code into an existing Javascript website (Angular)?

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

How to access UWP JS APIs in a UWP C# app?

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.

Create WebAssembly using c#

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.

Angular 7 configuration or alternatives?

I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.
I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.

Using ScriptSharp to code YUI controls

I am in the process of choosing ScriptSharp for coding all my javascripts. I already use JQuery and it is great that there is built-in support for this.
But what about YUI? I need it in particular for the editor control..
How can I code the part for the editor control within Script# framework? Is there a place to enter custom javascript when a certain library is not supported or something similar?
Are there any future plans to add YUI to ScriptSharp?
It would be interesting to have YUI support, but there aren't specific plans to add support for it right now, at least not at the top of the priority list.
However, if folks in the community want to get it going and contribute, I can help with questions that come up.
The general idea is you create an import library (there is an Import Library project template when you install Script#), which defines a c# API corresponding to the OM that you program against. The C# API consists of classes and stub methods that define the signatures (think of this as a header file of sorts). There are a few metadata attributes to customize generation of script that references those APIs to get various transforms to happen ... so you can create a working, and often times more natural c# interface that then maps to runtime script constructs and APIs you are targeting.
When I see the sample at http://yuilibrary.com/ I see a bunch of parallels to jQuery, so I imagine building support for it is likely possible at a technical level.
The best way to understand how to do this would be to look at the sources of mscorlib.dll (represents the core script objects) Script.Web.dll (represents the DOM) and Script.jQuery.dll (represents core jQuery API). All of these are in the Script# repository on github ... https://github.com/nikhilk/scriptsharp ... if you haven't already seen them.
We are creating an import library for OpenLayers (http://openlayers.org) and I can say it is incredible easy to do. We started just doing what NikhilK says, inspecting the source code. The results are just great. YUI is a very well designed and documented api, so I think it would be stratightforward. You could just create the import clases you need for your project.

Categories