Code editor with flames

Hot JavaScript tips for Visualforce Developers!

The Visualforce framework abstracts away a lot of the heavy lifting of the underlying JavaScript necessary for Visualforce pages to function correctly. Visualforce developers can produce a whole lot of JavaScript without ever actually writing a single line of it by making use of built-in features like apex:commandButton, apex:actionFunction, etc. However, it is becoming more commonplace for Visualforce developers to write their own custom JavaScript or entire applications that are largely JavaScript-centric. This post contains some useful JavaScript tips for Visualforce developers.

Tip #1 – Learn the browser tools

Web development has become ubiquitous and browsers have first class developer tools available that are extremely helpful. Chrome DevTools for the Google Chrome browser is perhaps the most used of the tools. There are many different features such as interactive debugging and inspecting generated source that will be more commonly used, but there are also features such as device emulation, performance profiling, and more.

Visualforce page with Chrome DevTools open

Tip #2 – Use 3rd party libraries

If you are working on any substantial JavaScript work you should strongly consider using a 3rd party library. Sure, the one off simple alerts or confirms don’t require it, but anytime you find yourself writing more and more code to manipulate the DOM, create components such as modal dialogs, etc., you should stop and look for a 3rd party library. These days jQuery is ubiquitous and it is almost expected that if you know JavaScript you know jQuery. Additionally, if you find yourself writing loads of jQuery, you should investigate whether a heavier framework, such as AngularJS, with two way binding and other features might be beneficial. Developing AngularJS and other Single-page applications inside of Salesforce can be of great benefit.

Tip #3 – Follow an efficient development process

If your process for developing JavaScript in Visualforce is to unzip a static resource, change code in it, zip it back up, and then upload it you are doing it wrong. MavensMate has a resource bundles feature that allows direct editing of the files and makes the uploading process transparent. For larger projects (e.g., Angular) it is worth investing in a process that allows local JavaScript development. Tools such as grunt and gulp can be helpful with this and you can find many articles about how to get going with a more advanced development process.

MavensMate showing Deploy Resource Bundle

Tip #4 – Use Visualforce encoding functions

The JSENCODE and JSINHTMLENCODE functions should be used to prevent cross-site scripting and to handle programming errors due to data. The following example shows how an error can occur and how using an encoding function would prevent the error.

In the BAD example, the x variable string is closed by the apostrophe in Pete’s place. In the OK example, the apostorphe will be escaped by the JSINHTMLENCODE function and the string will be closed with the expected closing apostrophe.

Additionally, avoid using escape=”false” on any apex:outputText elements, unless you are certain whatever will be outputted is safe.

Tip #5 – Always validate on the server

If you are developing JavaScript heavy applications or even just a small amount of JavaScript you will often want to validate user input before sending it to the server (i.e., an Apex controller). This should not take the place of validation performed in the Apex controller, validation rules, triggers, or other non JavaScript contexts. Since the JavaScript runs in the browser a savvy (and possibly nefarious) user may be able to bypass those validations. A solid design should account for that.

Bonus Tip – Use the Salesforce documentation

The Visualforce Developer Guide has sections on on best practices for JavaScript related development in Visualforce. Check them out!

2 thoughts on “Hot JavaScript tips for Visualforce Developers!

  1. Now that we have our files served up, we can use a bit of trickery to load from our little web server when developing locally, but then use the static resources in all the other environments. There are a lot of ways to actually lay this out, but for me, I will be using two sets of components so my CSS loads in the head and my JavaScript loads in the footer.

Leave a Reply

Your email address will not be published. Required fields are marked *