When I started my career 10 years back, I was first introduced to Server Side Programming. I started developing applications using Embedded C/C++. Slowly I shifted my focus towards Client Side Programming. It always motivates me if I see the end-result of my development immediately. That is how I started digging into Client Side Programmings. I always love this below quote from one of my favorite programmers – Eric Elliott
- Code School – https://www.codeschool.com/learn/javascript
- Eloquent JavaScript – http://eloquentjavascript.net/
- Pluralsight – https://www.pluralsight.com/browse/software-development/javascript
- Introduction to Object-Oriented JavaScript – https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects
We have some real advantages by putting JavaScript in Static Resources. We all are familiar with merge syntax in JavaScript like below –
The above code looks very simple. But the there is a catch, by putting the above line we are making the JavaScript tightly coupled with VisualForce rendering. By tightly coupled, I mean if due to some reason the JavaScript is not processed by Visualforce rending engine, then the merge syntax will not be evaluated and in the Visualforce page it will be displayed as {!Case.CaseNumber} instead of the actual value.
If we move the JavaScript in Static Resource, then the same JavaScript will be loaded as an external file to the browser and browser will cache the external file. This means for every call, JavaScript will not be delivered to the browser, rather browser will use the cached JavaScript. External files are always included once the VisualForce page is finished rendering and delivered to the browser. So by adding JavaScripts in Static Resource, they will be delivered as an External file to the browser and those JavaScripts will be processed by the browser, not the VisualForce rendering engine.
I will always say that while doing development, you can keep your JavaScripts in the VisualForce page rather than in Static Resource. It will help you to debug and fix the issues quickly. But once this is done, please move all your JavaScript in Static Resource.
Tip # 3 – Avoid Cross-Site Scripting Issues
A developer should always use JSENCODE and JSINHTMLENCODE functions which will help to prevent cross-site scripting. Consider the below code:
Here if the value of the parameter emailAddress is alert(‘Your account is hacked!!’), then the above code will execute the JavaScript function. In the same way, any JavaScript can be executed to fetch some important information. To stop that we should use the JSENCODE function like below –
To learn more about Injection Vulnerability Prevention, please go through the below trailhead link –
https://trailhead.salesforce.com/modules/secdev_injection_vulnerabilities
Tip # 4 – Go For an Efficient Development Process
Working with JavaScript and Visualforce sometimes makes the life of a developer difficult as you need to change JavaScript to solve issues, zip it and upload the same and then test. And this process you may need to repeat quite a number of times. If you also face this same issue like me, then I would like to let you know that MavensMate has a solution for you i.e. resource bundles. Resource Bundles will allow you to direct editing of the files and makes the uploading process very easy. There are some tools as well which can help you as well like grunt or gulp. But I feel MavensMate is very easy to start with. Grunt and Gulp are more for the advanced stage.
Tip # 5 – Keep an eye on variable declaration
Always use JavaScript object and put all your variables inside those objects. This will help you to make sure that your declared variables are not getting overwritten by Global Namespace i.e. window object. So you should declare your variables always like –
Bonus Tips
A developer should read the best practices for JavaScript related in Visualforce Developer Guide.
With all the above tips, I hope it will help you to write efficient JavaScript code. Please let me know your comments. Thanks.