Good morning, is there a precompiler solution for JavaScript like Sass for CSS ?
The only features I need are the partials precompiling (to have fewer js files) and the auto-compression of the file.
I googled for Coffeescript but it's not what I'm looking for and because I don't want a different syntax..
If is there a software like Koala for Sass would be appreciated but even from command line (I'm on Windows) is ok, thank you in advance!
PS: with partials I mean:
#import "file.js"
The tool find this and replace it with the content of the file, creating a new file, maybe in another folder specified by me (As I said, like Koala)
Javascript is directly interpreted by your browser so there is no "partials precompiling" stuff.
What you are looking for is a task runner like Gulp or Grunt that can launch a task (amongst others) that will concatenate your files.
Here is a concat task for Gulp
When you say "precompiled" you mean "concatenate and minify", yes they are technically different because the "compiled" code is still in JS, but they are essentially the same thing.
Google has a tool call Closure "Compiler" that is probably what you are looking for.
Found this answer, by Andy Tran, to the question "What are the HTML and JavaScript equivalents of Sass?":
I’m sure there are plenty of options but I’ve only heard of
CoffeeScript, TypeScript, Babel, and LiveScript.
[...]
CoffeeScript does create some shorthand versions of certain things aimed to make it easier to read/write, but in my opinion, I found it just to be more messy.
Babel was the second that I picked up and I immediately loved it. Babel
allows you to write the newer version of EMCAScript (ES6, ES7) but
compiles it to plain old JavaScript to support older versions browsers
and IE that doesn’t support have support for it.
TypeScript and LiveScript, I’m not familiar about. However, I’ve heard a lot of
positive feedback on TypeScripts and everyone been recommending me to
check it out and use it instead of CoffeeScript!
Hope it helps!
Related
i am starting documenting my java-script + typescript website with jsDuck
I've documented my class very well , but my problem is interfaces - they don't compile from the ts file over to the java-script.
here is my output, as u can see the page doesn't know who is IComboBoxScope
of course it understandable due to the fact it doesn't generated to the java-script
http://i.stack.imgur.com/PIVKe.jpg
is there a proper way to workaround this in jsDuck?
IF NOT, is there other products or solutions for documenting js with typescript out there?, maaybe jsDoc? ,typeDoc?
sorry for the poor sample/photo, i am working on a private network.
just wanted to share my findings,
i have found a great solution typeDoc is really good, it doesn't need the compiled javascripts, it is dedicated to the ts files,
new solution, active environment and the great thing is that i only need to run a 1 line script with the project library as a parameter.
typedoc --out path/to/documentation/ path/to/typescript/project/
output example
i have seen options to change themes, class hierarchy is working very well
installed by NPM and support es 3,es 5
great!.
From JSDuck side there is no simple workaround as JSDuck has no concept of interfaces. You might document your interfaces as abstract classes for JSDuck, but it's not really the same. You're better off using a tool that natively supports TypeScript.
I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)
How do you use CoffeeScript? It need to be compiled, so - you write code in CoffeScript, compile it, and insert real JavaScript on your site?
Doesn't it take a lot of time? Or is there some another way?
P.S. I've seen another way - to insert in development stage coffeescript in text/coffeescript script-tags with coffeescript.js library (about 150k), and compile only for production version and insert real Javascript.
The answer is yes, you compile it and include the generated JavaScript on your side.
If you're using a web framework (rails, django etc) you should take a look at the following list of coffeescript plugins: https://github.com/jashkenas/coffee-script/wiki/Web-framework-plugins. They will compile your coffeescript to javascript when you deploy your app to a server.
Using the coffee-script plugin with the text/coffeescript tags is another option, gzipped and compressed, its only about 39kB, but that can add up if you include it on pages that get many hits and I don't think is a good idea when you can compile the coffeescript to javascript yourself without needing the plugin.
There is the middleman plugin which will lets you work with CoffeeScript during development, then compile and minify it for deployment.
When you are first learning coffeescript, you will almost certainly want to do your compilation manually during development, because you will probably find, as most of us do, that you need to be able to look at the javascript code in order to debug and find out what's going on. The more fluent and comfortable you become with coffescript, the less often you will need to refer to the javascript code.
I think this will probably be true no matter what your level of expertise in javascript. If you are a javascript pro, you will be dependent on looking at stuff you are familiar with, until you start to figure out how coffeescript works. On the other hand, if you are completely or partially unfamiliar with all the quirks and subtleties of javascript, such as prototypes, the javascript approach to scope and globals, and all the rest, you'll find yourself digging into javascript references, and cross-referencing the javascript code with your coffescript code, until you get familiar with it.
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.
I noticed that the production version of jquery has one-letter function and variable name and was wondering how they achieve that. are there tools to create a production level javascript file from the one use during development? I am having a hard time figuring out how they make sure there are no mistakes, especially for an open source project that big.
JavaScript minfiers do this for them. Two good ones that shrink private variables names are YUI Compressor and /packer/.
You would use one of many JS minifiers like JSMin or Google Closure Compiler to achieve such results.
It's called "minification" or "packing" and there's a lot of different tools which can do it for you, for example: Dean Edwards's Packer or YUI Compressor
I think you refer to JS minification, like YUI Compressor
http://developer.yahoo.com/yui/compressor/