Sunday, January 15, 2017

JavaScript Tips for Visualforce Developers

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

In my initial days I still remember, it was really difficult to learn JavaScript. To me, Javascript was more like a "side" language which can help implementing those functionalities which can't be delivered by server side programming - such as DOM manipulations, browser events and things like that. So for me sending data between server and client was always a GET and POST.

But I realized the power of JavaScript very soon. Trust me, with JavaScript, you can do so many things you can't even imagine. You can not only do Client Side operations, you can perform server-side logics as well. Yes, you hear it correctly. JavaScript for Server Side Programming. With the "node.js"  you can perform server-side computations as well. But there is even more. We can now build Isomorphic applications as well. With an Isomorphic application, your initial request from the web browser will be handled by the server, but after that, any subsequent requests will be handled by the client. I will not get into the detail of isomorphic applications here. That will take the entire blog post, which is not the intention here. You can check the details about the Isomorphic application here.

We all know that Salesforce introduced Lightning which is the new way of developing applications using aura framework. Now you can build Lightning components which can be used to build SPA(Single Page Application), Record Detail Pages, Home Pages etc. Lightning brings a development paradigm shift from traditional Visualforce+Apex centric development. But as we all know Visualforce is very matured and there are so many customers using Visualforce to build/enhance their applications. So Visualforce is definitely not going away. But as per the recent trend from Salesforce, it seems like most of the new features will be delivered in Lightning (That is now the main focus area of Salesforce) and bug fixes/critical enhancement will be delivered for Visualforce. But since Visualforce is not going anyway and I know there are so many customers which still feel more comfortable with Visualforce page, so putting your effort to learn Visualforce page still makes sense to me. With Visualforce, customizing the application as per customer's branding and requirement sometimes become really a challenging work and we need to take the help of JavaScript and other model JavaScript libraries like Jquery, AngularJs etc.

So I would like to share my experience regarding working with JavaScript and Visualforce page. Let's get started -

Tip # 1 - Learn JavaScript
There is no alternative of learning JavaScript. There are many resources available which you can utilize to learn as well as enhance your JavaScript knowledge. I am sharing few of them below -
Along with learning JavaScript, you should learn some browser tools as well. Chrome DevTools for Chrome browser is probably the most used tools. With Chrome DevTools you can use some of the really advanced as well as helpful features such as - Interactive Debugging, Inspect Elements, Device Emulation, Performance Profilings, JavaScript CPU Profiling etc.

Tip # 2 - Put your JavaScript in Static Resource
As per best practice, you should put your JavaScript in Static Resource. It will minimize the load time of the page. You can access JavaScript from Static Resource in the below way -

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 -

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.


Post a Comment