Javascript code conventions

Here is how we are using Javascript when coding for Beansight (this article is a draft)

It also details how we deal with our web framework: Play! Framework.


Available globally :

  • jQuery
  • jQuery UI
  • jQuery validate

If a plugin needs to be used on very few pages, use #{set ‘moreScripts’ } of the Play! Framework

Code Convention

Read and try to use every convention described one this page.

  • Javascript code should not be in the HTML body. Put javascript code in beansight.js. If your code should be executed after the page has been created, put it in $(document).ready(function() { of beansight.js

Specific to the Play! Framework

Actions URL

URLs to Play! actions are generated by Play!, thus they cannot be in beansight.js because this file is not generated.
A way to generate Play! action URLs in the .js file is by doing this :

in main.html :

    <!-- define here the actions -->
    <script type="text/javascript">
    var agreeAction = #{jsAction @Application.agree(':insightId') /};

in beansight.js :

agreeAction({'insightId': insightId})

generates the action URL.


Messages are generated by Play! depending on the current language, but beansight.js cannot be generated.

messages must be written in /public/javascripts/i18n/XX.js
add a line in these files:

yourstringid : “My String”,

in Javascript code, to use a string, do :


How does it works ?
In main.html, this line loads the right message file :

    <!-- load the right i18n file -->
    <script src="/public/javascripts/i18n/&{'i18n'}.js" type="text/javascript" charset="utf-8"></script>

This mechanism should be improved: defining a default language, fallback to default if the string is not found.



  • use breakpoints
  • watch the console for errors
  • watch the AJAX requests


JSLint, a Javascript validator can be helpfull (not used for the moment)


Google’s guidelines :
Understand closures :

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s