We use cookies to enrich your experience on MyBBoost by providing personalized content. We do not share any kind of information with other websites or companies. By browsing on MyBBoost you accept that we gather and store some data in your browser. For more informations about our cookies policy, read Cookies policy.
Beta
ThunderBoard beta 4
ThunderBoard is a plugin currently in development stages which aims to dramatically speed up page loads on MyBB forums. If you are familiar with CloudFlare's optimizations, think ThunderBoard as Rocket Loader on steroids (and with much less bugs since ThunderBoard is made specifically for MyBB!). ThunderBoard can also help getting better SEO ranking by search engines since the site speed is accounted into Google & co. algorithms.

[Image: kjM0mlA.gif]

How does it work?


ThunderBoard uses a combination of Open Source projects to obtain maximum performances and provide an eye-catching experience on your site:
  • Minify minifies and caches scripts and stylesheets, combining them when applicable;
  • LAB.js loads scripts asynchronously (a.k.a. "after the page has loaded", avoiding page rendering blocks) while preserving the correct execution order;
  • PJAX loads pages asynchronously using AJAX;
  • a modified app-loading.js displays a YouTube-like loading bar in between page loads.

ThunderBoard degrades gracefully if the browser does not support HTML5 History and pushState, which are PJAX dependencies.

JavaScripts parser


The JavaScripts parser is splat in two components.

The low-level component parses templates upon installing ThunderBoard and when a template is edited, collects all variables which need to be globalized and saves a modified copy of templates into its database table. The modified copy contains a separated inline script marked as "global".

The high-level component parses the entire page before it is sent to the browser, collects all external and inline scripts and chains them into LAB.js. While doing so, it moves the "global"-marked script to the top of the chain, ensuring global variables are defined before anything else; it also minifies external scripts by routing them to Minify.

Stylesheets parser


The stylesheets parser acts at the same level the JS parser's high-level component does. It grabs all the internal stylesheets and routes them to Minify. External stylesheets are not yet parsed.

Images parser


ThunderBoard can grab all the page's images, replacing them with an HTML tag and adding a JavaScript snippet to load images asynchronously. By doing so, your images will be delivered slightly after the whole page has loaded, speeding up the initial display of elements. The gain in page speed is especially noticeable if your site uses many images.

Meta parser


The meta parser solves issues with page reloading. MyBB uses the meta HTML tag to refresh pages periodically, such as the Online list and redirection pages: ThunderBoard is not compatible with this kind of refresh, as browsers store the meta instructions into their routines and refresh pages even if the HTML tag is removed (which ThunderBoard does).

Therefore, the meta parser converts refresh metas into JavaScript-based and ThunderBoard-compatible refreshes.

Preview templates


From beta 4 onwards, ThunderBoard comes with a page preview feature: you can define custom templates which will be displayed when browsing towards a particular page. This behavior "tricks" users into thinking the page has already arrived, and has noticeable benefits over perceived page speed at a psychological level.

An user downloads templates the very first visit with an AJAX request. They are cached within his browser's localStorage, when available (most modern browsers do); if by any chance you change a template, templates are updated automatically once the user visits a page again.

Preview templates can be created within ThunderBoard's module.

Page


Page field is a list of pages you would like to bind the template to. When users browse to that particular page, the template is displayed before content is downloaded.

You can enter just a part of the page URL you would like to bind templates to. For example, member.php binds the template to every URL containing member.php.

Separate multiple pages with a coma. For example, MyBBoost uses user-,member.php?action=uid to display the associated preview template for an user profile. The double definition is used because MyBBoost uses Google SEO to tidy up URLs.

Preview template


Preview template is the actual template's HTML. ThunderBoard can grab data from the current page and add it to the preview template before displaying it, so you are not limited to display static content. In order to do so, ThunderBoard must find an anchor, an element which contains the data to gather, starting from the element you have clicked on and traversing up to the body. For example:

Shade <-- this is the target element
This post <-- this is the anchor
This post's avatar <-- this is the data point ThunderBoard will gather

