Exploring PJAX: My notes

Intro

So this is my first time writing an exploration post. I've been trying to learn new technologies as a web front-end developer. So I found PJAX, which is a PushState + AJAX jQuery plugin to make the experience of switching pages faster. I found it while exploring the Ghost blogging platform, which has the same effect but uses a different plugin called Ember.js[1], which I would like to explore later.

Resource

I used the GitHub repository "jquery-pjax" from defunkt[2] to learn this plugin. There are also optimized different ones such as the repository "pjax" from MoOx[3].
To make testing more "realistic", and as I am currently using a computer running Windows while I am more familiar to Nginx than Windows IIS, I hosted my testing projects on OpenShift[4].

General Understanding

They way PJAX operate is basically changing and reloading one element on the page while keeping all other elements on the page the same. For example, if you have something like:

<!DOCTYPE html>
<head>
    <title>Something</title>
</head>
<body>
    <h1>Title</h1>
    <div class="container" id="pjax-container">
        <span>Body content</span>
        <a href="/2">Something on another page</a>
    <div>
</body>

Every time you reload the page, the entire HTML file of /2 will be reloaded, from the header to the footer. But if PJAX is used, you can basically tell PJAX to load a specific part of the document like $(document).pjax('a', '#pjax-container') to set the target container fetched by tag <a> to #pjax-container on the page you are fetching, and replace the content with the same identifier on the original page, #pjax-container in this case, which leaves the tag <h1> outside the container the same. This is a simple example, but think about this - especially when you have a very heavy header or navigation bar, or a specific set of data (fonts, js, style sheets) that is the same on the target page, this will certainly make a difference in loading speed of your website.

PushState

So what is pushState[5]?


Resource Links:


  1. Ember.js: http://emberjs.com/ , MIT License ↩︎

  2. "jquery-pjax" from defunkt on GitHub: https://github.com/defunkt/jquery-pjax/ , MIT License ↩︎

  3. "pjax" from MoOx on GitHub: https://github.com/MoOx/pjax/ , MIT License ↩︎

  4. OpenShift by RedHat: https://openshift.redhat.com/ , by Red Hat Inc. ↩︎

  5. History API, Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/History_API , CC-BY-SA 2.5 ↩︎


Mingjie Jiang

Maryland, United States
https://www.mingjie.info

Comments

comments powered by Disqus