I am struggling to find any real documentation on the new Rails 3 asset pipeline. I know there is a video, but I do not wish to watch an hour video in this format. I watched about 10 minutes and gained no knowledge.
So, what do I need to know about Rails 3 asset pipelines? What does this mean to my previous projects, and what does it mean to my future projects?
It means you will now be able to write css and javascript in separate files using sass and coffeescript if you want and they will be compiled into one single file in the end.
If you have like, 4 css files on your assets/stylesheets they will be concatenated and compressed and delivered on production with a single application.css file.
Same thing applies to javascript files.
More info in http://getsprockets.org/
You can get some good documentation here on rails guides here
http://edgeguides.rubyonrails.org/asset_pipeline.html
It's a great way to serve fast assets for your application. Sprockets is playing a major role in it.
Related
is anyone ever tried implementing the dojo toolkit AMD with laravel 4, or could anyone please point me to a simple sample.
just a simple AMD implemetation on laravel?
What asset manager or the default is ok. how to use it with dojo?
Please help. thanks
For 1. I suggest you may try this Laravel 4 bootstrap suite it gives you RequireJS implementation out of the box.
For 2. You can use dojo with any asset manager you want, or even without it (although it is not a good way) - just by putting its .js files in your /public directory and including them as you do in usual html from inside your view templates. If you are using Blade templates make sure the template syntax is not colliding with your js syntax. If it is, then use #include of .php file with your js code section in your .blade.php view template.
Asset manager gives you a more elegant and correct way of doing the same thing. It maybe extremely useful if you are dealing with LESS or Coffee things to be compiled into regular JS and styles.
If you want advanced asset manager I would suggest your to look at /CodeSleeve/asset-pipeline on github - it's one of many asset managers for Laravel, but one the few keeping alive (take a look at basset or laravel-grunt options on github for instance).
Asset Pipeline makes a good job making asset management similar to the one in Rails. Here is an article on how and why to use it: http://culttt.com/2013/11/04/add-asset-pipeline-laravel-4/
Often, there is a need to use complex JS libraries in Rails. Books and guides suggest that for all js/css/images we should use the asset pipeline
Now, what should be done when my JS needs additional images, css and similar? Everything useful i could find was
http://railsapps.github.com/rails-javascript-include-external.html
If i distribute the resources across the asset pipeline's folders, the plugin usually breaks.
Sticking everything in one folder seems very un-railslike and you probably lose all the benefits from the asset pipeline mechanism
What do you consider to be the best practice in such cases?
Update: the matter of fact is, I'm using a third party carousel which requires a lot of resources that are stored in the same dir as the carousel script itself. Since the script is badly coded/documented it's prohibitively difficult to rearange it's resources.
Since i haven't found anything about it on the web, i'll agree with Mike's answer:
If you must put everything in the same folder, do it somewhere in the vendor/assets dir
For 3rd party JS, images and CSS, add them to vendor/assets (e.g. 3rd party JS to vendor/assets/javascripts, images to vendor/assets/images and CSS to vendor/assets/stylesheets).
If you have to add images in the same folder as the JS code then at least it won't pollute your working directory.
Don't forget you may need to add //= require_tree ../../../vendor/assets/javascripts/. to your application.js file if the 3rd party JS files don't get loaded.
Under the section "Cascading Style Sheets" in M. Hartl's Rails 3 tutorial he mentions copying the CSS blueprint directory into the 'public/stylesheets' folder. My stylesheets folder resides within the assets directory. Is it reasonable to copy the blueprint directory into the 'assets/stylesheets' instead of the 'public/styleshets'? If not, what might be your suggestion? If so, are there any particular pitfalls of which you might suggest I be mindful?
He clearly suggested using Rails 3.0.1, though I am running 3.2.6. I should have followed his directions to the mark, but I had an almost impossible time getting the environment up and running on my Windows machine (MySQL conflicts, etc... ) and it just so happened that this version ended up working for me so I went with it.
Don't assume I know what I'm talking about, because I'm new to RoR, but I just spent the last few hours reading up on the asset pipeline after running into problems with it. I'll share a few things I've learned that might help you conceptualize:
Anything in public/ is left just the way it is, and server as static files directly by the web server. There are two points worth considering regarding public/ assets, though:
1) They don't get the benefits of precompiling, which include:
1a) fingerprinting - Appending an md5 hash based on file contents to the filename, so that the filename changes when the file changes, forcing caches to reload. This is useful if the file might change some day (a new version of blueprint, in your case).
1b) concatenation - The precompiler can/will combine multiple CSS or JS files into one, which makes the download faster. (Exactly what files get compiled and into how many is configurable.)
1c) minification - The precompiler removes whitespace (and other clever optimizations) to shrink down the size of your CSS/JS files.
2) I'm still trying to figure this part out, but whether something is in /app/assets and goes through precompile affects whether and how helper methods work (things like asset_tag, image_tag, and javascript_include tag, which you use in your views).
Even though I'm totally unqualified, I'm seriously considering starting my own Rails Assets Best Practices page on a wiki somewhere to start organize my thoughts. I think it's sorely lacking - I've had to dredge bits of knowledge from many places, and some of what people are suggesting I find objectionable (like modifying config files to precompile add unmanifested assets).
I have copied my stylesheet files to app/assets folder and it worked normally
http://processingjs.org/content/download/processing-js-1.2.1/processing-1.2.1.min.js
http://processingjs.org/content/download/processing-js-1.2.1/processing-1.2.1-api.min.js
Just observed that 2 javascript files are shipped in the distribution, what should I use for runtime functionality?
You could use either one, however the minified version is optimized for production because it saves bandwidth. If you plan on just using canned functionality from the script, the http://processingjs.org/content/download/processing-js-1.2.1/processing-1.2.1.min.js will do fine. However, if you wish to have the ability to change the code in the future, the api is what you want.
Jeffrey Kevin Pry
You want to use the non -api version. Looks like they added a seperate build which only includes the js API itself -- it doesn't include the parser which translates from processing into js.
I've been reading O'Reilly book "Dojo - The Definitive Guid" but somethings are still not definitive to me.
They talk about "bootstrapping" and getting the dojo.css from the AOL CDN".
When I'm testing on my machine, should I use the CDN? Or should I wait and use that only when I deploy?
Secondly, the book talks about CDN for dojo, but not for dijit.
I'm developing on Google App Engine (GAE) - so having the 2000+ Dojo/Dijit files in my Javascript directory is a little annoying, because it slows down my upload to GAE each time.
Firebug is giving me this error:
GET http://localhost:8080/dijit/nls/dijit-all_en-us.js 404 not Found
GET http://localhost:8080/dijit/_editor/plugins/FontChoice.js 404 not Found
I downloaded the sample from here:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html?theme=soria
and I'd like to "simply" get it to run on my machine under local google app engine (which is the localhost:8080 that you see in the URLs above).
I see this statement which probably is causing the second 404 above:
dojo.require("dijit._editor.plugins.FontChoice");
One other error:
cannot access optimized closure
preload("en-us") dijit-all.js (line 479)
anonymous("dijit.nls.dijit-all", ["ROOT", "ar", "ca", 40 more... 0=ROOT 1=ar 2=ca 3=cs 4=da 5=de 6=de-de 7=el 8=en 9=en-gb])dijit-all.js (line 489)
dijit-all.js()
dojo.i18n._searchLocalePath(locale, true, function(loc){\n
To continue for now, I'm going to try to copy the entire dijit library, but is there a solution short of that?
My current script includes look like this:
<script type="text/javascript" src="/javascript/dijit.js"></script>
<script type="text/javascript" src="/javascript/dijit-all.js" charset="utf-8"></script>
I got the dijit.js file by copying and renaming dijit.js.uncompressed.js to dijit.js.
You have a few options actually:
You could use the CDN for everything (though using the full source locally does give you better error messages). Google has them as well. Dijit is here: http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/dijit.js FYI. This has many advantages in my opinion. User caching of the JS being the primary one.
Build a layered file. I think the O'Reilly book has a section about it but the PragProg book is better in this regard IMO. There's also this doc on dojocampus.org about building. This will trim down the files you need to upload to GAE and speed up your app loading. This is actually what I do in order to cut down on HTTP requests.
Keep doing what you are doing. :)
Regarding the errors you are seeing about 404 for en-us files are essentially harmless. Here's a better description.
You also might be reloading dijit files by using dijit.uncompressed.js and dijit-all.js and causing problems in the process...but I'm not sure about this one.
I just want to clarify that when using CDN all you need to include is the main Dojo script. The rest will be pulled in automatically when you dojo.require() them.
If for some (technical) reasons you don't want to use the X-Domain loader (CDNs use this type of loader), you can do a custom build (well-described in many places). After the build you copy only relevant files to your server. No need to copy all 2000+ tests, demos, unused DojoX projects, Dijits and so on.
During the build you will create a single minified file (or a few layers), which will include all Dojo JavaScript code you use. If you use Dojo widgets, their templates will be already inlined, so you do not incur hits for them. As part of the build CSS files are combined together and minified too. So literally in most cases you will have just two files: a Dojo layer, which includes everything + your custom code, and a CSS file. In more complex cases you may have more files, but usually we are talking about handful.
How to make sure that everything is in the build? Fire up your favorite network analyzer (Live HTTP Headers, Firebug, Fiddler2, or Charles Proxy would do fine) and see if you hit any files outside of your build. If you do — include them in the build, or try to figure out why they are requested, and eliminate these requests (some localization-related calls are fine).
Personally I would start with the CDN option — works well, no hassle, hosted by somebody else with fat pipes.
To address your first question, use the full source version locally for development, so that you can get clearer debug info which points to a legible line in source, rather than the single line the minified version is reduced to. Use the CDN for production.