You must define an anchor and a data point in your theme's regular templates. The data point will be then available to be referenced into ThunderBoard's templates.

An anchor is defined using the data-tb-item attribute. When you click on a link, ThunderBoard will traverse up in the document until an element with the data-tb-item is found.

<div class="example" data-tb-item>CONTENT</div

A data point is defined using the data-tb-FIELD attribute. Replace FIELD with an unique string which you will use to reference to it.

<div class="example" data-tb-item>
    <
img src="{$avatar}data-tb-avatar />
</
div

You can now reference the avatar data point in ThunderBoard's template using the following syntax:

{avatar}
// ThunderBoard will look for elements with the data-tb-avatar attribute within the anchor element 

To improve extensibility, ThunderBoard can recognize CSS ids and classes as well. All you have to do is add the corresponding prefix before the syntax (# for ids, . for classes):

<div>{.avatar}</div>
// ThunderBoard will look for elements with the "avatar" class or ID or with the data-tb-avatar attribute within the anchor element. If found, it will replace {.avatar} with its content, typically <img src="avatar.png" /> 

Classes and ids extend the syntax, so data-tb-FIELD will be available as well. This gives you many customization chances.

If ThunderBoard finds the target FIELD within the anchor element, it collects its inner HTML and replaces the {FIELD} defined into the target template. Sometimes you may want to grab a specific attribute instead of the inner HTML. You can define it by using a slightly modified syntax:

<img src="{.avatar|src}" />
// ThunderBoard will look for elements with the "avatar" class or with the data-tb-avatar attribute within the anchor element, AND will grab the src attribute if found, replacing {.avatar|src} with it 

So to summarize:

In a regular template, eg.: forumdisplay_thread:

<div class="thread" data-tb-item>
    <
img src="{$useravatar}class="avatar" />
    <
span class="title"><a href="{$thread['url']}">{$thread['title']}</a></span>
</
div

In ThunderBoard's template with showthread.php as page field:

<div class="post">
    <
img src="{.avatar|src}" class="avatar" />
    <
span class="fakeText"></span>
</
div

When you click on a thread's title, ThunderBoard will traverse up to the first data-tb-item element (.thread in the example above), then traverse down inside it to find for elements with the "avatar" class or with the "data-tb-avatar" attribute. The former is found; a custom attribute is defined (src), so it grabs the src attribute (the user's avatar image) and replaces {.avatar|src} with it. The final result will be:

<div class="post">
    <
img src="http://avatarurl.png" class="avatar" />
    <
span class="fakeText"></span>
</
div

ThunderBoard will now use this template as a preview. To do so, it must find an element to replace its contents with the preview template. You can define the container using the data-thunderboard attribute. Typically, you would expect the header and the footer to stay in position when browsing through pages, as they are held constant basically in every page of MyBB. I would then recommend to add the data-thunderboard attribute to the #content element you can find in your header template.

You can define multiple FIELDs and reference them as you may like. You can define multiple anchors as well; just bare in mind that ThunderBoard stops once it finds the very first parent with the data-tb-item attribute.

How faster will my site look?


It depends. ThunderBoard has been developed over MyBBoost and a lot of performance tests have been made. Previously, a page was loaded in about 7 to 10 seconds when you visited it for the first time. Now, 2 seconds are enough on a 7 Mbit/s ADSL. Switching between pages was a real pain given an average of 6 seconds to load; now, we're talking about milliseconds (sometimes it might also feel instant).

Despite an outstanding gain in performances, ThunderBoard might not suitable for everyone. MyBB already comes with speed; ThunderBoard is rather designed for boards with high customizations which may have slowed down the site too much, or for those aiming to provide a better browsing experience by using AJAX through the entire site and to save some bandwidth (since data exchanged is cut down treating multiple pages as a single one).

Installation instructions


ThunderBoard is in beta stage. Something may not work properly. I suggest to install the plugin on a development board firstly, do some tests, and just then eventually install it on a live board. You have been warned.

