How to use Flatbuffers with JavaScript in the browser? - javascript

Pure JavaScript support for Flatbuffers has been abandoned, and the project website tells you to use transpile from TypeScript.
This is what I tried:
Write a Flatbuffers file website.fbs.
Run flatc --ts website.fbs to receive website.ts.
Run tsc website.ts to receive website.js.
Run browserify website.js -o website.browser.js to receive a file which I can include with <script src="website.browser.js"></script>.
But console.log(Website) tells me there is no Website object.
What is the correct path to use Flatbuffers with JavaScript in the browser?

The problem is that browserify does not export to global namespace (window) by default. By supplying the -s parameter to browserify you can get it to export to a global symbol:
browserify website.js -o website.browser.js -s website
After that you should be able to find window.website with the same API as before with the old direct to js code generator.
Or, in my opinion, the better option is to use a more modern bundler (Rollup, Parcel, esbuild, Webpack etc.) and have it bundle the generated ts (or js) together with your application in a single step so that you do not need to use the global namespace at all. That would also allow for more efficient and small code, better IDE support and probably some other benefits.

Related

VS2015 Convert javascript to typescript and node modules

I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?

Typescript compile to single file external modules

I'm trying to compile my project to a single js file and definition, however the compiler doesn't seem to do it correctly.
example: node /home/ian/.m2/repository/com/williamsinteractive/oxygen/gdk-build/0.3.0-dirty/compile/tsc/1.3.0/tsc.js --out test.js -m amd -t ES5 -d Command.ts
A blank test.js and test.d.ts gets created with no code in them.
Also a Command.js and a Command.d.ts get created with the code in them.
I want to be able to compile all my classes into a single .js file and ideally a single .d.ts file as it is a library to be imported by other projects.
TypeScript doesn't support --out with external modules. Luckily there are external tools that do a great job for this e.g. for amd recommend you look at r.js

Javascript library uses require() but I don't have or use nodeJS?

