DEPRECATED: Best way to load latest jQuery in Ruby
This project is depreacted. Use Node.js build tools instead of Sprockets.
Load jQuery from CDN in production and use local copy in development. jQuery-CDN supports Ruby on Rails, Sinatra and other non-Rails environments with Sprockets.
Another gem jquery-rails contains also
UJS adapter for jQuery. So it need to test any jQuery updates and will release
new jQuery version after few month (for example, there is still no jQuery 2
in jquery-ujs
). If you don’t need UJS, this gem will be better for you.
jQuery-CDN now has 2 branches: with jQuery 2.x and 1.x.
Features
Load from CDN
Public CDN is a best way to serve jQuery:
- Speed: users will be able to download jQuery from the closest physical location.
- Caching: CDN is used so widely that potentially your users may not need to download jQuery at all.
- Parallelism: browsers have a limitation on how many connections can be made to a single host. Using CDN for jQuery offloads a big one.
In development gem will use local copy of jQuery, so you can develop app in airplane without Internet. In production gem will use CDN, but if it will down, gem will automatically fallback to bundled jQuery.
Latest version of jQuery
Instead of jquery-rails
this gem always contain latest version of jQuery,
because it doesn’t need to test compatibility with UJS adapter.
For example, jquery-rails
doesn’t support
jQuery 2 even after 4 months.
Gem version is same that jQuery
Instead of jquery-rails
, this gem versions tell exactly what jQuery is inside.
Gemfile
maintaining will be much easy:
gem 'jquery-cdn', '1.10.2' # Use jQuery 1.10.2
Sinatra and plain Ruby support
You can use jQuery-CDN with Ruby on Rails, Sinatra or any other Ruby environment with Sprockets.
How To
Ruby on Rails
Add jquery-cdn
gem to your Gemfile
:
gem 'jquery-cdn'
If you support IE 6, 7 or 8, lock jQuery in 1.x versions:
gem 'jquery-cdn', '~> 1.0'
Call include_jquery
helper in layout:
!!! 5
%html
%head
%title My site
= include_jquery
= javascript_include_tag('application')
Ruby
If you use Sinatra or other non-Rails frameworks with Sprockets, just connect your Sprockets environment to jQuery-CDN:
require 'jquery-cdn'
assets = Sprockets::Environment.new do |env|
# Your assets settings
end
JqueryCdn.install(assets)
Set local jQuery URL (by default, /assets/jquery.js
):
JqueryCdn.local_url = proc { '/jquery.js' }
Include JqueryCdn::Helpers
module to your app:
class YourApp < Sinatra::Base
helpers { include JqueryCdn::Helpers }
end
And use include_jquery
helper with env
option:
!!! 5
%html
%head
= include_jquery(env: app.environment)
Options
Helper include_jquery
has 2 options:
env
: CDN will be used only in:production
environment. Rails helper can detect it automatically. By default,:production
.cdn
: CDN to use. By default,:google
.
Other options will be used as <script>
attributes.
CDNs
By default, gem use Google CDN, but you can change it by cdn
option:
= include_jquery cdn: :yandex
You can use :google
, :microsoft
, :jquery
, :yandex
or :cloudflare
CDN.
Defer
Scripts with defer attribute will be
executed only after <body>
loading. They increase perfomance, because scripts
without defer
block DOM parsing, until script is downloading.
This attribute works like you put <script>
tags to end of <body>
.
But defer
is better, because scripts downloading will start early.
So, defer
attributes is highly recommended, but you need add it to all your
scripts.
!!! 5
%html
%head
%title My site
= include_jquery(defer: true)
= javascript_include_tag('application', defer: true)
Note, that unfortunately jQuery-CDN can’t use fallback with defer
now,
because this options can’t work with inline scripts.
Fallback
According to Murphy’s Law, even Google CDN may go down. So when you write
include_jquery
, jQuery CDN inserts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="/assets/jquery.js">%3C/script>'))</script>
This HTML checks, is jQuery normally loaded from Google. On any problems it will load local copy of jQuery.