I have a c#\XAML Win8 Modern app that I have been tasked with turning into HTML\JS.
In c# I could use:
PackageVersion currentVersion = new PackageVersion();
Is there an equivalent in js (I would guess it would be under something in WinJS)
Generally speaking, if it's an API that comes out of the Windows.* namespace, then it's usually available in JavaScript as well (with the exception of Windows.UI.Xaml.* and a smattering of others that aren't needed because JS has intrinsic APIs, as with JSON).
In this case, PackageVersion comes from Windows.ApplcationModel. The trick in JS is that you have to use fully qualified identifiers because there's not a using statement (so often we assign a local variable to the namespace and reference off that to save typing). So in your case, you'd be doing something like
var currentVersion = Windows.ApplicationModel.Package.current.id.version.
Or you can assign a namespace variable if you'll use it a lot:
var am = Windows.ApplicationModel;
var currentVersion = am.Package.current.id.version;
For anything in WinRT, just go to the docs page, e.g. http://msdn.microsoft.com/en-us/library/windows/apps/windows.applicationmodel.package.current.aspx, and click on the JavaScript tab under Syntax to see the specifics. If you don't get a syntax representation for JS, then that particular API isn't projected into JS.
Also, understand that WinJS is primarily a set of helper APIs and controls. You'll typically be using both WinRT APIs and WinJS APIs (though technically the latter are optional). They aren't mutually exclusive except for the WinJS UI parts that take the place of the XAML APIs in WinRT.
If you're getting into the JavaScript option, my free ebook from MSPress, Programming Windows Store Apps, in HTML, CSS, and JavaScript should help ramp you up, especially on the WinJS side of things.
Related
I am a beginner in GNOME desktop application development so I am trying to learn about it as much as possible. I have read various tutorials present on developer.gnome.org written for JavaScript. I know that through GObject Introspection I can access C libraries in JavaScript.
As use of JavaScript for desktop applications is new so not many documentations are present. I was wondering if there is any way I can know which functions I can use with what parameters to access some libraries.
For example I can create a button using GTK in JavaScript by:
this.mybutton = new GTK.Button({some code here});
How can I come to know about the name of the functions I can use? Is there any way I can make out the name of the function for JavaScript seeing the documentation written for C?
For some of the libraries I have seen this documentation written for JavaScript. Any help will be appreciated to understand more about GNOME application development.
I agree with you: the documentation is pretty low on the subject.
Most of the time I try to find already written code from other developers and change it to have what I want.
The C documentation is pretty complete on http://developer.gnome.org and most of the time you can use nearly the same methods.
I suggest you to take a look at this web site: http://www.roojs.org/seed/gir-1.2-gtk-3.0/seed/
And also to this one: http://zetcode.com/gui/javascriptgtktutorial/
Good luck with your javascript development !!!
There is new host for Gnome GJS documentation:
https://gjs.guide/
https://gjs-docs.gnome.org/ for API's
You still can get Javascript function mapped to the that C library function by searching though GIR files. Each library should have an XML file containing introspection information.
Example from one question I asked before.
grep -rn gdk_keymap_get_default /usr/share/gir-1.0/
/usr/share/gir-1.0/Gdk-2.0.gir:16781: c:identifier="gdk_keymap_get_default"
/usr/share/gir-1.0/Gdk-3.0.gir:15776: <function name="get_default" c:identifier="gdk_keymap_get_default">
vim /usr/share/gir-1.0/Gdk-3.0.gir +15776
<class name="Keymap"
c:symbol-prefix="keymap"
c:type="GdkKeymap"
parent="GObject.Object"
glib:type-name="GdkKeymap"
glib:get-type="gdk_keymap_get_type">
<doc xml:space="preserve">A #GdkKeymap defines the translation from keyboard state
(including a hardware key, a modifier mask, and active keyboard group)
to a keyval. This translation has two phases. The first phase is
to determine the effective keyboard group and level for the keyboard
state; the second phase is to look up the keycode/group/level triplet
in the keymap and see what keyval it corresponds to.</doc>
<function name="get_default" c:identifier="gdk_keymap_get_default">
<doc xml:space="preserve">Returns the #GdkKeymap attached to the default display.</doc>
<return-value transfer-ownership="none">
<doc xml:space="preserve">the #GdkKeymap attached to the default display.</doc>
<type name="Keymap" c:type="GdkKeymap*"/>
</return-value>
</function>
I've been comparing several SDKs in order to add some location-based AR in one of my Android Apps. So far I've really liked the overall simplicity of Wikitude, however there are things like them asking you to put some of the logic of the AR part in javascript files that confuse me.
What are you supposed to do with the javascript, what role does it serves in the overall flow between an Android Activity and the AR?
Also, as a side question, what sense is there to make out of this line in the Android documentation of Wikitude:
architectView.callJavascript(newData('" + poiDataAsJson +")')
at http://developer.wikitude.com/documentation/android. I assume there is a typo or mistake somewhere as newData is not defined anywhere in the Android code.
Thank you!
In order to enable cross platform augmented reality experiences, web technologies were chosen. The application flow is usually that the ArchtiectView is initialised and displayed by the native application. An AR experience is loaded which consists of an html file that executes javascript functions to create the objects in AR.
callJavascript method is used natively to communicate with the loaded AR exprience. It executes the passed javascript in the context of the loaded AR experience. Therefore it can be used to pass POI data as json to a function declared in the Javascript part.
There is an error in the posted java code
architectView.callJavascript(newData('" + poiDataAsJson +")')
should include 2 more double quotes
architectView.callJavascript("newData('" + poiDataAsJson +")'")
This executes the function newData declared globally in javascript and passes 1 parameter, the json encoded poi data.
Disclaimer: I work for Wikitude
I'm developing a networked application between the browser and a server running node.js. I'm sharing a lot of code right now, but when I actually deploy this I'd like the client to only get client specific code. My options right now are:
1.) Implement any browser/node.js differences using inheritance. I've tried this in a few places and I end up with a lot of classes that are very, very basic customizations of their parent often only partially specializing a single function. This is not a style I like very much because it means a lot indirection when you're trying to find out what's actually going on.
2.) Define a constant like IS_BROWSER at global scope and then check it whenever I need to change code paths on the browser vs node.js. Then closure compile all js with advanced optimizations to remove dead code on the browser (setting IS_BROWSER = true). Are there any problems with this approach assuming I do whatever I need to do to get advanced optimizations going in closure compiler?
3.) ?? I'm open to suggestions.
If you use advanced compilation, any unused code should be removed; if you use the compiler's export system correctly, any server-side code that your client code does not call will not be in the compiled version of the client code.
You could write all of your code in one big blob then, for your client, add one file with contents like
goog.require('my.client.app');
goog.exportSymbol('my.app.entryPoint', my.client.app.entryPoint);
the compiled code will not include anything that is not in the call tree of my.client.app.entryPoint. Likewise, if your compilation only exports a server entry point, client code will be excluded.
The above style is for writing your script to provide some function which will then get called by an inline script; to make the whole thing into a single script you could do something much simpler:
goog.require('my.client.app');
my.client.app.entryPoint();
To verify that you are not getting a lot of dead code in your compilation output, you could play around with something like this: ScriptCover
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Are there any Call-Graph and/or Control-Flow-Graph generators for JavaScript?
Call Graph - http://en.wikipedia.org/wiki/Call_graph
Control Flow Graph - http://en.wikipedia.org/wiki/Control_flow_graph
EDIT: I am looking specifically for a static tool that let me access the graph using some API/code
To do this, you need:
parsing,
name resolution (handling scoping)
type analysis (while JavaScript is arguably "dynamically typed", there are all kinds of typed constants including function constants that are of specific interest here)
control flow analysis (to build up the structure of the control flow graphs within methods)
data flow analysis (to track where those types are generated/used)
what amounts to global points-to analysis (to track function constants passed between functions as values to a point of application).
How to do it is pretty well documented in the compiler literature. However, implementing this matter of considerable sweat, so answers of the form of "you can use a parser result to get what you want" rather miss the point.
If you could apply all this machinery, what you'll get as a practical result is a conservative answer, e.g., "A may call B". This is all you know anyway, consider
void A(int x,y) { if (x>y) foo.B(); }
Because a tool sometime simply can't reason about complex logic, you may get "A may call B" even when the application designer knows it isn't possible:
void A(int x) // programmer asserts x<4
{ if (x>5) foo.B(); }
eval makes the problem worse, because you need to track string value results that arrive at eval commands and parse them to get some kind of clue as to what code is being evaled, and which functions that eval'd code might call. Things get really nasty if somebody passes "eval" in a string to eval :-{ You also likely need to model the program execution context; I suspect there are lots of browser APIs that include callbacks.
If somebody offers you tool that has all the necessary machinery completely configured to solve your problem out of the box, that would obviously be great. My suspicion is you won't get such an offer, because such a tool doesn't exist. The reason is all that infrastructure needed; its hard to build and hardly anybody can justify it for just one tool. Even an "optimizing JavaScript compiler" if you can find one likely won't have all this machinery, especially the global analysis, and what it does have is unlikely to be packaged in a form designed for easy consumption for your purpose.
I've been beating my head on this problem since I started programming in 1969 (some of my programs back then were compilers and I wanted all this stuff). The only way to get this is to amortize the cost of all this machinery across lots of tools.
My company offers the DMS Software Reengineering Toolkit, a package of generic compiler analysis and transformation machinery, with a variety of industrial strength computer langauge front-ends (including C, C++, COBOL and yes, JavaScript). DMS offers APIs to enable custom tools to be constructed on its generic foundations.
The generic machinery listed at the top of the message is all present in DMS, including control flow graph and data flow analysis available through a clean documented API. That flow analysis has to be tied to specific language front ends. That takes some work too, and so we haven't done it for all languages yet. We have done this for C [tested on systems of 18,000 compilation units as a monolith, including computing the call graph for the 250,000 functions present, including indirect function calls!], COBOL and Java and we're working on C++.
DMS has the same "JavaScript" parser answer as other answers in this thread, and viewed from just that perspective DMS isn't any better than the other answers that say "build it on top of a parser". The distinction should be clear: the machinery is already present in DMS, so the work is not one of implement the machinery and tying to the parser; it is just tying it to the parser. This is still a bit of work, but a hell of a lot less than if you just start with a parser.
In general it isn't possible to do this. The reason is that functions are first-class and dynamically typed, so for example:
var xs = some_function();
var each = another_function();
xs.map(each);
There are two unknowns. One is the version of 'map' that is called (since Javascript polymorphism can't be resolved statically in the general case), and the other is the value assigned to 'each', which also can't be statically resolved. The only static properties this code has are that some 'map' method is called on some function we got from 'another_function'.
If, however, that is enough information, there are two resources that might be helpful. One is a general-purpose Javascript parser, especially built using parser combinators (Chris Double's jsparse is a good one). This will let you annotate the parse tree as it is being constructed, and you can add a custom rule to invocation nodes to record graph edges.
The other tool that you might find useful (shameless plug) is a Javascript-to-Javascript compiler I wrote called Caterwaul. It lets you do pattern-matching against syntax trees and knows how to walk over them, which might be useful in your case. It could also help if you wanted to build a dynamic trace from short-term execution (probably your best bet if you want an accurate and detailed result).
WALA is an open-source program analysis framework that can build static call graphs and control-flow graphs for JavaScript:
http://wala.sourceforge.net/wiki/index.php/Main_Page
One caveat is that the call graphs may be missing some edges in the presence of eval, with, and other hard-to-analyze constructs. Also, we're still working on scalability; WALA can't yet analyze jquery in a reasonable amount of time, but some other frameworks can be analyzed. Also, our documentation for building JavaScript call graphs isn't great at the moment (improving it is on my TODO list).
We're actively working on this code, so if you try it and run into issues, you can email the WALA mailing list (https://lists.sourceforge.net/lists/listinfo/wala-wala) or contact me.
I think http://doctorjs.org/ may fit your needs. It has a nice JSON API, is available on github, backed up by mozilla. It's written in JS itself and generally does stuff pretty well (including dealing with polymorphism etc).
Here are a few solutions I can see:
Use Aptana Call Graph view
Aptana is an IDE based on Eclipse that permit you edit and debugging Javascript code.
Use Dynatrace
Dynatrace is a useful tool that let you live trace your code and see the call graph and hot spots.
Use Firebug
The famous developer addon on Firefox
Most of the call graphs generated here will be dynamic, ie you'll see the call graph for a given set of actions. If you're looking for static call graphs check Aptana first. Static call graphs may not let you see dynamic calls (code running through eval()).
For a js approach, check out arguments.callee.caller. It gives you the function that called the function you are in and you can recurse up the call stack. There is an example in this thread http://bytes.com/topic/javascript/answers/470251-recursive-functions-arguments-callee-caller.
Be aware that this may not work in all browsers and you may run in to some unexpected things when you get to the top of the "call stack" or native functions so use at your own risk.
My own example works in IE9 and Chrome 10 (didn't test any other browsers).
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body onload="Function1()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
<script type="text/javascript">
function Function1()
{
Function2();
}
function Function2()
{
Function3();
}
function Function3()
{
Function4();
}
function Function4()
{
var caller = arguments.callee.caller;
var stack = [];
while (caller != null)
{
stack.push(caller);//this is the text of the function. You can probably write some code to parse out the name and parameters.
var args = caller.arguments; //this is the arguments for that function. You can get the actual values here and do something with them if you want.
caller = caller.caller;
}
alert(stack);
}
</script>
</html>
The closest thing you can get to a Call Graph is manipulating a full Javascript AST. This is possible with Rhino, take a look at this article: http://tagneto.blogspot.com/2010/03/requirejs-kicking-some-ast.html
Example from the post:
//Set up shortcut to long Java package name,
//and create a Compiler instance.
var jscomp = Packages.com.google.javascript.jscomp,
compiler = new jscomp.Compiler(),
//The parse method returns an AST.
//astRoot is a kind of Node for the AST.
//Comments are not present as nodes in the AST.
astRoot = compiler.parse(jsSourceFile),
node = astRoot.getChildAtIndex(0);
//Use Node methods to get child nodes, and their types.
if (node.getChildAtIndex(1).getFirstChild().getType() === CALL) {
//Convert this call node and its children to JS source.
//This generated source does not have comments and
//may not be space-formatted exactly the same as the input
//source
var codeBuilder = new jscomp.Compiler.CodeBuilder();
compiler.toSource(codeBuilder, 1, node);
//Return the JavaScript source.
//Need to use String() to convert the Java String
//to a JavaScript String.
return String(codeBuilder.toString());
}
In either Javascript or Java, you could walk the AST to build whatever type of call graph or dependency chain you'd like.
Not related directly to NodeJS, but generally to JavaScript, SAP has released a Web IDE related to HANA (but also accessible freely from the HANA Cloud - see more details here http://scn.sap.com/community/developer-center/cloud-platform/blog/2014/04/15/sap-hana-web-ide-online-tutorial).
In this Web IDE, there is a REST-based service that analyzes JavaScript content with primary focus (but not only) on creating a Call Graph. There are many consumers of that service, like Code Navigation.
Some more information here (see the Function Flow part):
http://scn.sap.com/community/developer-center/hana/blog/2014/12/02/sap-hana-sps-09-new-developer-features-sap-hana-web-based-development-workbench
Note: I am the main developer of this service.
I have some experience with JavaScript - but mainly with some small stuff, I never did anything really big in Javascript previously.
Right now, however, I'm doing quite a large javascript-related project, a jquery-powered frontend that communicates with the server-side backend by sending/receiving JSON via Ajax.
I'm wondering if you could provide some useful information on how to deal with large javascript projects - are there any helpful tools/libaries/good practices?
Thanks in advance.
My one big tip would modularize
In JavaScript, it is very easy for variables to clobber other variables. In order to avoid this, modularization is a must. There are several ways to take advantage of JavaScripts scope rules to minimize the possibility of variable conflicts.
var myProject = {};
myProject.form = function(p_name, p_method, p_action)
{
var name = p_name,
method = p_method,
action = p_action;
var addInput = function(p_input)
{
// etc...
}
return {
addInput: addInput,
name: name
};
}
myProject.input = function(p_name, p_type, p_value)
{
var name, method, value;
var setValue = function(p_value)
{
value = p_value;
return true;
}
return {
setValue: setValue,
name: name
};
}
// etc...
If you're careful about using var, and keep track of your function scope, then you have only one global variable - myProject.
In order to get a new form Object, you'd simply do the following: var myForm = myProject.form('form1', 'post', 'post.php').
You may want to check out Backbone.js
Backbone supplies structure to
JavaScript-heavy applications by
providing models with key-value
binding and custom events, collections
with a rich API of enumerable
functions, views with declarative
event handling, and connects it all to
your existing application over a
RESTful JSON interface.
Grigory ,
Even i moved from a backend to UI few months back only follow this approach
read all the concepts of jquery
either from google or through some
book or through jquery
documentation.
follow some of the jquery best practices http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
write utitlity functions for all repeated code like getcookie ,subsstrings etc etc
keep getting your code reviewed by experienced person who can guide you
post to stackoverflow if you get stuck anywhere.
as it is big project divide into mutiple files and use proper naming convintion.
please let me know if you need anything else
jQuery and YUI 3: A Tale of Two JavaScript Libraries is a nice comparison of them in the context of a complex application, and gives useful hints for jQuery programmers as well.
The best advice is to keep your code segmented in different files as "classes". I personally hate working in a file that's more than a few hundred lines long.
Then assemble and minify your code with one of the tools on the web, like Shrinksafe or Google Closure Compiler
Note that Dojo, YUI, and Ext are all designed to handle large Ajax applications. You'll struggle a bit with jQuery. But I'm guessing this app isn't all that big and you should be fine.
Have you consider checking out MooTools?
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.