I've encountered several JavaScript projects and libraries that use this require() function, in order to include other files, like this:
require('somefile')
I never heard of that, and apparently it's something of node.js, which I don't have and don't use.
I just intend to use these JavaScript libraries in my own websites, but I'm seeing all sorts of instructions involving "npm" (whatever that may be). Then there is supposedly a replacement for that called required.js, but that seems to use a different syntax, like forcing to use require([...]) or something whereas the projects I need to include just do require(...).
What is the easiest way to deal with this require(...) stuff when using JavaScript projects in regular html5 websites? (i.e. all supposed to run client side)
Addition: I already tried require.js, but it doesn't seem to work. For example, the first line in somelibrary.js is this:
var assert = require('assert')
when I previously included require.js, and then somelibrary.js, I'm getting this error:
Uncaught exception: Error: Module name "assert" has not been loaded
yet for context: _. Use require([])
And this happens with anything that contains require()
Another addition: I noticed people mentioning 'browserify'. And some of the js projects I'm trying to include also recommend this. Apparently this is supposed to generate one single ready to use .js file that I can Include. But
Why don't they just publish this browserified .js directly? Is there a reason why I need to compile it myself? it's supposed to be something universal for all browsers or websites, right?
This browserify thing, which is apparently to avoid node.js, actually seems to require node.js itself (the instructions all mention "npm -g install browserify" etc)
Libraries should ideally support the following, depending on its environment. Lets say you are using a library called "MyLib.js".
No module loader detected
window.MyLib
Requirejs detected
define(['MyLib'], function (MyLib) {
// Do something
return {};
});
CommonJS detected, like node or use of browserify or bower
var MyLib = require('MyLib');
Not all libs conform to this, but they should. Maybe the lib you were looking at only supports Node. Looking at the source of jQuery you see something like this:
if ( typeof module === "object" && typeof module.exports === "object" ) {
// For CommonJS and CommonJS-like environments where a proper window is present,
// execute the factory and get jQuery
// For environments that do not inherently posses a window with a document
// (such as Node.js), expose a jQuery-making factory as module.exports
// This accentuates the need for the creation of a real window
// e.g. var jQuery = require("jquery")(window);
// See ticket #14549 for more info
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
Node.js is now used a lot to manage JavaScript projects, even if the project is client side. For example, Grunt, Bower, Browserify, Gulp and plenty other build tools run on Node.js, even though you can use them on client-side projects. Using those tools doesn't make your project depend on Node in production. Node is only used for development. To install those tools, one uses npm, which is a package manager. Like Maven or Ivy, npm will install packages and their dependencies by downloading them from the internet.
Libraries which install instructions involve npm are meant to be used in Node, but may be used in the browser after they have been converted with Browserify. Download the library with npm, then convert it to browser style using Browserify (which you install using npm, because itself runs on Node). You should get a single JavaScript file that you can import in your client-side project.
Libraries that are especially targeted for the browser will often refer to Bower as the install method instead of npm. Bower is also a package manager, but it is designed to download and install library written for browsers, not Node. If a library you want is available on Bower, you are able to download it and all its dependencies with bower install <lib>. Bower will put all files in a bower_components folder in the current directory. You can then copy those files to your project, or make your project import them directly from this folder.
So, browserify is simply a tool which makes it possible to use node-style modules in the browser. Yes, you do need to have node.js installed in order to use npm and browserify. But these times you need node.js for the most of your frontend toolsets.
npm is full of modules that are written in JavaScript and also run in the browser. With browserify you can use these modules in the browser.
It works by shimming the whole require mechanism and making it work in the browser. This also means that you can organize your code in modules:
// add.js
module.exports = function(x, y) {
return x + y;
}
// app.js
var add = require('./add.js');
var result = add(7, 8);
Now you could generate your bundle (the only script you need to include in your html) by just running browserify app.js -o bundle.js.
If you don't like the browserify approach you can also use the --standalone option to generate a JavaScript file in the UMD format. You could then simply include this in your html and use it with window.add for the previous example.
The require statement is handled by require.js, which can be used standalone in a javascript environment. It is a module loader which optimises loading dependencies in the browser. There is a Node.js implementation for it, but that doesn't mean that you have to use Node, you can just include require in your project.
(p.s: npm is Node Package Manager, and would be unnecessary for your project unless you're using Node. It streamlines the inclusion of javascript node modules into your project.)

Compiling nodejs code for safer distribution

Is there any software that I can use to compile nodejs program?
The reason I want to compile nodejs code is to make it safely distributable.
For example for a desktop application,etc.
And also I want to know whether nodejs will execute faster if compiled as it is asynchronous already?
Javascript is not a compiled language and Node.js is Javascript. It will be executed and interpreted at runtime. You can process your javascript with tool like grunt.js for example lint-test and uglify it, but be careful so that do not break the npm system since it is based on certain conventions.
To package your javascript for distribution in the node.js context build an npm module.
https://www.npmjs.org/doc/developers.html
For distributing javascript to the desktop client: Remember it's Javascript an it need to be executed in the Javascript VM. So to have some UI you need to run it in the browser or you need to have some webkit compiled dll to run your code...
something like this...
http://www.tidesdk.org/
You can also use: http://github.com/rogerwang/node-webkit (Thanks to #edi9999)
There is no way to do that with v8, it has only JIT option. It possible to make a "snapshot" with v8, but it's not exactly the same as compilation and node.js doesn't have support for this feature (also it might produce slower code). Also all your code will be available with toString() of functions.
You might be interested in JXcore project. It is a fork of node and as far as I know has some solution to code protection. Also one of the project goals is to develop javascript-to-LLVM compiler. Of course it can't have full support for ES specification (eval, new Function etc).
There's no way to 'compile' a nodejs program, as the javascript is interpreted at run time.
However, if you want to protect your code, you could maybe use something like Uglify JS to make the javascript less readable. However, this won't hinder people to change around your code.
The closest you might get to acheiving your goal is to create a self-executing Javascript bytecode wrapper.
A project that does this is pkg
It somehow creates a self-contained binary executable from Javascript, including module dependencies and asset files and produces a self-contained executable.
Installation and use is easy:
$ npm install -g pkg
$ pkg index.js -o my-program
$ ./my-program
It seems the resulting binary contains nodejs bytecode. It appears that you can cross-compile.

Using the dart:js library without a html file

Is it possible to use the dart:js library without having a html file to load the js files but some alternative way of loading the javascripts in the context?
I need this for a command-line app, so having a html file makes no sense
When you run a command line app in the DartVM there is no Javascript VM, so you cannot use Javascript libraries.
However depending on your use case, you could run your javascript code with node.js, and communicate with the DartVM using sockets.
Perhaps add some more details about your specific use case.
Update:
To run lessc from Dart, first install node.js.
Then Install lessc:
npm install -g less
lessc styles.less styles.css
You can then call lessc from Dart using dart:io Process.run().

Categories