Using custom C++ code for a HTML5 project - javascript

I've got a .cpp file that has a class and some functions that produce a desired output. However, our project is being written in HTML5/PHP. My question is, can I take input from the HTML source, use my C++ code to generate some output, and send it back to the HTML to be used for display on the website? I've tried using emscripten to change my code into a .js file but the file it produces is 80k+ lines of code and nobody wants to deal with that. Is there a way I can get this to work or am I doomed to having to rewrite my C++ code in js for this project?

So, as with any language you can use it to run a server side solution to which the client can connect. With C++ you would thus have to look at something like these frameworks. The downside to that is that it requires an internet connection and a special server installation.
On the html5/client side you're indeed right that you could use Emscripten. 80k+ lines of code doesn't really say much without knowing what the original code did and how long that one was. If it was significantly shorter then you should look into all the flags for Emscripten, because you might have included code that never gets triggered (or some of your code might have triggered the inclusion of a full file system emulation module, despite you not needing that). Do however understand that you would never edit the code generated by Emscripten directly! That's not how Emscripten is intended, nor is it advisable for the simple reason that the code isn't meant to be readable, nor sensible. The only thing the code should be is fast and runnable.

Related

javascript to typescript on an old file

I have found a front-end application here: https://github.com/Clarvel/TennoTyper (the main.js file) and am wondering if I should read what he did and convert it to typescript. Right now I am just importing the javascript file into my scripts in angular.json and is causing a significant slowdown. I wanted to use the code I found to make it into a back-end for my (and my friends) discord server to translate into the different languages of a game with a public API (which I will still need to research how to do but expressJS looks promising).
Tl;dr: Importing JS file in Angular is causing slowdown (high image load count). Should I convert this file to typescript or will this process take too long and be redundant.
Edit: Functionally the app wil work the same way, but it will return an image instead of having to type it in a box on the website.
Transpiling a exact JavaScript file to Typescript won't help you.
Even you code your application in angular (means typescript)
At the end of the day browser only understands javascript. Your code will be transpiled into javascript when you are building your pacakge.
So find out root cause slowness in the script and fix.
If you are familiar with typescript, do it in that way. Straight conversion without any improvement won't provide any impact.

Javascript frameworks just "markup" for javascript?

I am a little curious about how javascript frameworks work. Web development isn't really my area of expertise (I'm more of a c/c++ guy), but do javascript frameworks get translated into vanilla javascript?
Upon inspection of website source, it seems like it is mostly just standard javascript. Do these javascript engines just translate code into javascript on the server side?
Yes, most of JavaScript Frameworks translates the code you write to vanilla JavaScript, however, this does not happen on the Server Side, that would be really slow (Server side code is used to check databases, serve files, authenticate, etc.). This process of translation is done in compilation time (Although it is translation). (Just like when you compile c++ code into binary).
When it's source code to source code like JavaScript and React (JSX) to Vanilla JavaScript (JS), it's translation. When it's source code to binary like C++ source code to an executable (.exe) is compilation.
After you're done writting your JavaScript code with frameworks, you most translate it to Vanilla JavaScript (if you also used other uncommon languages to write styles, you must translate them too, like SASS instead of CSS). It is also common to minify it, so it can load faster.
All this is mainly done by tools like webpack.
When your site is up and running, we can say that is run time.
Looking at the fact that they were written in js they would be resolved to js before running and as Robin said they are executed on client side except Node which is a runtime environment and not a framework

Confused: javascript.js code shows in Chrome?

My understanding was that only the javascript code placed inline in the HTML page would show, never the code stored in .js files
...and I had never seen in any browser code in a .js file show on the clientside...
until I started to use Chrome and noticed all my code is available for viewing???
Have I been convincing myself the code is safe in .js files, when in fact it never was?
and while on this subject can a responder be totally clear whether the code in .js files can be hidden or not.
I have read many posts that left me doubting whether it can be done or not.
. Some say to place it in a .js file on the server so it executes on the server...
--- using 'language=javascript' and an html line with 'runat server'? no idea how to do that.
--- But, would that not defeat the purpose of speed, and refresh since the server has to be accessed?
--- might as well code it in the code-behind???(C#, VB, php, ...)
. Some say use an AJAX call etc... but it seems others contradict that, saying the code lands on the clientside anyway thus will show? ...and I am assuming this would be a callback with no page redraw...
JavaScript is executed in the browser, this means the script has to be submitted to the client. So, of course anyone can view the code, wether it's happening in the developer tools, getting the direct link out of your html or, for example, using a http sniffer.
Altough, there are some methods to make the script unreadable for humans.
Minifying your script is a good practice in general. It decreases file-size, so the client has to download less, speeding up loading time. After all, this does not really help making your script "unreadable" for users, there are a lot of deminifying services all around the web.
Still, there is another way: obscurifying (or obfuscate) your script. This replaces the code to make it unreadable. Unfortunately, I don't really have experience with using this technique, so I don't know how it would affect the performance of the js-code.
Maybe you want to have a look at this: How can I obfuscate (protect) JavaScript?
Javascript code can be seen even if its in a .js file the only thing you can do to make it little tough to understand is minify the js file.
Actually, javascript code stored in a separated file wont be shown directly; the user must explicitly type the name of the file in the address bar to see its content.
The only way to hide it is, as said before, to minify the file, which compress the file and make it unreadable for humans.

How should I start a new JavaScript project (Testing, Developing, Building)?

I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.

Is there a Java byte code reader implemented in javascript?

I know there are lots of libraries that read byte codes that are written in Java. Does someone know of a byte code library that is implemented in Javascript?
Since javascript is typically run inside a browser, it generally cannot read the actual bytes out of files, which makes it less-than-ideal for reading java bytes. If you somehow got the byte codes encoded in a form that the javascript could read, what would you expect the library to do with it? Can you provide more details about what you're trying to do?
If you're looking to be able to write code in Java, and have it run inside a browser, take a look at GWT. It uses Java to recompile your byte-code into optimized javascript.
Edit
Based on your added comment, that you are hoping to "find out the classes and methods used in a jar file on my local disk":
Since javascript is unable to access files on a local disk (at least, without using ActiveX), the technology simply won't allow for this sort of thing. Is there a reason you wanted to use javascript for this, rather than java?
And please accept my apologies if it sounded like I was questioning your motives. I really just wanted to get enough information to be able to adequately answer your question.
Update:
It looks like the Japanese project I tried to link to below is long gone.
In any case, time has passed and now there are a couple of hits for "jvm in javascript" on Google. Namely:
Doppio
BicaVM
Look what I found:
http://ejohn.org/blog/running-java-in-javascript/
Does this help?
Edit: unfortunately it looks like the original project's site is dead.
You could try through the Web Archive, here (in Japanese, tried to Google translate it, but I guess it was too much indirection :))
For goodness sake, if you follow that link, run your download through an anti-virus.
I don't know if it's trustworhty.
There are compilers which can compile Java to JavaScript. As a last resort, you can use one of those compilers to take a JVML bytecode disassembler written in Java and compile it to JavaScript. One example of such a compiler is GWT.
Similarly, there are compilers which can compile JVML bytecode to JavaScript. Again, you can take one of the above JVML bytecode disassemblers written in Java, use any Java-to-JVML compiler (javac, ecj, gcj, …) to compile it to JVML (i.e. .class files), then compile those .class files to JavaScript.

Categories