I’m trying to adapt a jquery-ui codebase to use RequireJs, and I’m deploying it on a much slower (but scalable) virtualized cloud service than the dedicated host I was using before.
My pages are by default an ugly catastrophe of vanilla HTML. The only thing that brings this mess to life are calls to JavaScript functions, which give it the appropriate tab controls and layout. In fact, the page is laid out long and vertical…one section after another…before I call the .tabs() function which folds them up into a single unit with a horizontal control.
(Fairly confident I’m “doing it right” in the jQuery UI mindset. By not building the whole UI through code to start with, it can be at least looked at with JavaScript disabled. Though I doubt anyone is still using Lynx, there are issues of accessibility…or making sure your content is analyzable by search engines. I’ll spare you my old man speech about how this is an absurdist way of achieving content/UI separation. :-/)
When I was using <script> tags to load my 3rd party library dependencies and the $(document).ready to run the jQuery UI voodoo, the user never saw the vanilla ugly HTML. Now that I’m using RequireJs, the page.js file lags and loads asynchronously after the HTML…waiting for libraries that aren’t really needed for the DOMready handling. The slower server makes this look really awful.
I could of course use CSS styling to hide the ugliness at the outset, and overlay with a “Loading…” graphic until the UI was ready. That’s what came to mind first, and a similar approach is suggested here:
Jquery UI interface looks ugly before document.ready
(Note: It seems like such a common problem that I’d almost think there’d be a RequireJs plugin that went ahead and did this. Is there?)
In any case, I didn’t seem to have to worry about this before…and I’m wondering if I’m missing some simpler solution. How do you keep users from seeing “ugly” HTML if you’re using RequireJs?
I’m with you that you should do some CSS wizardry and then in RequireJs’s “kick it off” script, hide it. You should also consider SEO impact and JavaScript disabled scenarios.
Remember, at the end of the day, it’s just HTML, CSS, and JavaScript. What ever templating / code generation system you use to get you there, at the end of the day, it’s just HTML content, styled with CSS, and animated with JavaScript.