Is there a program/tool that can generate function dependency graph for javascripts? Basically, the input should be a folder of javascript files, then the output is a nice graph that show all the relations between each function. It'll be better if I can interact with the graph, also.
Is there a way to do that?
Thanks
On windows and Visual Studio you can look at JSAnalyse: http://jsanalyse.codeplex.com/
I haven't tried it, but from the description, it parse the JavaScript files and creates a dependency tree of the different files based on the static references between them.
The project
JSAnalyse is a tool to analyze the dependencies between JavaScript
files and keep them under control. It helps to visualize and handle
static references between JavaScript files in order to ensure the
defined client-side architecture.
In the last couple years the amount of JavaScript lines in web
applications has been dramatically increased. A lot of new client-side
frameworks (like JQuery, Knockout, etc...) have aroused, but the tools
for developing JavaScript just got slightly better. For instance, the
Visual Studio 2010 has improved the IntelliSense. But for a
well-designed application, not only the server-side code is relevant
anymore. It is also very important to have a good architecture for the
client-side code and to keep it in a healthy and good state during the
whole application lifecycle. That is exactly when JSAnalyse comes into
play. It enables not just the possibility to analyze the existing
JavaScript dependencies but also to constrain them. The allowed
dependencies can be either configured via XML or by using the great
Visual Studio 2010 Architecture features. JSAnalyse provides an
extension for the Visual Studio Layer Diagram to validate and control
also dependencies between JavaScript files. This can be integrated
into the build and with the Gated Check-in feature it is not even
possible to check-in source code which does not fulfill the JavaScript
architectural rules.
Related
We have an ASP .NET project, we are trying to have an on-the-fly analysis of JS. SonarLint only provides the analysis of C# files.. Incremental analysis seems to have been deprecated, and issues analysis requires different configuration files, which SonarQube Scanner does not support. Having 2 different configuration files and continuously renaming them is, as you can imagine, is a very difficult task to convince, educate, and discipline a large team of developers to do.. What would be the solution?
You can't (for now) have on-the-fly support of JS within SonarLint for Visual Studio but you can have some with IntelliJ/Eclipse although I am not sure the experience would be that great for a ASP.Net Project.
What I would suggest, if you really want to have the analysis before your commit, is to have a local SonarQube server (can be found here) and manually run the Scanner for CLI and to push result to this local instance.
I am using Javascript wrapped in HTML to simplify the task of one of my students. Her task is to create a text file for a research project, which will act as a configuration file for the analysis software.
I decided on Javascript, because I wanted portable, transparent code, with zero dependencies (no libs, no server, no installation), yet a familiar feel from the web that is easy to get started with. However, client side Javascript appears to have its limits when it comes to handling file output.
There are multiple questions and answers on Stackoverflow that address the issue by appealing to server-side solutions, external dependencies, and the newer HTML5 download element.
I have considered if I should use a complementary script or batch file that reads the output, but I am not sure about how to best implement such a layer. The file is complex to generate and this is achieved using form elements.
Another idea would be to package the script as an executable. For example, a browser could be called from Java, or the HTML/JS could be converted somehow. Perhaps there is a wrapper that I am not familiar with.
This is one of those side projects that is fast to code and so I would assume that there is a go-to solution among programmers for this type of problem. On the one hand, this is a packaging problem. On the other hand, it is about some of the limitations with Javascript for projects that run without a server backbone.
How can I deliver a no-bells-and-whistles Javascript application that is local only and capable of handling file I/O?
I'm creating an intranet application, the UI of which premoninently uses Ext JS 4.1.1
I have created several custom javascript classes extending Ext JS controls and other code for UI, validation, communication, etc.
Given that my code is not very huge and that my application will be deployed in a controlled & well known environment I'd ideally like to load all .js files upfront at the time of application invokation (boot). I'd like to know an approach to achieve this, mostly from within the relm of Ext JS.
What you want to do is something really usual. Take a look at the deployment section to know how to use the Sencha SDK to create one file containing all your custom javascript classes which extend extjs component here
I hope it is useful ;)
As of this month Sencha (beta) released a revamped build tool. Actually, it is a complete rewrite in Java (I believe). Sencha Cmd is the name, and it is all that the predecessor should have been!
Compile times have been crunched to maybe a 10th of its predecessor and packages/builds are now configured using a powerful command processor.
Integration into other build frameworks and CI servers is now a top priority and achieved by integrating the tool with ANT.
I just spent the past hours to migrate a project from the old Sencha SDK Tools to the new Sencha Cmd. I particularly love the new compiler.
Documentation is already pretty good.
Blog post that introduced Sencha Cmd
Official SDK documentation - there is a total of 10 articles on the subject, don't miss them, particularly the
Compiler documentation
For smaller projects that follow the standard (single-page) pattern suggested by Sencha, there is actually a range of higher-level commands that manage the entire application creation and build process.
Furthermore, Sencha has now a pattern in place for multi-page applications.
And you can always use the compiler directly and implement your own build process on top of it. That's what we did in our project.
There is one class called Ext.Loader
This is more of a server-side question than an Ext JS question. You want to include all your pages up-front? Get a JavaScript compressor to concatenate your files together, minify the whole pack, and add a <script> tag to every page in your web app.
I also work on an intranet web app that heavily uses Ext JS (both 3 and 4), but we have quite a large codebase. Since we use Tomcat, we have a Java class that includes standard files on each page, plus any file groups or individual files we need for that page. Something like that might work for you as well.
You can use Ext.Loader for dynamic loading when you need it, but that doesn't sounds like what you're looking for. Still an option though, should your codebase expand and you need a better solution.
EDIT: As mentioned in the comments, my original answer failed to address the Sencha SDK Tools. I felt it would be more beneficial to make my response part of my revised answer.
While this task may be exactly what the Sencha SDK was designed for, I feel that the product is not yet mature enough for production environments. At the time of writing, the current version is 2.0.0 Beta 3. Beta, meaning it's still under development, and it shows. Documentation is practically non-existent and the official forums are full of topics claiming the product simply does not work. At this point, it's nothing more than a toy to be played with. The most helpful document I've seen is Sencha SDK Tools 2.0 and ExtJS4: The Missing Docs, and the author even ends with "The SDK Tools need a lot of work."
When I'm choosing a product for a production environment, I want something stable, something reliable, something with good documentation, something with quality support. The Sencha SDK Tools are none of those things. Yet.
I have to figure out how a huge JavaScript code base works and I'm wondering if there are any CASE/UML tools to analyze its structure. I understand that there are several limitations because of the dynamic typing and existence of eval(), but I suppose if IDEs can offer meaningful inspections for JavaScript code these days, there must be some way to visualize dependencies, etc.
use JS/UML which is an eclipse plugin from jsuml.org
WAVI Web Application Viewer 2 (Node.js)
Generate a svg class diagram for your node.js web application.
WAVI is intended for developers who wish to document their web application or as a reverse engineering tool to recover the structure of a web application.
https://www.npmjs.com/package/wavi
i work at the digital department of a public broadcaster, together with two other frontend developers. We're currently looking into improving our Javascript workflow and build processes. Stuff like packaging, minifying, versioning, etcetera.
In an ideal scenario, we would have a global repository for all Javascript-related libraries (like jQuery) and stuff we build ourselves, that can be easily included in lots of projects and versioned.
All of our backend developers use Maven for this process with their Java code. I'm wondering if people have experience with Maven and Javascript, or maybe with other tools that might be good (or better) for the job. And in general if people have good resources about setting up workflow / build processes for frontend and javascript development.
We use Hudson (http://hudson-ci.org/) to continuously build/integrate our Python (Django via zc.buildout), R and several other types of projects. Whenever someone checks in code to the central VCS, a build is triggered and the test suite(s) will run. The build and test status is shown on a central screen in the office.
Hudson not only builds and tests, but also checks for coding style and syntax errors using pep8 and pyflakes, amongst others. Javascript is only checked with jslint at this point, but we may unit-test that in the future using something like xpcshell (more info).
** edit **
Go straight for Jawr, keeping rest in answer for alternatives
** edit **
First of all there's Ruby's rake which in theory can be used through jruby and in theory can be configured and run in the POM.
There's also Jake, but not sure if the latest Rhino supports CommonJS.
Whilst writing this awnser, I just came across Jawr which looks really interresting and there seems to be maven support/plugins.
The last option you already know about is dynamic loading using for example RequireJS or LABJS.