VanillaJs For Better Performance of Lightning Components

Posted on Updated on

Hi All,

Lightning is all about components. You can build applications by assembling components created by you and other developers. A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code.

If you have multiple Lightning Components on a Lightning Page/App with 3rd party libraries like jQuery,Bootstrap etc, you may face performance issues like slow loading, code conflicts, many others you don’t know.

Problems you may face while working with 3rd party libraries :

If you have 2 Lightning Components with different version of Libraries, they may conflict with each other.
If you are using same version, they may put unnecessary weight on Components which in turn load your component slowly.

So what could be the solution? The solution is to ensure that you really need to load 3rd party libraries or not.

Basically you should always avoid use of jQuery for very small things like getting element Id, Class, DOM manipulation and many others. To do these small things you have to import jQuery file in you component. Which will put unnecessary weight on your component.

Instead of this you can use getter setter methods provided by Framework or you can use VanillaJs.

You might be thinking what is “VanillaJs”?
Vanilla JavaScript is a fancy name developers have given to the core JavaScript and DOM API combined, and it is used to distinguish it from libraries such as jQuery.

VanillaJs is very easy to use, it is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. You can read more about here.

VanillaJs is faster than jQuery see below comparison.

vanilla

I know you may have to write few more lines of code in comparison to jQuery, but it is better than putting unnecessary weight on components by importing library.

Comparison of jQuery and Vanilla JS for basic DOM manipulation.

Class selectors

// jQuery
$('.myClass');

// VanillaJs 
document.getElementsByClassName('myClass');

ID selectors

// jQuery
$('#myID');

// VanillaJs
document.getElementById('myID');

Tags

// jQuery
$('div');

// VanillaJs
document.getElementsByTagName('div');

Add and Remove Class

// jQuery
$('div').addClass('myClass');

// VanillaJs
var div = document.querySelector('div');
div.classList.add('myClass');

// jQuery
$('div').removeClass('myClass');

// VanillaJs
var div = document.querySelector('div');
div.classList.remove('myClass');

Add and Remove Attribute

// jQuery
$('.myClass').attr('disabled', true);

// VanillaJs
document.querySelector('.myClass').setAttribute('disabled', true);

// jQuery
$('.myClass').removeAttr('disabled');

// VanillaJs
document.querySelector('.myClass').removeAttribute('disabled');

Hope you will find VanillaJs better than jQuery with Lightning Components.

Thanks šŸ™‚

Advertisements

8 thoughts on “VanillaJs For Better Performance of Lightning Components

    Abhinav Gupta said:
    January 30, 2016 at 3:49 am

    Nice post Balkishan and good point made with use cases about using Core JS.

    Like

    atulgupta31 said:
    January 30, 2016 at 4:43 pm

    Balkishan, point taken, but a couple of things,

    1. Certain Javascript methods like “queryselectorAll” fails to execute in Internet Explorer.
    2. Plus, there is inconsistency between what is supported and what is not between IE versions as well.
    3. On top of that, the real annoying thing is a lot of US Customers use IE to access Salesforce as part of their security compliance.

    All this gets me really afraid about my code failing somewhere.
    Though, if proper testing has been done, this scenario can be totally avoided.

    Jquery helps me get around all these issues. Just putting a point.

    Like

      balkishankachawa responded:
      January 31, 2016 at 6:53 am

      When you are working with jQuery it is hard to debug Errors and even jQuery did not show error on page or console. You can try with simple example you will not be able to see error even on console. But when you are working with core Javascript you will be able to debug your code easily. And one more thing jQuery may conflict with browsers but VanillaJs will not conflict.

      Like

        atulgupta31 said:
        February 1, 2016 at 8:01 am

        Yes that is correct Balkishan.

        I guess, we got tradeoffs in both the situations šŸ™‚

        Like

        balkishankachawa responded:
        February 1, 2016 at 9:47 am

        Yes, but for large apps and for component based frameworks like Lightning you should always avoid putting extra weight on your apps.

        Big companies like Facebook, Google, Youtube, Yahoo, Twitter, Amazon and many more are using component based architecture as well as they are also using VanillaJs.

        Like

    Jitendra Zaa said:
    January 30, 2016 at 7:30 pm

    Cool comparison balkrishana.
    My favourite Angularjs is missing though, however no doubt VanilaJs is way to go for Lightning Component.

    Like

      balkishankachawa responded:
      January 31, 2016 at 6:47 am

      I was trying to compare with AngularJs but Lightning is not supporting AngularJs for now.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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