MyBB Community Forums

Full Version: ThunderBoard – Light-speed page loads for MyBB
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7
Some updates: the plugin is now quite stable and is working well. The main obstacle – which is JavaScript execution – has been bypassed almost completely. As a result of this update, editors, jQuery selects, etc. works well even when a page is requested by AJAX.

Let me explain this a bit further.

Long story short: you'll need to adapt existing JSes to ThunderBoard-compatible code. This is not sophisticated, developer's black magic, it's an easy operation which is needed to make your website compatibile with ThunderBoard's awesomeness. Instructions will be provided.

ThunderBoard runs on pjax, whilst the whole site is powered by AJAX. This saves a lot of resources and speeds up the site dramatically, because you don't need to request all the styling and functional resources every time you load a page. You just need to download the HTML, which is nothing compared to JavaScripts and stylesheets. If a stylesheet or script is not present, pjax adds it and eventually executes it.

With normal page loads, your browser downloads resources synchronously and JavaScripts block page rendering. However, the order of execution is preserved. So if you have an inline script after an external one which it depends on (eg.: jQuery, or custom functions), the script is correctly executed because the library has been loaded before. So you have slower page loads, but scripts just work fine.

With pjax, scripts are downloaded asynchronously which does not block page rendering resulting in dramatically faster page loads. However, pjax does not ensure the correct script's order execution, because heavier scripts might take longer to download and lighter ones (that usually depend on them) can be executed before, resulting in JS errors. ThunderBoard solves this exploiting LAB.js, which is a separate JS loaded with async scripts loading and execution order properties.

pjax handles duplicate scripts automatically. However, since ThunderBoard uses an external script loader as explained above, scripts can be actually loaded and executed twice. This usually does not result in JS errors, but certain scripts may break because they are not designed to be run multiple times. ThunderBoard adds a custom check that prevents duplicates to be executed. Hooray!

All that glitters ain't gold unfortunately. Here's a real example applied to inline moderation. The code kinda looks like this:

<script type="text/javascript" src="jscripts/inline_moderation.js"></script>
<script type="text/javascript">
var inlineType = 'forum';
var inlineId = 7;

In normal situations, this code is valid. inlineType and inlineId are correctly defined as global because they are not wrapped inside any function. But in ThunderBoard's environment, this produces the JS error "inlineType is not defined".

Why? inline_moderation.js contains a check for inlineType and inlineId emptyness when it's initialized. The variable is defined outside its scope as global. Ok, the script's logic is quite messy and variables should at least be declared in the file to avoid undeclared variable errors. But that's how MyBB is made unfortunately, and since the script works fine in normal boards, why should we blame MyBB's devs? ThunderBoards wraps all inline scripts in a function() to ensure that scripts are executed in the correct order. Those variables are not global anymore, whilst inline_moderation.js can't recognize them as defined.

A valid ThunderBoard-compatible script would look like:

<script type="text/javascript" src="jscripts/inline_moderation.js"></script>
<script type="text/javascript">
window.inlineType = 'forum';
window.inlineId = 7;

This works because inlineType is explicitly bind to the window object, thus automatically declared as global even if it's inside a function(). The operation does not break anything in the code's logic, it just makes it compatible with ThunderBoard.

Explicit global variables are a must for ThunderBoard-enabled boards. You need to edit all inline scripts in your templates if you want to make it work. An automatic attempt will be included in the plugin, but since custom templates might change the search&replace pattern, you will need to make changes manually following the instructions which will be provided in the package.

Another mandatory operation you will need to do is move certain inline scripts before their dependencies. The example above should be in this shape:

<script type="text/javascript">
window.inlineType = 'forum';
window.inlineId = 7;
<script type="text/javascript" src="jscripts/inline_moderation.js"></script>

LAB.js works too well and chains all scripts in a waiting queue. Inline scripts with variables declarations can be put after external scripts and still work fine, LAB.js + pjax breaks this behavior and needs variables to be declared before. Again, proper instructions will be provided to adapt all the default JSes and custom ones.
Good job! Thanks for detailed info
ThunderBoard is now available to download.
Great work

I free the rocket speed of your website Smile
(2016-04-17, 03:31 PM)Shade Wrote: [ -> ]ThunderBoard is now available to download.

Thank you! So in next versions there will be an easier way how to install (I mean template editing)? I will try
The template editing method will pretty much remain the same, although it will be extended to the missing ones. There are some experimental techniques I implemented for some of them (as documented in the docs) already, and they will be applied to the other missing templates once a proper testing period passes by.

Unfortunately, this is the only way to make ThunderBoard compatible with JavaScripts.
OK, I think it can be done by unexperienced user when a detailed tutorial will be added. I am going to test it Smile

P.S. I am looking for a beta 2 - any roadmap?

minified styles break my CSS in forum header, so I have to wait for another beta where I can disable this option.
Can you post a bug report on MyBBoost? I've added detailed instructions on how to do so. Otherwise I can't debug anything.
I need to wait to the next month but I'm gonna use it definitely.
ThunderBoard beta 2 is out!
At last, here's the next version of ThunderBoard publicly available! You can download ThunderBoard beta 2 from here. In this version:

- solved @Senpai's bug which prevented sites with external stylesheets to use the plugin's benefits;
- removed the search and replace functions on install/uninstall. The plugin can now be installed as simply as other plugins;
- added an experimental algorithm which grabs all the out-of-scope variables, globalizes them and puts them to the top of the scripts loading queue in order to avoid JavaScript errors;
- added a reinitialization routine to certain scripts such as thread.js, post.js, report.js, inline_moderation.js and many others which should fix the inability to use their respective functions properly (eg.: quick reply) when loading pages with PJAX;
- added form submit support;
- added 404/403 pages support;
- solved duplicate scripts related errors;
- minor bugfixes.

Upgrade from beta 1 to beta 2
If you are running ThunderBoard beta 1, here's an easy step-by-step tutorial on how to install the new version:
  • before downloading ThunderBoard beta 2, uninstall beta 1 from your board;
  • download ThunderBoard beta 2, extract the .zip file and upload and overwrite the old files;
  • install and activate ThunderBoard beta 2;
  • enjoy!
Pages: 1 2 3 4 5 6 7