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:

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 my new course on Pluralsight, which has an entire module about Base Lightning Components.