28 February 2017

5 JavaScript Tips for Visualforce Pros

Visualforce is not going to die and we know that. Though, JavaScript will be walking all over it, so brace yourself!

It's true

Over the last few years we've seen an exponential growth of JavaScript code lurking throughout Visualforce Pages, Sidebar Components (do you remember those hacks?), even end-to-end applications built with minimal use of the native stuff of the platform. With the announcement of the #Lightning Experience, more and more developers became eager to learn JavaScript in order to move forward. Let's be honest (and I don't care how much you hate it), but JavaScript is the future, at least for a little while. Having said that, if you're writing code, any kind of code, on any platform, it's kind of essential to know at least a little bit of JavaScript. It's literally everywhere on the web, and it does come handy in your day-to-day tasks (like selecting all check-boxes in the profile settings page :) ).

If you've been writing a lot of Visualforce in the past and you decided to meet new friends like JavaScript, here are some tips which might be helpful for you new adventure:

1) KISS (Keep It Simple, Stupid)

    Sounds familiar? It's one of those things that work in most cases. Not always a library or a framework is required to make something happen. Sometimes all you need to do is write a few more lines of extra code rather than importing a whole library into your page. Developers tend to get comfortable with libraries like jQuery and often forget the power and control of pure JavaScript. There are exceptions of course, like a cross-browser support issues and such, in which you're better off using a library, but try to stick to raw JavaScript for the simple things (changing a style of an element, showing/hiding a div etc.) - you have more power in your hands, more control over the DOM and faster loading times.

I've seen some weird manipulations of the DOM with certain libraries because there isn't a specific function to complete something. In these cases the code looks rather confusing. Even though you're saving a few lines of code, you'll find it a lot harder to maintain that going forward.

2) Let it Loose

    Step out from the traditional Visualforce development and out of the box components. Forget about the Visualforce syntax and those XML-like tags. Sometimes all you need to have in your Visualforce page is <apex:page> and </apex:page>. Everything in between can HTML/CSS/JavaScript. This will allow you to create much better UI and UX. There are already a lot of tools (even officially supported by Salesforce) to make developing such pages easier. Check out the following:

    - JavaScript Remoting
    - Remote Objects
    - JavaScript REST Toolkit (ForceTK)
    - Salesforce Lightning Design System

3) Lightning Out

    Coming into the #Lightning era and knowing Visualforce is not going to die, often we have to build Visualforce pages as best solutions to a given problem, though this time it's a bonus if the page looks and feels like Salesforce Lightning. As previously mentioned we have the SLDS available to help us achieve that, but on top of that there is another cool feature which gets overlooked by many, and that is Lightning Out. You might already have the Lightning component built for your Lightning Experience, or a component has already been installed via AppExchange - might as well just bring it into your Visualforce page rather than re-inventing the wheel. This is a very powerful feature.

4) Harness the Power of Single Page Apps

    I'm not sure what the next big thing is, but I'm sure Single Page Apps won't go away any time soon. Given the number of frameworks out there (Angular, Ember, Knockout, Meteor and more) which support this architecture, you can build some really complex end-to-end solutions which run inside Visualforce, yet perform great. Don't forget, JavaScript runs on the client side!

Use CSS frameworks alongside this and you'll be able to make your solution mobile ready with a little bit of extra effort.

5) Experiment, Get Out of Your Comfort Zone

    Read #5

No comments:

Post a Comment