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

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.

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

Using a browser inside Angular

I want to build a web crawler/scraper web application using angular. Idea is to use client-side for making all http requests. Using a headless browser can take away much of the pain in parsing Html and evaluation JS code. Are there any headless JS-based browsers I can use?
I read about headless chrome and puppeteer. It turns out it can be used only from command line for running tests and not like a typical library which can work with angular. Or is there a way?
I am a scraper myself. This is how I solved the problem
get the html content using http/fetch
create an Iframe
Provide the string html content.
I am currently creating a solution using the same strategy above. Hope it helps.
Edit1: Do let me know in case you need a working demo. I feel its straightforward.

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.

integrating GWT and angular2

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.

How can I obfuscate javascript and html file using phonegap and android

I have a phonegap app and I want to launch it to Google play Market.
Before launch, I want to encrypt/obfuscate my code.
Please suggest me the best way to do that.
The best way to encrypt/obfuscate code for Phonegap is to actually have the native compiled code do the encrypting/decrypting.
You can find more information on how to do it here: http://www.oleksiy.pro/2011/09/20/phonegap-application-encryption/
Edit: This only works for iOS based compiles. Another similar question can be found here:
How to encrypt HTML+JS assets in Android Phonegap mobile app?
If you just need a generic obfuscator YUI compressor works well. http://developer.yahoo.com/yui/compressor/
This might be a little out of left field but one of the best ways to obfuscate your application's inner workings would be to migrate some/all of the business logic to a server-side web-service.

Categories