How to efficiently refactor in a qooxdoo project - javascript

I am just working on a big qooxdoo project and want to refactor it. For example, i want to move a class, that is referenced quite often from one package path (app.ui.) to another (app.view.), change variable names. Normal refactoring stuff.
In comparision to Delphi or C#, this seems to be terribly painful with a qooxdoo javascript project.
Is there any easy and uncomplicated way to do this?
FYI: I edit the project with gedit in linux mint.

moving a class shoud be easy within a qooxdoo project because usually every occurance is referenced absolut which means you can use your editor and "search an replace" the whole thing. The only thing you have to do additionally is to move the file to the desired location and thats it. So its more a question of the editor than of the file structure.
Best,
Martin

Related

What is a Scratch File?

I am currently trying to figure out all the functions that my IDE has, and I have come across a predefined folder when I create a project that is called 'scratches and consoles'.
The IDE only allows me to create Scratch Files but I donĀ“t know what that kind of file is and what Is its purpose. Could someone give me a hand with this?
It's something like temporary notes with ability to highlight/format your code.
Sometimes you may need to create temporary notes or draft up some code outside of the project context. Instead of switching to a different application for this purpose, you can use scratch files and scratch buffers.
You can read more about it at JetBrains - Scratch files.

How to get VSCode to show my libraries function arguments when hovered

I wrote a JavaScript library, and I'm trying to understand how I can show the function parameters/definitions when a user hovers over them in VSCode (I see this in other libraries, and I dont notice anything special about them). Im sure its something simple but I just dont see how I would do it. Link to the project is here: https://github.com/isaacgr/jaysonic
I've tried adding jsdoc style comments around the class definitions, but in general I'm not sure what to try. I'd appreciate if someone could point me in the right direction.
An example would be what I see with JSON.parse
Visual Studio Code uses IntelliSense for autocompletions like the one you mentioned and in JavaScript they are based mainly on TypeScript definitions. If a project is already built using TypeScript, they may be generated and linked in the corresponding package.json-file using a "typings" or "types" property.
Alternatively (I haven't tested this approach though) existing JSDoc comments may be used to generate these TypeScript Definitions.
The TypeScript Community has furthermore (often manually) created separate Typescript-Definitions, which are available as npm packages called #types/name-of-the-package.
In your case the first approach of creating/generating a typings-file and linking it in your package.json is probably the best approach to achieve the desired result.
Btw, if you want to inspect such a typescript definitions file, press Ctrl (on Windows) and click on the JSON.parse method. This will show you the corresponding typescript definitions file called lib.es5.d.ts (which is embedded in vscode as it's part of the JavaScript language and therefore doesn't need to be installed)

How to make "go to definition" work for my javascript webpage in vscode?

Whatever I do I'm unable to go to definition between functions defined in different *.js and index.html files.
I'm not even sure if is it supposed to work? Or is this feature working only if I do some node.js developemnt using some imports? (I'm new to javascript, I just wan't to make webpage with WebGL, not some server-side stuff)
I tried to read this but I don't see how is it relevant for me? I just made empty jsconfig.json which did not helped
https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson
https://code.visualstudio.com/docs/introvideos/quicktour
https://code.visualstudio.com/docs/languages/jsconfig
See simple example search for THREE.Screen call from index.html which is defined in ThreeJS_aux.js.
My javascript project is here
https://github.com/ProkopHapala/LearnWeb
did you tried adding a tsconfig.json file and set allowJs: true checkJs: true ? This way vscode will start a tsserver and you will have all its features / refactors. Remember that JavaScript IS TypeScript so you don't have to use anything strange just good old JavaScript. Typescript compiler supports that refactor and many others (or you could develop / install third party plugins with more). And if you want to start using Types,you could still do that using plain old JavaScript with jsdocs. My two cents. More info: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
From the way you have your code laid out I would assume that you're going with a walkthrough or some kind of tutorial. Meaning, instead of splitting your JS into a separate file you're embedding it within the actual script tag in the HTML. Not a common practice is all unless someone is trying to maximize the development area, like a tutorial/walkthrough.
I think what you're really looking for here is design patterns. There is really no short answer to give you. There is also no single way to accomplish this. These design patterns are what puts JS together in a more readable fashion.
Try reading through this online book on design patterns Learning JS Design Patterns
This is a quick summary of your common design patterns AMD, commonJS, and Require. I recommend going through the book to get a more in depth understanding. Relation between CommonJS, AMD and RequireJS?

Is It Possible to Dynamically Generate JavaScript Reference Directives?

I'm working on a team of developers that keeps reference directives in various files for intellisense purposes. As you can imagine, it's impossible to maintain these files. As such, I'd like to know if there's a way to dynamically generate them. Any way. At all. No matter how kooky.
Here's a reference to the kind of thing I'm talking about: http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx#ReferenceDirectives
I'm trying to do this on the fly. Say, to dynamically make some references for every js file in a folder. Whatever. Anything. I'll run with it once I get a good starting point.
Why not use T4 to read all the files in the current folder and below? (accounting for, if necessary scripts that are not actually included in the project but present in the file system).
Or even better and more likely related to what you are trying to do?
Use the nice centralized _references.js VS helper for scripts that are core in functionality to the others that you are editing.

How should I start a new JavaScript project (Testing, Developing, Building)?

I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.

Categories