February 1, 2015 by Daniel P. Clark

Discovering UJS with AJAX

Having worked with Rails a while I’d heard of UJS as being Unobtrusive JavaScript.  I had thought that it was simply a pattern of writing your JavaScript in a JS file to be called via a method call rather than inline JavaScript within elements in the view.  So I had definitely overlooked the benefit of what UJS is.  In case you didn’t know UJS is actually a plugin that helps implement behavior blocks, but that’s not all it does.

My first real experience discovering the advantage of having UJS was with the GoRails tutorial “jQuery UJS and AJAX” by Chris Oliver (@excid3).  After watching the video tutorial my mind was blown!  I was shocked to see a demonstration where you click a link on your site and it executes a JavaScript file on the client directly from the server.  This opened up so many possibilities for me and I’m quite happy about it.  Be sure to check it out!

Applying What I Learned

Now I wanted to use this knowledge to put off loading things in my website until they were needed.  I had three complex Bootstrap modals that were popup dialogs for various things like sending invites, creating contacts, and a less complex feedback feature.  I was currently loading the html for these as partials within my left nav menu partial.  This caused the load time for just the left nav menu to be over 400 milliseconds.

I removed the render partial commands for the three partials:

Since I did the same things for each partial I will continue by demonstrating only what I did with the Invite partial.

I decided I wanted to have my JavaScript files write HTML directly to a div I placed withing the main template.

Then I created a ujs folder in my views directory and wrote files for each partial like this:

I changed the hyperlinks in the nav menu to no longer call the Bootstrap modal but now act as an AJAX link request.  Changed it from:

to:

The ujs_path you see above is a path helper I made:

So far so good.  But now we need routes to make the paths valid.  So I created routes for it as follows:

And then I dropped in a controller to match:

We don’t need to do anything in the Controller as we’re only going to have the “template”, our UJS JavaScript file, get loaded directly.

And that finished the work that needed to be done.  So I open the website and the nav_left partial now loads in only 40 milliseconds!  That’s right I shaved off 90% of its load time by externalizing those partials into UJS/AJAX calls.  And when testing the links the site ran exactly the same as it had before.  Only now it’s much faster.

So when a UJS/AJAX hyperlink gets clicked it executes the template file directly from the server.  And with rendering partials via the <%= j render(partial: ‘layouts/invite’) %> JavaScript render method it gets the same job done and saves a bunch on car insur…. I mean load time!

Summary

The GoRails tutorials are a great resource for learning some helpful and powerful things.  Check it out and sign up!

As you can see that even when we think we understand what something is, such as believing UJS was just a pattern, it still benefits us to research and verify.  That which you think you know may indeed be something you need to know.  And I’ve barely scratched the surface of what UJS is and what it’s designed for.  More details on UJS is available here: http://www.ujs4rails.com/.  It looks like a fun item to utilize.

There are so many ways this can be beneficial in your projects.  Why waste time loading resources when you can save it for when it’s needed?  I’m happy Chris Oliver took the time to make that tutorial.  And I hope that this was insightful and educational for you as well!

Please comment, share, subscribe to my RSS Feed, and follow me on twitter @6ftdan!

God Bless!
-Daniel P. Clark

Image by Mike Johnston via the Creative Commons Attribution 2.0 Generic License.

#ajax#article#blog#gorails#javascript#js#load time#partials#post#rails#ruby#ruby on rails#ujs