Download the latest version provided in the attachment box below, upload all the files to your MyBB main folder making sure every file is in the correct folder and install & activate the plugin from the plugins manager in your Admin Control Panel.

Given this explanation, you must edit your templates accordingly in order to make JavaScripts compatible with ThunderBoard.

Notable changes wroteBeta 2: ThunderBoard is capable of automatically recognize and process variables, but the algorithm is faulty.
Beta 3: the algorithm has been edited with significant performance improvement and should be more precise.
Beta 4: the algorithm has been moved to low-level functions, lowering the impact on page loads.

The majority of custom themes might contain patterns still unrecognized by the automatic checkup. If this is your case you must disable the option "Automatic variable cleanup" and you must remove every "var " string you can find in your templates and put them on top of templates. If you are unsure, just ask below in the comments. I am here to help.

As an example, "var zIndex_modal = 9999;" should be changed to "zIndex_modal = 9999;". I would suggest using MyBB's search and replace functionality in Templates overview, search for "var " and delete it plus move the respective variable on top of its template. Not every variable should go under this process; just those off-scope. Off-scope variables are those which are not included into a function(). If a variable is declared in a function, you shall leave it there on its own.

<script type="text/javascript">

var 
something true// Should be edited to "something = true;"

function() {
  var 
something_else false// Leave this as is
}

</script> 

Upgrade from older versions


If you are running older beta versions of ThunderBoard, here's an easy step-by-step tutorial on how to install the latest version:
  • before downloading ThunderBoard, uninstall the older version from your board;
  • download the latest ThunderBoard version, extract the .zip file, upload and overwrite the old files;
  • install and activate ThunderBoard;
  • enjoy!

Development


ThunderBoard is not out of the mine yet. Fonts are yet to be implemented into the game and bugs might pop up out of nowhere. Testing is important. If you want me to improve the plugin, test the plugin and report as many bugs as you can find.

Found a bug?


If you encounter bugs, they are most probably caused by the AJAXification of the entire site which conflicts with JavaScript. In case you find something weird or malfunctioning, open a new thread in this forum with the following informations:
  • your board's URL;
  • a detailed step-by-step guide to reproduce the bug;
  • eventually, you can speed up the debug process by posting a screenshot of the JS error produced in your JavaScript debugger (console).

ThunderBoard is on GitHub


If you are a developer and want to improve ThunderBoard on your own, you can fork the project on GitHub and issue as many pull requests as you want.

License


ThunderBoard is licensed under MIT.

ThunderBoard beta 4.zip

Size: 160.58 KBDownloaded: 21 times
Hey Shade, I think I found a bug. Winkle

[Image: WPkcMa0.png]
Can you elaborate more? No issues here. Edit: sorry, the attachment link was AJAXified as well. Should be fixed by now Emoji Smiley-02
(17 Apr 2016, 18:04)Shade wrote Can you elaborate more? No issues here. Edit: sorry, the attachment link was AJAXified as well. Should be fixed by now Emoji Smiley-02

Yep, the download is working now. Emoji Smiley-02
FYI – I've uploaded a new beta 1 version which fixes one issue with shutdown functions. It's kinda important but it's not enough to be updated to beta 2. The fix lets you properly update the counters (threads views, last visits, etc.).
A couple of issues;
  • links to external stylesheets break the minification with a 401 error.
  • stylesheets are still minified after disabling the Resource minifier.

both of these issues in conjunction mean the plugin wont work for me.
Thank you for the report. Stylesheets are indeed minified even if the resource minifier is deactivated - that's because I didn't think about external stylesheets (bad practice nonetheless!). I will update ThunderBoard in the next couple of days.
(20 Apr 2016, 6:13)Shade wrote (bad practice nonetheless!)
but it's actually good practice to put your static assets on a cookie-less domain c;

oh, and the multiquote is borked with this theme;
[Image: nlrmum.png]
I've heard it in the past, but never fully understood the benefits. Anyway, I will push an update soon Emoji Smiley-02
the benefit is that the browser doesn't have to send every cookie with each request for every asset.