Roots Ajax - Where's the love?

1

At the end of the day, Roots does some innovative stuff with regards to the back end and the development cycle, but Roots-themed WordPress sites appear to struggle with the same issues that most WordPress sites do:

  • Slow content loading - though this is inherent with WordPress in
    general and though Roots has done a great deal towards making things
    faster, all of the Roots optimization benefits would be completley
    shadowed by the benefits received if content was loaded through AJAX.

  • Full browser refresh for every request - because of this (even with
    cached elements), Roots themes appear to suffer from the harsh blank
    page and then often the flash of un-styled content or the sloppy
    reflow of content as the page finishes loading. Again, all of this
    could be resolved by loading content via AJAX    .

  • Large Images/Multiple Images/Complex Layouts lack preloading and styling and still cause problems with sites that are graphic intensive. Every click is a nightmare even
    though Roots has gone to considerable lengths to shorten the
    nightmare, it still exists.

  • No persistent elements - Again, because
    of the page-loading mechanism, Most WordPress themes cannot have persistent
    elements. Headers that are supposed be the same for every page view suffer
    when new content is loaded. Roots helps with this by modularizing the template parts
    but (not to beat a dead horse), AJAX would make it a lot better.

  • Poor state-level management - when clicking a button to load new
    content, often I see two buttons with the same ā€œselectedā€ state for a
    good three or four seconds before the screen goes blank and the new page begins to load. Yep, you guessed it, AJAX could solve this too.

If this post sounds like I am complaining about Roots, please understand that Roots is by far my favorite WordPress starter theme and I havenā€™t even begun to use half of the workflow enhancements. If anything, this post begs the question: ā€œOut of respect for your custom way of handling WordPress theme development and acknowledging your dedication to best practices, what is the reasoning behind the lack of intrinsic support for AJAX content retrieval?ā€

I also wanted to be clear that none of these issues that I have mentioned really have anything to do with Roots specifically. That is to say that, if anything, Roots improves each of things in a number of ways. I just wonder if a robust set of Ajax-content loading tools built into the Roots theme wouldnā€™t solve or at least even more greatly mitigate these and other issues?

Thanks for the amazing theme and the new way of working with WordPress content.

Jase

p.s. Please do not mistake my diction for disapproval. I work with attorneys and often my writing sounds harsh and judgmental when that is the farthest thing from my intentions.

2

Iā€™m new to Roots, just entered here because I wanted to thank the developers for the good work theyā€™ve done. Roots is, I think, the cleanest approach to create a WordPress theme, starting at the WP hooks and template level.

But while I wanted to write this thank you post, I came across yours and couldnā€™t resist to respond.

First of all, you make it sound like ā€˜Ajaxā€™ is some sort of a magical technology or standard that can be put into place at will. This is plainly wrong. The most generic definition of ā€˜Ajaxā€™ is a system that makes use of asynchronous server calls to retrieve, post or manipulate data on a web server without having to reload the current page.

Your post is on the wrong forum. You should have posted it on the WordPress developers forum instead. Roots is a WordPress theme and therefore bound to the way WordPress works. Of course you can shortcut the WordPress architecture and retrieve data directly, but this is obviously beyond the scope of a theme.

WordPress is not perfect. I have written sites using it, and many others that donā€™t (My latest favorite technology being Angular JS) but WordPress is a complete CMS and that is sometimes the best tool for the job at hand.
Roots is a theme, a WordPress theme. And the best a WordPress theme can do is try to best use the API that WordPress provides. And that is what I think Roots is doing. Using the latest standards ( e.g. HTML5, Bootstrap) wherever possible. If Roots where to use Ajax to load content then first WordPress would have to expose an Ajax Theme API.

Gert

3

We could obviously be an Ajax oriented theme if we wanted to be but thatā€™s not our goal. The other problem which you donā€™t mention is the SEO/crawler implication of switching to Ajax. Googleā€™s web crawler might ā€œunderstandā€ JavaScript but it doesnā€™t really work in reality.

Using JS to render a site client-side can definitely speed things up, but if youā€™re seeing response times of 3-4 seconds something is wrong to begin with and Ajax doesnā€™t magically solve that.

4

My thought is if you see all Wordpress sites, even using Roots loading as slowly as you describe, you either have a VERY slow internet connection, or youā€™re looking at WP sites on very slow servers.

Of course, Wordpress isnā€™t as fast as a static website, or even the majority of PHP frameworks with less bloat, but if you have a decent internet connection, you should not be seeing pages take forever to load, and flashes of styling. Really, you shouldnā€™t be seeing any flashes of styiing except for perhaps web fonts that take an extra half a second to load. All CSS is generally loaded before the content, so unless there is a ton of Javascript being used, Iā€™m just not exactly sure where the issue is.

Loading everything via Ajax is definitely not the answer though.

5

I think a lot of this falls on to the wordpress team. It would require a lot of changes to make something like this happen to wordpress core.

6

