How to port Javascript project to Coffeescript - javascript

If I wanted to port an existing project from Javascript to Coffeescript (in my case, within a Rails application), would I need to convert existing Javascript files? I'm worried about converting really large and CDN hosted files like jQuery and jQueryUI. How would I work around that?

As #asawyer stated, you do not need to port existing JavaScript libraries and such to CoffeeScript.
CoffeeScript exists to add convenience for writing your own custom code. Because the CoffeeScript compiles into JavaScript, it plays nicely with other JavaScript libraries like jQuery without your needing to convert those libraries into CoffeeScript.
If you have your own code that you want to convert into CoffeeScript, I've found js2coffee.org very helpful. It also serves as a great learning tool for "thinking in JavaScript" and seeing how it would be done in CoffeeScript.

Within rails, coffeescript is run through a compiler and into javascript anyway. You can include pure javascript files if you want (.js), or coffeescript (.js.coffee), which is compiled into js. If you're just looking to include legacy files, you won't need to do any conversion at all -- Might not make sense to convert to coffeescript, just to have rails compiler convert back to javascript in the asset pipeline... See http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets for more from the rails team on how to use js in the asset pipeline.
jQuery is already included in newer versions of Rails (3.1 onward), so that shouldn't be an issue. http://weblog.rubyonrails.org/2011/4/21/jquery-new-default/
Also, many other jQuery addons have a gem that you can simply include -- no need to reinvent the wheel there.

Related

Minifiying CSS/Javascript with Java/Scala

I've the need to generate some css / javascript at Runtime on my project. After generating this code ( probably with PHP) i need to get the string, minify them and then save the minified file.
I was searching for a tool to do that in Java/Scala, but all the tools i found are for minifying the project files, not plugin to do that on specific files as needed.
I looked at wro4j since it seems it could work that way, but couldn't find how to do that inside the java code and not at build time.
how to do that inside the java code and not at build time
I would recommend the following approach:
Generate the JavaScript and CSS files, unminified
Minify the files using an external tool like yuicompressor
If you don't want to generate the files first, yuicompressor offers a node.js version that can minify JavaScript strings directly. I'm not sure if that would work on CSS strings also.
Given the relative complexity of running node.js within Java, you might want to write a small node.js tcp server that you can send the JavaScript/CSS strings and return them minified. This approach also promises some nice scalability properties in terms of throughput.

How to compile Haxe libraries to Javascript without enumerating every classes?

