Sara Has No Limits

Good Programmers Evaluate, Simplify, Automate and Document

Why Lightning Base Components are so Awesome

When Lightning development was first introduced, the Salesforce developers thought UI components (which you have probably seen used in a lot of sample code) would meet all the needs of component developers. They were wrong. Although the UI components, which include things like ui:inputText/ui:outputText, ui:button, ui:menu, ui:message are very useful, they have some serious drawbacks.

The biggest drawback is that they do not handle validation for you automatically. The component developer is responsible for adding JavaScript code needed to validate data entered into these components. Another big drawback with UI components is that they do not handle Salesforce Lightning Design System (SLDS) styling for you. You have to know which SLDS tags to use around your UI components.

To understand exactly what this means, consider a “very simple” component used only for creating new cases. This is what the component looks like when rendered:

Screen Shot 2017-03-03 at 2.51.39 PM.png

Using UI components, this is how much code is needed to validate this very simple component:

validateForm: function(component) {
  var validCase = true;
  var subjectField = component.find("Subject");
  if($A.util.isEmpty(subjectField.get("v.value"))) {
     validCase = false;
     subjectField.set("v.errors", [{message:"Subject can't be blank"}]);
   }
   else {
     subjectField.set("v.errors", null);
   }
   var reqNumberField = component.find("EngineeringReqNumber");
   if($A.util.isEmpty(reqNumberField.get("v.value"))) {
     validCase = false;
     reqNumberField.set("v.errors", [{message:"EngineeringReqNumber can't be blank"}]);
   }
   else {
     reqNumberField.set("v.errors", null);
   }
  // Verify we have a contact to attach it to
   var contact = component.get("v.contact");
   if($A.util.isEmpty(contact)) {
     validCase = false;
     console.log("Quick action context doesn't have a valid contact.");
   }
   return(validCase);
 }

In addition to having to add your own validation code to the JavaScript controller, you will have to know which SLDS (or Salesforce Lightning Design System) tags to use and this is not always so obvious.

Most developers I know do not want to have to spend the time learning which CSS tags to apply to get the styling they need. They just want things to work. Out of the box. Simple like.

I hear ya and so did the developers at Salesforce.

In Winter 17, Salesforce released a whole new set of components known as Base Lightning Components. Similar to the UI components, these components do something fundamentally different. The validation code and SLDS styling is built right in. All you have to do is add the markup to your page and waaaalaaa!

The page will render the same with styling and will have built-in validation, but the code will be so much simpler.

If you have not checked out the Base Lightning Components, you might also want to check out this very cool Salesforce webinar about Building Single Page Applications with Lightning Components.

Categories: Lightning

Tags: , ,

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s