Split the code for the editor and everything else

[kizu]

I have an idea how to split the code to make the dabblet's loading time faster.

While this is an issue to research, I suppose that a lot of people land on dabblets without an urge to edit some code there. They could go from a twitter link, from the stackoverflow or any other place, so in majority they won't need the code for an editor at all.

So, it would be logical to split the code into two parts: the one that is now minus the code for an editor, and the editor itself (with all of the previewers and other stuff), and then lazyload the editor afterwards, or by request (clicking on the editor area if user don't have an editor in cache would cause the preloader to appear with the message like “code editor loading” or just a spinner.

I think, that it can reduce a lot of code that the usual user would get, also you could load the full code when user opens the new dabblet like http://dabblet.com/, 'cause in that case the possibility that user would actually edit some code would be higher.

There could be other downsides or things to think about, but I think that such split would be helpful (and doing so can ease the adding of new features to the editor — you won't need to fear that those features would slow down the regular user).

[LeaVerou]

Some good points there. I am also trying to think which parts could be lazy loaded. However, the previewers aren't only needed when someone is going to edit the code, sometimes they help understanding it too. Syntax highlighting is also needed, so basically it would only save the need for editor.js, which isn't that huge.

[kizu]

Yep, good point, the syntax highlighting and previewers on hover are needed when there is a pane with the code.

However, it there is, for example, only the result pane, the code for editor could be loaded only if user changes the panes.

And even when the editor is shown, you could lazy load at least the previewers, so the main content would be shown faster and the previewers would work only when the all the other editor stuff is loaded.

This must be researched, but I think that the average time between the page loading and hover to get the previewer would be enough to load the all the editor code.

BTW, you could log this (and any other user actions + the average load time), so we could start from the stats instead of guessing the user behavior :)

[LeaVerou]

That's a great point. Yes, if no code panes are shown, all the editor code (previewers, syntax highlighting, editor code) can be lazy loaded!