I'm trying to make use of a Haxe library in Javascript. Since I already have a project written in Javascript, porting that to Haxe + using the given Haxe library isn't really a solution I'm ready to take at the moment.
Is there a way I can just compile the library from it's Haxe source folder to a JS file that I can then include in my <script> tags and refer to in my project? If I'm not mistaking, when a Haxe project normally compiles, it only includes the classes actually used in your project (correct?) - therefore I need some kind of tool or compiler options that will include all the classes in a given directory.
I would assume packages will get namespaced into Javascript objects at that point.
In case this helps, the library I'm looking to transcompile is Nape (Physics engine written in Haxe).
Looks like I found a way!
From FlashDevelop, create a new Haxe project (for JS).
Then, add a reference to the library that you wish to compile, either by:
Finding it in your Haxe install directory/haxe/lib/name_of_library/version_of_library.
Or, simply by adding the library name in your project settings, under Libraries (as shown in the picture below).
Third (most important step), add --macro include('your_library_root_packagename') in the Additional Compiler Options (replace with your library's top-level package name, obviously!)
I believe that if you have a library consisting of many top-level packages, you would need to enumerate several of those --macro compiler options. In my case I just needed the one.
Finally, CTRL+ENTER... wait for it to transcompile and Voila!
You have a Library in Javascript format!

Does the GWT Compiler reduce unused JavaScript Code of an external Library?

With GWT I can use JSNI to include external libraries like JQuery.
If I use an external library with JSNI what does the GWT compiler do?
Does it include the hole full size JavaScript library?
Does it include only the code of the library that have been used?
Assuming you copied the whole jQuery script into a JSNI method (ouch!), then GWT will do its best to optimize it, including pruning dead code. Results would really depend on the JS code though, not everything can be statically analyzed to determine what code will or won't be used.

OpalRb with MeteorJS?

I have been intrigued by the power and elegance that Opal offers in the way of using pure Ruby vs CoffeeScript or, of course, JS.
How would one go about leveraging Opal for Meteor as the primary language for development?
UPDATE: just wanted to share that we have shifted focus over to Volt for our realtime needs in an isomorphic environment that offers Ruby from bottom to top. It has been a fantastic experience and even Matz has tweeted about it a few times now.
I just released an initial version.
This will compile Ruby files to Javascript, but there is nothing meteor specific (yet).
I plan on porting Meteor to a Ruby class at some point, stay tuned or even better submit pull requests...
Yes, check out how the coffeescript package is implemented in Meteor in order to compile .coffee to .js. Specifically, the following
https://github.com/meteor/meteor/blob/devel/packages/coffeescript/package.js - The undocumented _transitional_registerBuildPlugin function which tells meteor how to turn coffeescript files into js files
https://github.com/meteor/meteor/blob/devel/packages/coffeescript/plugin/compile-coffeescript.js - The script that compiles files and generates source maps.
https://github.com/meteor/meteor/blob/devel/tools/bundler.js for how compiled files are served.
If everything is super well designed, you probably shouldn't have to touch the bundler to create a smart package that will build OpalRb files. However, I'm guessing that you are probably going to have to fire off a pull request or two to core in the bundler area in order to get it to play well with your package. Right now, the preprocessor treats all files individually, which may not be possible with your language (I'm not sure.) In the process, however, you'll be contributing to make Meteor's support of other JS dialects and compilers even better!
I'll reiterate my point that Coffeescript seems ideal if you want some sort of high level language for writing JS, especially since it supports in-browser source maps for debugging now.
Maybe a little late on the boat: I wrote a build plugin for Opal in Meteor.
You can find it on atmosphere https://atmospherejs.com/massimoronca/opal https://atmospherejs.com/mikamai/opal
You can install the plugin using
meteor add massimoronca:opal
meteor add mikamai:opal
Every file ending in .rb or .js.rb will be automatically compiled.
You'll have to wrap Meteor builtin Objects, until I'll release a package that does that, you can find a small example on how to do it in this gist https://gist.github.com/wstucco/42392ee21b76dfa3ef83
For example the Meteor global Object can be wrapped in Opal like this
class Meteor
def self.server?
`Meteor.isServer`
end
def self.client?
`Meteor.isClient`
end
def self.cordova?
`Meteor.isCordova`
end
def self.startup(&block)
`#{block.call if block_given?}`
end
end
and used this way
puts "Hello from server" if Meteor.server?
EDIT: moved the plugin under the Mikamai account

Running JQuery with CoffeeScript

How can I properly use jQuery and CoffeeScript? All of the examples that I have seen thus far compile the CofeeScript at runtime in the browser; this is not ideal. Normally, I'd simply write in plain old JavaScript, but I think CoffeeScript can allow me do get more done with less code, once I know how to get started. I've worked with JQuery before, but I've not used CoffeeScript. I'm not sure where to get started? Should I place $(document).ready in my external CofeeScript/Javascript?
Just have to put the jquery code after $ ->
Here is a small article about it, and if you are starting The Little Book on CoffeeScript is quite useful, it's very clear and goes from scratch
All of the examples that I have seen thus far compile the CoffeeScript at runtime in the browser; this is not ideal.
Agreed. You should look at projects like The Middleman that let you transparently compile your CoffeeScript to JavaScript on a local server for development, then bundle up the minified JS for deployment. (The Middleman also includes support for Haml and Sass, if you're into those, but you can just use HTML and CSS as well.)
The big advantage of The Middleman (or Rails, or any other web framework with CoffeeScript support) over just running coffee -cw is that the latest version of your compiled CoffeeScript is served every time you refresh the page; you never have to worry about waiting for background compilation to finish.

Categories

Resources