I am having some issues beginning a new maven project. The tutorials I have watched have been useful but I feel like I am missing something and need some clarification.
My project consists purely of javascript files. It is all objective and developed to be used as and when rather than use on a single website. The main HTML and CSS which was developed along with the javascript is a separate Maven project.
There are pre minified files such as the jquery-1.9.1, jquery-ui-1.10.3 and modernizr
There are 6 javascript files of my own;
1 main file which must be included first
4 more files which require a number of the methods/functions and global variables from the main file
1 last .js file which is dependant on one of the files in the previous point (and therefore has two dependancies)
The specs of the Maven project require;
Creating documentation of the files.
Unit testing - perhaps with Jasmine
Obfuscate all javascript code
I have been looking at the following but need a bit of help in steps to begin the project. When I jslint one of the files there is obviously many bugs because $ is not defined and many of the functions and variables are declared in seperate files.
MOJO - Codehaus
akquinet
yuicompressor
Thanks in advance.
Related
Haxe's JavaScript exports everything in a Haxe compilation into a single output file. This is great for building applications. For a general purpose library, however, it would be nice if it output a *.js file per *.hx file within my compiled sources.
The intent of this is so that I can create a NodeJs module where the consumer of the library only needs to require() the particular files that they would like to use. Is this currently possible using the Haxe compiler on its own, or via an external tool?
There is the hxgenjs library that can generate one js file per haxe class/enum.
https://github.com/kevinresol/hxgenjs
I see 2 different questions here
How to output Haxe module as a NodeJS module?
How to build each JS file into separated output file?
As for #1 there is #:expose directive and it should help.
As for #2 you can use --each and --next in your build *.hxml file. This way you can specify several targets at once(and they will be built at once too). Unfortunately there is no way to use the mask so you will have to list all your entry points(modules' roots) manually.
I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler
I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.
For CSS, I can use SASS to import one CSS file to another and produce only single CSS file. What is the similar method for Javascript files?
You might want to check out Closure Compiler (which is a Google product).
You would probably want the Closure Compiler Application form of the product.
A sample workflow would probably look like:
Create a list of your JS files and paths
Run the command to compile and concatenate files (java --jar compiler.js --js path_to_file1.js --js path_to_file2.js (etc.) compiled.js)
Closure Compiler also has a related project, Closure Stylesheets, that does the same thing for stylesheets.
This approach, of course means that there's a pre-compilation step. Depending on your backend, there also exist libraries that do the compilation when the page is built. For example, for JSP, there's Granule a tag library that creates the compiled JS and CSS files at page build.
There's a third possibility: modularization. Since you gave the example of being able to import CSS files in SASS, an analogue for JavaScript is using a module library, using either the CommonJS standard, or (the one I prefer), the AMD (asynchronous module definition) pattern, which I have personally used with RequireJS. RequireJS also comes with a nice optimizing tool that will bundle up (minify, compress, concat etc) all the required files for your application
UPDATE
Since you mentioned that you are using Django in the comments (might be useful to update the question with this info too), see if this answer helps too
You could use minify which allows you to minify and combine javascript files. It also works with CSS.
I have worked in a web project with a heavy part on JavaScript, and I have noticed that there was no style how to use JavaScript. What unsettled me most is that everyone added files here and there, which resulted in a mess to organize and deliver them. Because this will be happen in every new project, I would like to have something like a styleguide for JavaScript. This styleguide should address the following questions:
How should JavaScript files be organized in the file system during development?
How should the JavaScript parts be separated from the HTML and other parts of the application?
How should JavaScript files be delivered in the real application, so that less code has to be loaded on each request and not too much requests have to be sent?
Is there something public available as a starting point for developing our own styleguide? What are your experiences in using your styleguide? Are developers following it easily, what are the simple and what are the difficult parts in it?
(I know, more question than one, but I'm interested in the whole story here. As a background, we have used JQuery and JSF, but I don't think that will have an impact on the answer.)
If you're doing heavy client side, you are probably going the MVC way.
So I'll answer your questions with the approach taken by the brunch. Brunch projects use MVC library Backbone.js, and have strict directory structure.
How should JavaScript files be organized in the file system during development?
src/
app/
collections/
controllers/
models/
styles/
templates/
views/
vendor/
build/
web/
config.yaml
Use Stitch to organize your files as CommonJS modules. Then you will be able to use require() to define dependency between them, as well as to combine them into one file later.
How should the JavaScript parts be separated from the HTML and other parts of the application?
build directory is used to store html; build/web is used to store javascript, images, and css.
How should JavaScript files be delivered in the real application, so that less code has to be loaded on each request and not too much requests have to be sent?
At the build stage, all JavaScript is minified and combined into one file (build/web/js/app.js), so that client will have to make only one HTTP request when he / she visits your site for the first time.
It's probably a good idea to make building process as easy as possible. Brunch does that by offering brunch watch command, which monitors filesystem for changes and builds code instantly with the help of Stitch and some other tools.
(It should be noted that during development brunch projects also use CoffeeScript as the primary language; it is transparently compiled by brunch before stitching the resulting JavaScript. However, this doesn't matter as long as file organization is concerned, and is out of scope of your question.)
For all JavaScript files definitely use a separate directory. Have as many files as possible semantically. One large constructor should correspond to a separate file. Never use filename prefixes where you can create a directory.
Unix-style directory structure is often found on GitHub:
src -- for the source JavaScript.
lib -- for libraries.
tests -- for unit tests.
bin -- for executables.
dist -- for compiled files.
For compiling we use a Makefile with targets for production and development. The production version is all of files JSHint`ed, minified and concatenated into one. The development target is generating a server-side script that includes all JavaScript files dynamically (for easy inclusion into HTML).
But generally it depends. We used a widget directory for one project. This widget directory had a set of separate widget subdirectories (e.g. slider, tabs, modal-window), each of which had the following layout (inspired by DOMLoader):
html -- for HTML templates.
css -- for CSS files necessary for the widget.
js -- for the widget JavaScript constructor.
Crockford has a few stylistic guidelines and the Yahoo exceptional performance site has details which might be useful to you.
I can recommend a book: JavaScript Patterns by Stoyan Stefanov.
I think one of the best book about javascript