If Roots tried to make that decision for the developer then I probably wouldnā€™t use it. The current WP sanctioned way of handling ajax in themes is less than elegant but there are tons of ways you can show Roots some ajax ā€œloveā€ with minimal effort. Taking a cue from rails weā€™ve used Turbolinks along with roots on several sites. In terms of time/benefit itā€™s seemed like the easiest way to implement a sudo persistent/maintained state front end without all of the headaches (some still exist). Thereā€™s also history.js, pjax, and many more that offer the same benefits. If and when projects like this make it into core weā€™ll have a lot more options with what we do on the front end.

7

@k33n How did you implement Turbolinks in Roots since its a RoR app? Iā€™m also intrigued by Pjax, since it gives one more control over what elements are loaded by Ajax functionality. I want to use AJAX for most everything on my site, since I want to have a continues running podcast playlist (like on SoundCloud). :slight_smile:

8

@henrik_vaglin you could try this: https://github.com/stormuk/wp-turbolinks

Turbolinks is mostly just JavaScript that could be used on any site, but there is some RoR specific code as well. The above plugin tries to replicate it for WP.

1 Like
9

Thanx I think I might actually check it out :smiley:

10

A bit old but still: github.com/wayoutmind/roots-pjax

11

Iā€™ve recently implemented a PJAX (AJAX and pushstate) and roots setup. I was actually put off by the existing Wordpress methodologies for implementing PJAX and the other roots-pjax is a very old version of roots. Additionally I was not used to the template hierarchy imposed by roots.

My suggestion is rolling your own event handlers in using pjax and jquery pjax (if so inclined) and just check for the request type in the base.php template. Block off all parts of the site you donā€™t want updated in a wrap to check the headers to see if the originating request is from PJAX in base.php (you are going to want to probably hide all of the head and the footer stuff if a pjax request). I can write up a tutorial if anyone is interested. Took me several hours and many dead ends but I have my content updating properly.

2 Likes
12

Sounds interesting jawshchevyvan, Iā€™ve been thinking of playing with a single-app type theme, so Iā€™d be interested in knowing what issues you ran into using the theme wrapper in Roots.

Are you using a Javascript framework like AngularJS or Backbone?

13

Not doing any heavy lifting in javascript so no need for Angular or Backbone in my use case.

Seriously it was as simple as dropping in the jquery.pjax and checking the headers as they came into my base.php file and blocking what bits to not render on an Ajax request by checking against the request headers.

I still need to work out a way of changing the title element in the head but that ought to be quick.

If this comment isnā€™t a good enough starting point let me know and Iā€™ll get around to a full tutorial in the next week or so (and maybe a fork for people to look at).

2 Likes
14

Hi Jawschevyvan, sure I would be interested in a tutorial or some guidelines about the PJAX implementation youā€™ve done, as it seems to be more flexible and configurable than the one Iā€™ve been trying: for a current project, I was interested in trying to implement history.js with Roots, and Iā€™ve been following this approach: http://wptheming.com/2011/12/ajax-themes/
It really works well for basic pages, posts, etc. but doesnā€™t work well when loading pages with custom plugin implementations like an Event Calendar or something, than maybe rely on loading his own scripts etc in wp_head for example, that is not reloaded when changing between sections with this approach. Also is not possible to update body classes (for that, I print body classes inside the container I load via AJAX, so I can still fire my scripts with DOM-Routing ā€“puting ā€˜UTIL.loadEventsā€™ on document.ā€˜ajaxCompleteā€™ along with document.readyā€¦
But, sure would be better ways of doing itā€¦ Iā€™m interested in knowing your PJAX approach and sure if anyone interested I can give more details on my implementation with history.js
Keep the good work folks

15

Hi again jawshchevyvan, finally would you share the approach you followed with PJAX? Would be very useful and I will be very grateful to you, as Iā€™m reading a lot of stuff (included official github docs) about PJAX but canā€™t get to understand the way to use the headers, and canā€™t get this to work. I think Iā€™m close! If I get something I would share for sure!
Thank you very much in advance

16

If someone interested, I share how I have implemented PJAX in roots so far. As jawshchevyvan said, itā€™s really simple. I still need to work some details for whole implementation and work in multilanguage site etc, but, roughly speaking, this will be the process (please jawshchevyvan share your implementation, sure is better than mine)

In lib/extras.php:

function is_pjax_request() {
    return (isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true');
}

So you can know when a page is being reloaded/visited from first time, or loaded via pjax.
In base.php:

 <?php get_template_part('templates/head'); ?>

<?php if( !is_pjax_request() ) :
    do_action('get_header');
    get_template_part('templates/header');
  endif; ?>

<div id="pjax-content">
<div class="wrap container" role="document"> ... </div>
</div>


<?php if( !is_pjax_request() ) :
    get_template_part('templates/footer');
endif; ?>

So, this works for me, as a first approach. Hope is useful to someoneā€¦

17

Sorry! I hadnā€™t received any notifications on this thread!!! exhtml - thank you for your snippet! I hope to do a screencast / full writeup in the next week or so. I will be very pedantic (so as to not confuse people like me, who never used roots before this project) - and go through all the configuration points.

I was having issues with some of the pushState stuff when using back/forward buttons, and updating the title in the header (I now am sending it in the content div as a title tag upon a pjax request and it seems that pjax automagically parses it into the header).

18

@jawshchevyvan thank you! waiting for your tutorial!