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 5
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 split in two components.

The low-level component parses templates upon installing ThunderBoard and when a template is edited, it collects all variables to be globalized and it 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. Stylesheets are compressed into a large, single file. External stylesheets are not 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, but you may experience a flash of unwanted content.

Meta parser


The meta parser handles 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 type of refresh, since browsers store instructions into their core and refresh pages even if the HTML tag is removed.

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 displayed when browsing towards a particular page. This functionality "tricks" users into thinking the page has already arrived, and has noticeable benefits over perceived page speed at a psychological level.

Users downloads templates during their 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


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

This field accepts partial URLs. 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


This field contains the actual template's HTML. ThunderBoard can grab data from the current page and adds it to the preview template before displaying it. 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.

PHP
<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.

PHP
<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:

PHP
{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):

PHP
<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:

PHP
<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:

PHP
<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:

PHP
<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:

PHP
<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 recommend to add the data-thunderboard attribute to the #content element found in the 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.

Custom script reloading


ThunderBoard loads external resources just in the first visit; as you browse through the site, missing scripts and stylesheets are added and once they are there, it's just useless for ThunderBoard to load the same file over and over again. JavaScripts often require executing a function to initialize them, and some may also need to be loaded for the page they are specifically designed for. After all, they are usually not written to be part of a single-page applications.

From beta 5 onwards, ThunderBoard can reload custom scripts to ensure they can work continuously when navigating through your website. Custom reloading is an extension of something which was already implemented for MyBB's default scripts, such as inline moderation or quick reply functionalities; now, you can define custom handlers to accomodate third party plugins you may have installed on your board which do not work as expected across AJAX page loads.

Most scripts do not need to be reloaded entirely; they usually contain a function which is used to initialize the script's content. To reload a custom script you will need to gather:
  • The file: for example, jscripts/thread.js;
  • The function to be executed: for example, Thread.init()

Custom rules can be defined using the apposite tool in ThunderBoard's panel. Separate multiple rules with a newline. The syntax is very straightforward:
  • FILE=FUNCTION

Using the aforementioned examples:
  • thread=Thread.init()

Here are some recommendations:
  1. the jscripts prefix and the file extensions are NOT needed, but can be added anyway. If you add the jscripts/ folder prefix or the .js extension, ThunderBoard will not be able to confirm if the function is present in your file; however, it will execute the function anyway whenever a file matching your pattern is found in a page. For example, jscripts/thread.js=Thread.init() would also work;
  2. the function MUST be on one line. Semicolons are also stripped out from them upon submitting;
  3. ThunderBoard performs an automated check to see if the function is present within the corresponding file. If it can't find it, it will output a notice; this does not mean your function will not work, as it's executed anyway. Some scripts may contain an object-oriented structure, like:
    PHP
    Foo {
       
    bar: function() {
       }

    If you want to execute bar(), your function would look like Foo.bar(). However, this pattern cannot be find anywhere in the code above, and ThunderBoard would mark this as "not found"; the function is still calling bar() correctly though.

I acknowledge this might be a little bit difficult for those who don't know a word of web developing. Therefore, I will add a list of patterns for common plugins which will be reported to be faulty and which may need a reload. The list will be updated every time you will ask for me to look at a specific plugin you have installed which you find faulty. Just add a comment below asking for help if you are unsure. You can also report me patterns you have implemented with success in order to share it with other enthusiast members.

Static file serving and cache buster


From beta 5 onwards, ThunderBoard serves minified content as static files instead of preprocessing it. This saves server memory and also enhances speed, since files are written on your server's disk rather than generated on demand.

Versioning, or the ability to set a "version" of your board in order to send an updated copy of JS/CSS resources to your users, has been removed and will be rewritten in the next beta update. You still have the ability to wipe ThunderBoard's cache of static files by using the new cache buster tool in ThunderBoard's ACP section.

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 half a second.

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 page application).

Installation instructions


ThunderBoard is in beta stage. Something may not work properly. I suggest you to install the plugin on a development board, 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. ThunderBoard automatically tries to fix global variables upon installation and upon template changes, but you may experience some issues anyway.

Notable changes wroteBeta 2: ThunderBoard can 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.

Custom themes might contain patterns still unrecognized by the automatic checkup. If this is your case 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 undergo this process; just variables marked as off-scope. Off-scope variables are those not included into a function(). If a variable is declared within a function, you shall leave it there on its own.

PHP
<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 5.zip

Size: 1.14 MBDownloaded: 29 times

ThunderBoard beta 4.zip

Size: 160.58 KBDownloaded: 36 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;
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.