Does anyone know of any tools or easy methods to help re-arrange and organise source code files?
In particular, I am looking for a tool that can take a javascript file, with a number of separate functions, and show me a list of the functions which I can then re-arrange in a more logical order, and have it shuffle the code around to match my new ordering?
Ideally, it would be something that is interactive, rather than a single tool I have to run by command-line, as the order may differ each time.
I'm sure these sorts of tools must exist, but I can never find them whenever I look.
I also suspect that it is something that could be built rather easily by someone with good knowledge of Javascript meta-programming (it might just be a case of 'eval'ing the input, and finding all the functions, then rendering them in a re-orderable list).
I ended up buying WebStorm by JetBrains, which is a commercial product, but it has the ability to see an overview of the file structure, and to reorder statements, including function definitions easily.
This wasn't the reason I bought it, but I am satisfied that it also contains this functionality that I was seeking, so I am going to close this question for now.
There is one, a non-free, editor that I'm aware of so far. I found it when I was duckduckgo'ing months ago.
http://www.yaldex.com/JSFactory_Pro.htm
I've never tried it however.
Related
What is the advantage of using shared module over rewriting code in each component/module in Angular?
In my project I've approx 30-40 modules. In all modules in service file same api is written. As per angular standard we should use sharedModule to so that code can be reused. I want to update my Angular project before that wanted to understand what is the advantage of using shared module over re writing code? How will it help to my Angular project?
As per angular standard we should use sharedModule
This isn't per Angular standard. It's per any standard, let alone per development standard.
The phrase exists: "don't reinvent the wheel".
Literally - car needs new tyres? Not going to design whole new ones, you'll grab some more off the shelf and shove them on.
Same applies - 7 places in your app that need to make API requests? Don't design and write 7 whole new ones, use the one you've already made.
Design principal: DRY - Don't Repeat Yourself.
This is especially important with code. You say you have 30-40 modules. Each with their own copy/paste version of some API service.
What happens when authentication is added/removed/modified for that API? Suddenly need to add some token into the header for your requests?
30-40 copy/paste jobs after you've made the change. 30-40... you can't even give us an exact number! How do you know you replaced ALL of them successfully?
Why on Earth would you do that to yourself when you can just keep reusing the one original thing you made?
30-40 modules all use that one API service. One place to make any fixes/changes. One service to test.
Oh lawd the testing - of which I'm nearly 100% certain you have zero tests, and any you do have are likely ineffectual and definitely don't cover nearly as much as you should have covered.
That's 30-40 test classes that you need to update as well (let me guess - copy paste those too?).
And that's just a single mentioned API service. What do you do if you write yourself some kind of helper methods for something in your app?
"Oh, I got fed up of writing these same 5 lines to do x, so I wrote a method to do it for me, it makes it much faster".
Cool - copy paste that another 30-40 times for me into all our other modules so that we can use it too. Thanks.
Put that shizzle into your shared module. One helper class. One class to write tests around. One class to change for additions/fixes. Zero copying and pasting and wasting time and missing things.
Ignoring alllllll of this, how the bejeesus have you managed to go days/weeks/months of repeating yourself over and over and copying/pasting over and over and over and god knows what else over and over and over.... and not once thought "this is a lot of effort, maybe I can save some here by doing something smarter"?!
This isn't even a thought-provoking or discussion-inspiring question. It's a question drawing attention to ones basic common sense and the long-standing human desire to be able to do as much or more with the same or less effort.
Why'd we figure out farming? Because hunting around the whole area for a few berries was more effort.
Why'd we hook animals up to our ploughs? Because it's hard work and we're lazy.
Why'd we replace animals with tractors? Because they can do it better.
Why're we replacing traditional farms with those swanky 'vertical' farm things? Because they're more efficient, can be automated more, etc.
Stop copying and pasting chunks of anything.
The millisecond you do anything for a second time, you refactor that away into a single thing that both can use.
I sincerely hope that you are currently a student and/or just starting out (self taught?). If so, welcome! Keep asking questions, keep hitting Google for your answers (where you'll find better than I can provide), and keep learning. My code was just as bad (worse, likely) back at uni.
If you're not, and are actually a 'seasoned' software developer of some kind, where people are paying you to do this... Please stop, take up farming, and let us all know what you've worked on to date so that we can immediately stop using any of it.
I come from the Java world, i.e. a typesafe world and am right now doing a couple of things for which I need client side execution using javascript.
I keep running into pretty hard to detect errors at times due to the non typification of JS and am wondering if there is any way to prevent it beforehand. E.g. setting sth like "use typification;" or via some tool that does these checks before executing like a compiler does.
E.g. last time was when I was creating a face in three.js. There depening on order of vertices a face is front-facing or not. I had mixed that up and then copy pasted parameters in which case I also copied a bracket too much so it ended up in the wrong place with just calling the method with one instead of three vertices which of course resulted in an error. However in line 2107 of three.js code and it took a while to figure out this little copy paste issue. Comparing to java the compiler would have directly complained that i try calling the method with 1 instead of 3 parameters...
Hope there is sth like it. Or do have some tips how to spot such things faster?
Cheers
Tom
There are various linting tools which you can use to scan your javascript files before you actually use them. The popular ones in the industry are JSLint, JSHint, JSCS and ESLint.
They come inbuilt with various rule sets which you can configure and you can also add your own rules.
You can compare these to checkstyles and PMD from the JAVA world.
You have a number of answers. But first, need to clarify: Java is not type-safe (see: NullPointerException, history of).
But to get closer to type-safety in any dynamic language you have the option to pepper your code with asserts. This can to some degree be automated, it may cause performance issues. This is the route I usually take, but I certainly wouldn't do it with three.js.
For JavaScript specifically, you have two additional options: TypeScript and Flow.
TypeScript is a dialect of JavaScript with type annotations that gets compiled down to plain JS. Flow is a static analyzer written in OCaml that tries to infer types in your JS code and check them.
I'm just starting with CakePHP and was wondering if someone could explain the true benefit of using its JsHelper over coding regular static jQuery and JS. So far, I don't really see how the helper would make creating scripts easier or faster.
for the same reason I wrote my GoogleMaps Helper ;)
the basic idea is that you can use the same language (php in this case) as the rest of the application and you can pass in any php option arrays and arrays holding data values and the helper is supposed to cake care of it.
it is similar to cakephp as a wrapper for php. it wraps your code and can help keep it dry.
don't get my wrong - i never ever used the js/ajax helper myself.
but I can understand why some want to chose it over writing JS themselves.
in some cases the output can even be more "correct" (if you don't know about the potential problems). for example the IE bug:
if you output {} options yourself and forget to remove the last , it will not run in IE6 etc. that can't happen with the helpers as wrapper - at least it shoudnt ;)
so with the helper it either doesnt run at all or runs as a team of skilled developers designed it to work.
especially for not so skilled developers this is usually a win-win situation: fast and more reliable. you can always start to switch to manual stuff later on (if you see the actual JS output and start to understand it).
also - when any of the js methods need to change for some reason your way of using the helper usually doesn't. if you don't use the abstraction you might find yourself in the need to manually adjust all occurrences.
As like any Helper, the JsHelper is a way to parse stuff into your view in a simplified way. But putting in "raw" JS/jQuery code into your view would work just fine by using $this->Html->scriptBlock for example.
There is not a real benefit I could think of other than if jQuery would ever change the syntax of a specific function, you wouldn't need to adjust your code when using the JsHelper, since the core then needs that update to be implemented, rather than you having to change all your "raw" JS code throughout all of your views.
JsHelper is like scaffolding: comes very handy if you need just the basic stuff, and only the basic stuff. That is, ajaxify a pagination or some elements.
But beyond that, it is better to write your own code, because you will need things as you need them, and not how the helper is aligned by default.
As everything else in a framework: it is a tool. Check your requirements and use the best tools available.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
My situation is this, I've been tasked with fixing little issues and debugging issues in an app that relies heavily on JavaScript. One of the other tasks will be to make the app easier to understand and more scalable. As new functions and features get added, the current app is more and more difficult to modify and update. Making changes in one function can really change things in another function.
My initial thoughts are to make the JavaScript object oriented, as it stands its just a bunch of functions, if / thens, switches, etc...
If my thoughts are correct and taking it in that direction is the way to go, can anyone suggest a model or format I can use for better breaking down the app. Like what should I turn into an object, what should I turn into methods or properties, etc... I just need some sort of guide.
If my thoughts are not correct and taking it in that direction is not the way to go, can anyone give me some ideas as to another method.
Thanks,
I would consider introducing the jQuery library into the picture.
Convert a few areas to see how much code shrinkage you can expect.
I don't really know what you're code looks like, so I can't really give you anything better than some general advice:
Use a JavaScript library, like jQuery, MooTools, or Prototype. I would recommend jQuery, but I can't say that I've really used the others very much. The point here is that they all are libraries that make common tasks that are rather tiresome to do by yourself much easier.
If you see lines of code that are the same, or even similar, refactor those lines into a new function.
Avoid magic numbers. They makes the code less scalable as well as less readable. For example, if you are referencing a desired length that happens to be 100, assign 100 to a variable and reference the variable instead. You can occasionally scan your code and look for numbers. Other than variable declarations, you shouldn't see very many numbers other than an occasional 1, 0, -1, or 2. The same goes for magic strings.
Keep all this configuration data code in one place so things can easily be changed. You might even have an entirely separate file that just has all the data inside of it.
Put related variables in an object. For example, instead of having xCoords, yCoords, and zCoords, have a coords object with x, y, and z as its properties. You really shouldn't have very many standalone global variables.
Try to have a consistent code style and try to give things sensible names. This alone can make your code much more readable.
For a quick real-life example, look through this small code project and see what sort of things were improved in its reviews. You can hone your code improvement skills by being active on the Code Review site.
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.
Backbone might be a great solution for you. It's not too invasive. If nothing else the bindings, models, and custom events could really help you get that code in order.
Is there a way to read a set of JavaScript files, and output a description of where every function/method is defined?
I realize that this is likely impossible in full generality, due to the extreme dynamic nature of the language. What I'm imagining is something which gets the (relatively) straightforward cases. Ideally, I'd want it figure out where, e.g. some method got attached to string or hash or some other fundamental class (and also just let you find all the classes/functions that get defined once in one place).
Does such a tool exist?
Give Eclipse (with JSDT) or Aptana a try.
The Outline view of a JavaScript file gives great view of functions and object hierarchies.
Granted this will only work for a single js file, and it sounds like your looking for more of a report, so I guess I need to ask what your ultimate goal is.
I'm not sure if it will output anything without documentation comments, but you could give YUI Doc a try.