i'm looking for a tool drawing a kind of function usage map (maybe there's a better name for that).
I'm working on a project with many javascript files included in pages. This project has been developped for a while and we've reached a point where this is really messy. I'd like to have a clear view of what is included where, how functions are used, etc. .
Do you know if such a tool exist ?
thanks.
JSLint produces a Function Report which may sort of be what you need, but in general there aren't any good static analysis tools for JavaScript. (My current project contains a huge amount of duplicated JavaScript developed over 10+ years... we desperately need one too.)
Also see this question.
Related
I am creating an extension for the first time and I saw some extensions on github like this one and noticed that he coded his extension using a boilerplate. To be honest, I didn't even knew that you could use boilerplates (a friend told me), it's my first time reading about it.
I wonder if I should clone some github repository and copy paste my files and work in it. I see that there are some boilerplates that give cross-browser support for your extension.
I am a little bit confused as I don't know if this is the right way to do it. Right now I don't need something huge for my extension because it's a simple one and I'm learning how things work (kind of new to webdev). I might want to add some google analytics to my extension later.
Would you advise me to use some boilerplate? To me it looks tidy but I can't understand most of the stuff that's happening around, would be difficult to modify some files.
Also, most of the boilerplates are for react, is there one that is like the most basic one for vanillaJS... like how can I find the one that is used in the repo link on top of the post?
I keep having to remove all of my variable references and other bits and pieces when I use the visualizer tool to generate those useful diagrams.
I was wondering if there is a way for me to generate them programmatically?
Is there a typescript compatible or even a non-typescript method of doing this?
Yes, this is currently in progress. If you would like to see progress (or are brave enough to try it out yourself), it is on the viz branch of XState: https://github.com/davidkpiano/xstate/tree/viz
Completely new to Stack Exchange. Trying to learn programming, so checking out various websites and their JavaScript files. When I look at them, the look like a complete mess. E.g. If I go to Airbnb.com and view source, then look at the JS file (toward the bottom), then open it, it's a real mess. Others I look at around the web are similar. Is there a way to format this code to make it neater? (hopefully automatically e.g. if I copy/paste it somewhere?)
Here's an example
easiest way, beautify it with: http://minifybeautify.com
Your Examplecode is minified. There are many tools (http://jsbeautifier.org/) and plugins for IDEs to beautify it.
Many site uses uglify/minify methods to load scripts faster.
You can use a js beautifier to generate more readable code, but you should know that after minify method many var names are shorter so the code will not return to his original form
The reason why it looks like this is because it has been minified and concatenated.
To get started with JS I would recommend to start from books or posts. Also the structure of the files will change depending on the the frameworks you are using. It will be hard for you if you start learning about programming just by looking at the code of some random website.
A book I would recommend you to start with is this one :
JavaScript: The Good Parts
There is a very interesting repo at github which contains a series of books that you can start reading to start understanding pure javascript which is:
https://github.com/getify/You-Dont-Know-JS
If you want to read about a js framework you could start with Angular or React among others.
And finally although it may sound obvious you could just type "JavaScript getting started" in Google and you'll see plenty of posts to start reading and having a better idea of what JS is about.
After you understand it I would say that you can go and see in other pages how they are solving certain problems but I would not recommend to start from there.
Hope it is useful for you
Best
I have a small web application I've been working on and the amount of Javascript is starting to build up. I was wondering what the best practise was ( if there is one) as to when to load/reference your javascript. All at once at the beginning OR as its needed dynamically?
I know how to add the Javascript references dynamically through ajax when parts of my site are loaded and require it?
I hope this question makes sense, I'm still new to this.
Many thanks.
It really depends on the size of your JavaScript. It is better to load one 50kb file at once than having the browser request 50 x 1kb. First of all I'd recommend minimizing the JavaScript sources and see where that goes.
A great tool for benchmarking your site is YSlow which also suggest some improvements you could make. Please do not try to solve everything YSlow criticises as some of the recommendations only make sense for really big sites. (e.g. you are probably not going to need a distributed CDN, etc.)
For JavaScript minification I have very good experience with the Closure Compiler from Google.
I have just been asked to describe the architecture for a large scale dashbaord style project that i will be working on.
I have bever worked on a application of this size and am a bit lost as to what to say.
Could i be pointed in the direction of any articles that may help me get started and hopefully finished.
I have gleaned the following information thus far but i am not really sure that it describes the architecture.
1) Use classes instead of seperate functions and each class or group should be contained within their own JS file
2) Prior to production there should be a compile step where said JS files are compiled and minified
3) Step2 does not have to contain all the files. Jsut the common ones to start
4) Use a classloader to load classes, plugins etc when they are needed. On research could jQuery's getScript function be used for this or even a jQuery plugin loader:
http://api.jquery.com/jQuery.getScript/
http://www.unwrongest.com/projects/lazy/
Am feeling way out of my depth at the mo so any help would be massively appreciated. Be honest, if the above is competely irrelevant then i guess i am in the wrong job :(
Everything you need to know can be found here:
http://addyosmani.com/largescalejavascript/
Create a library of loosely couple components that communicate through an application controller (e.g. event bus).
I would recommend looking at using ExtJS 4 for this. Its APIs and development methodology closely track what you would expect from .NET or Java for developing a large-scale desktop app.
Version four answers all four of your points. It has...
1) A system for defining Java/C#-like classes in Javascript that work almost exactly the way a Java or C# developer would expect.
2) Dynamic resource loading.
3) The ability to create a final product from the SDK which is a neat, compressed version which contains just what you need.
If you are to do this with pure Javascript, ensure you use some reference architecture in the job. What HDave pointed above is really good material. If you want a ready-made reference architecture as a project startup code, have a look at BoilerplateJS:
http://boilerplatejs.org
After some large-scale projects, I have compiled some of the learnings in to this framework. Look at the samples too. Some of the concerns you raised are already addressed in this codebase such as use of OO concepts, minification and optimizations, decoupled moduler design and many more too.