Where is the best places to put my JS

DAZ

unread,

Aug 7, 2011, 9:34:17 AM8/7/11

to RightJS

Everywhere I look there is different advice about where to put JS
files. I was just wondering if there was any 'best practice' for using
Right JS - should it go in the head or at the bottom of the page or
somewhere else?

If the JS files go in the head of the page, is RightJS able to access
html elements (since the page will not have loaded)

cheers,

DAZ

Nikolay Nemshilov

unread,

Aug 8, 2011, 12:19:47 AM8/8/11

to rig...@googlegroups.com

Keep 'em in the head. This whole talk about placing javascript in the bottom is from jQuery dorks, it became so huge that started to block the main content. You can try the same with rightjs but I doubt you will really see any difference with a naked eye.

--

Thanks,

Nikolay

--
You received this message because you are subscribed to the Google Groups "RightJS" group.
To post to this group, send email to rig...@googlegroups.com.
To unsubscribe from this group, send email to rightjs+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rightjs?hl=en.

DAZ

unread,

Aug 8, 2011, 3:07:45 AM8/8/11

to RightJS

Thanks for clarifying.

So should the order be:

right.js
right-ui.js
app.js

All in the head of the document.

Will there be any issues when referencing ids of html elements before
the page is loaded in app.js? Is there an equivalent onReady function
in RightJS that I need to use?

cheers,

DAZ

Nikolay Nemshilov

unread,

Aug 8, 2011, 3:22:21 AM8/8/11

to rig...@googlegroups.com

The order is correct. Regarding the IDs, it depends where you insert your javascript. if on top then clearly you need to use UJS or onReady hooks, if the script is at the bottom of the page then it will see all the page ids from there.

Personally me, I would use CDN, scripts in the head and UJS. If things get too large and _really_ slow down the pages I'd use an async loader.

There is only one case why I would insert scripts in the body, when I need to initialize a complex widget on some element in a loading time. Like say tabs. Normally you have them in onReady hook and there is a slight delay between the page-load and script initialization. So I might insert a little initialization script right below the tabs UL constructions so that they popped up with all the styles right away as if they were there from the beginning.

Everything else can be handled with UJS and have better effect than if you insert your scripts at the bottom, because UJS work right away and there is no delay between the page load and scripts initialization.

--

Thanks,

Nikolay

DAZ

unread,

Aug 8, 2011, 3:57:00 AM8/8/11

to RightJS

Thanks for such an in-depth answer - it's great to have an expert's
advice about the best way to do things like this.

So, for quick initialization you mean do this (taken from one of your
previous replies):
<html>
<head>
<script src="right.js"></script>
<script src="right-tabs.js"></script>
</head>
<body>
<ul id="my-tabs">
.....
</ul>
<script>new RightJS.Tabs('my-tabs')</script>
the rest of the content
</body>
</html>

Also, what is an async loader?

Thanks again,

DAZ

Nikolay Nemshilov

unread,

Aug 8, 2011, 4:07:25 AM8/8/11

to rig...@googlegroups.com

Yes, the example is correct.

Async loader for example http://requirejs.org

But you really should double check what are you actually optimize. If your scripts feel slow there is a good chance that it's the scripts logic you need to optimize, rather than the content loading time. RightJS weighs just 15k and when loaded from the CDN it's almost invisible to the user. If there is the onRedy delay in initialization you can use the trick you displayed in your example, it will make it as fast as it even possible. Everything else might be in your script logic itself, you might do some heavy stuff in there repeatedly or something like that, it usually doesn't have anything to do with the script loading itself.

--

Thanks,

Nikolay

DAZ

unread,

Aug 9, 2011, 3:43:32 AM8/9/11

to RightJS

Thanks for the link and advice Nikolay - very useful.

DAZ

On Aug 8, 9:07 am, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> Yes, the example is correct.
>

> Async loader for examplehttp://requirejs.org

Reply all

Reply to author

Forward