Post 3 – Building Your First Lightning Web Component for Salesforce Series

This will be the third of a series of posts I will be doing over the next few weeks. They will all lead up to the introduction of my new course titled, “Building Your First Lightning Web Component for Salesforce” from Pluralsight. These posts will contain code snippets of the code used in the course, but will not include all the tips and best practices about using SFDX, along with the way I personally approach teaching in my video courses.

You also have to realize that the solution is built in stages and so the code you see here is not exactly what you will see by the end of the next module. For all that, you will just have to wait and watch the course, which I hope you do.

And Finally, I know there has been a big delay between the first two posts and these remaining posts, but I promise you that the delay will have been worth the wait. I am VERY proud of how this course is turning out and feel like it will be my best yet. 

Component Design

LWC’s are similar to Aura components in the fact that you should consider each component as an application building block. And just like with Aura components, most LWC’s will contain many smaller, nested components. The biggest difference is that the communication patterns between Aura components and LWC’s is VERY different.

LWC Nested Composition

NestedComposition

In this course, we will actually be creating multiple LWC components that demonstrate a nested pattern. At the outermost layer we will have a Lightning App Page and inside of that will be an owner or container component. The owner can contain other components, which also contain other components. What is happening here is that we have a parent-child relationship going on and that is very important is determining how data is passed between LWC components.

Creating the Owner Component

At first this component (which we will name myFirstLWC) will just contain placeholder text for where the two components it will contain will ultimately reside. Here is the HTML we will use for now:

<template>
    <div class="c-container">
            <lightning-layout multiple-rows="true">
                <lightning-layout-item padding="around-small" size="12">
                    <lightning-layout>
                        <lightning-layout-item padding="around-small" size="6">
                            <div class="slds-box slds-theme_default">
                                <h2>TO DO: Add List LWC Component here</h2>
                            </div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="6">
                            <div class="page-section page-main">
                                <h2>TO DO: Add Map LWC Component here</h2>
                            </div>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-layout-item>
            </lightning-layout>
        </div>
</template>

You will also need to modify the metadata file so it exposes this component (but ONLY this component since it is the owner) to the Lightning App Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyFirstLWC">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>     
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

  1. Type “Lightning App” in Quick Find and select Lightning App Builder.
  2. Click New to start the Wizard.
  3. Leave the default on App Page and click Next.
  4. Enter the label “Lead Locator” and click Next.
  5. Select One Region and click Finish.
  6. In the Builder, scroll down to to the Custom List and drag the myFirstLWC onto the design surface.
  7. Click Save.
  8. Click Activate when prompted.
  9. From the Activation Wizard, accept the defaults, and select the Lightning Experience tab.
  10. Select Sales and click Add Page to app.
  11. Click Save.
  12. Click Back to return to Setup.
  13. Click the App Launcher and select the Sales app.You should see the Lead Locator app and you should select it to see your very basic app so far.

Creating the LeadList Component

The Here is the HTML for our leadList component. Notice that it contains two other nested components. One is a Lightning base component called lightning-input and the other is a custom one yet to be created called lead-list-item.

<template>
    <lightning-card title="Lead Search" icon-name="standard:search" class="slds--around_medium">
        <div class="slds-box slds-theme_default">
            <lightning-input
                label="Search Term"
                variant="label-hidden"
                placeholder="Search by name, phone, website, or address"
                type="text"
                value={searchTerm}
                onchange={handleSearchTermChange}>
            </lightning-input>
            <h3>Leads for {searchTerm}</h3>
        </div>
        <div class="slds-m-around_small">
            <template if:true={leads}>
                <template for:each={leads} for:item="lead">
                    <c-lead-list-item key={lead.Id} lead={lead} ></c-lead-list-item> 
                </template>
            </template>
        </div>
    </lightning-card>
</template>

Since this module is only about Composition and not about data, the JavaScript for this component will just contain some static JSON code to represent the lead data. It will also use the Track decorators for the leads array and the searchTerm, which allow you to keep track of a properties value when it is re-rendered.

Most importantly, it will follow best practices and use the simplest way to communicate with events by using a standard CustomEvent called newsearch.

import { LightningElement, track} from 'lwc';

export default class LeadList extends (LightningElement) {
    @track leads =[];
    @track searchTerm;

    handleSearchTermChange(event) {
        this.searchTerm = event.target.value;
        const selectedEvent = new CustomEvent('newsearch', {detail: this.searchTerm});
        this.dispatchEvent(selectedEvent);
    }

    leads = [
        {
            "Id": "LeadRef1",
            "Name": "Bertha Boxer",
            "Title": "Director of Vendor Relations",
            "Company": "Farmers Coop. of Florida",
            "Street": "321 Westcott Building",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32306"
        },
        {
            "Id": "LeadRef2",
            "Name": "Phyllis Cotton",
            "Title": "CFO",
            "Company": "Chamber of Commerce",
            "Street": "300 E Park Ave",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32301"
        },
        {
            "Id": "LeadRef3",
            "Name": "Jeff Glimpse",
            "Title": "SVP, Procurement",
            "Company": "Tallahassee Taxes",
            "Street": "1327 Colorado St",
            "City": "Tallahassee",
            "State": "FL",
            "PostalCode": "32304"
        }
    ];

}

 Modifying the Owner Component

Since we added a CustomEvent to the leadList component, we will need to add some JavaScript to the owner component, myFirstLWC that will handle this event.

import { LightningElement, track } from 'lwc';

export default class MyFirstLWC extends LightningElement {
    @track searchTerm;

    handleNewSearch(event) {
        this.searchTerm = event.target.value; 
    }
}

We will also need to modify the HTML so that we remove the placeholder text for the leadList component. Notice though how it is named. All LWC’s will be rendered with the c namespace, followed by a hyphen and then the component name, which is also separated by a hyphen. LWC knows that the leadList component is two words because we used kebab or camel case when naming it. This is a commonly used HTML standard and it means that the component must start with a lowercase letter and the other letter must be capitalized with no spaces in between, which is how we named the leadList component.

<c-lead-list onnewsearch={handleNewSearch}></c-lead-list>

Creating the leadListItem Component

This is just a very basic component that will display the results of the search. Not much to it for now.

<template>
    <lightning-layout vertical-align="center">
        <lightning-layout-item padding="around-small">
            <p>{lead.Name}</p>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <p>{lead.Title}</p>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <p>{lead.Company}</p>
        </lightning-layout-item>
    </lightning-layout>
</template>

And here is the JavaScript for that component. It will use the api decorator since the lead that is passed to it is a public property.

import { LightningElement, api } from 'lwc';

export default class LeadListItem extends LightningElement {
    @api lead;
}

So that is all we have for now. If you push all the code we have here and go to do a search, you should see the term you type displayed right below it, but not much else is happening yet. But stay tuned for the next post, because that is where all the magic will happen and the solution will come together.

Post 2 – Building Your First Lightning Web Component for Salesforce Series

This will be the second of a series of posts I will be doing over the next few weeks. They will all lead up to the introduction of my new course titled, “Building Your First Lightning Web Component for Salesforce” from Pluralsight.

Setting Up Your Development Environment (in 5 somewhat easy steps)

Step 1: Signup for a Developer Org

I know you may already have one of these, but  I suggest you sign up for another one since this will be used primarily as a DevHub. You go can signup here.

The primary function of the DevHub is to create and manage scratch orgs. To enable the DevHub, go to Setup and type Dev in the Quick Find Box and go to the DevHub Page. Click the Enable button and just remember that once enabled, you cannot disable a DevHub org.

Step 2: Install the latest version of Visual Studio CodeVSCode

Even if you already have Visual Studio Code running on your machine, I suggest you to download and install this version by going here.

This is this is the IDE that Salesforce has chosen to recommend and fully support for LWC.

Step 3: Install the Salesforce CLI

The CLI, or Command Line Interface helps to simplify Salesforce development by allowing you as a developer to pretty much do everything you need to do to develop, test and deploy your code.

Be aware that unlike the rest of Salesforce,  the CLI is updated weekly.  You can download the version for your operating system here. Just remember to run the sfdx update command frequently so you know you have the latest version.

Step 4: Install the Salesforce Extension Pack for Visual Studio Code

To get this installed, you should launch Visual Studio Code and when you do,you will want to start by clicking the extensions icon on the left toolbar. If you start to type in Salesforce, you should see a list of all the Salesforce extensions. For now, you will want to click install for the Salesforce Extension Pack.

SalesforceCLI

Step 5: Install the Java Platform Standard Edition Development Kit

This can be found on the Oracle website and you will want to make sure you have installed the latest version 8 or 11 for your particular operating system. During the installation, you will need to ensure that the install points to the directories listed here for either Windows or the mac:

  • Windows: C:\Program Files\Java\jdk1.8.0_221.jdk\
  • MacOS: /Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home.

Once the installation is complete you will also need to change a setting in VS Code to reflect this. You do this by going to File, Preferences and Settings. This is where you will point VS code to the right Java install. Enter apex java and select Salesforcedx-vscode-apex. Notice that the path here is not the one you installed to.

UPDATED Instructions below:

So,we will need to change this. You can do that by clicking on the input box, right below the wrong setting and then entering the correct one for your operating system. I am on Windows here. And finally you will relaunch VS Code.

After you re-launch, go to the terminal and type java -version and you should see the output like below.

SettingsJava

I know this seems like a pain, but there are some features in the Salesforce Extension pack that rely on this SDK, so it is important that you install it.

That’s it (Phew)…

See you next week, when we will be talking about composition and communication of your LWC’s.

Relax, here are some important things to know about Lightning Web Components (LWC)

On December 13, 2018, Salesforce announced the upcoming release of Lightning Web Components at Salesforce World Tour in New York. In a nutshell, Lightning Web Components is a new programming model that represents a big shift in Salesforce development towards web components and modern JavaScript development.

If you are an existing Salesforce developer, then that last statement may have made you cringe a bit and you may now be thinking:

“Big Shift? Wait…What?”

“Didn’t we just go through a big shift with Lightning Components?”

“Are you saying I have to learn something new again? I am still not even sure how Lightning Components work. Please tell me you are kidding!”

To help ease your discomfort, or even if you are excited about the announcement, I will attempt to answer some questions you may have:

Aura Components aren’t going away and will work very well with LWC’s

And now you might be asking, “Wait, what are Aura Components?”

“Aura Components” are what was previously known as “Lightning Components”. They will now be known as Aura Components because there was a need to distinguish them from the new Lightning Web Components. The name “Aura” is used because these components are based on the Aura framework. Lightning Web Components are named as such because they are based on standard web components.

Basically, there are now two ways to develop Lightning components:

  1. Aura components – what you have known as lightning components
  2. Lightning Web Components – the new way to create lightning components

So if you have invested a lot of time learning about Lightning Components, don’t worry. Those components are not going anywhere and you can continue to create and use them. At the same time, you can start to learn about the new Lightning Web Components and once you are ready you can start building either kind, or both. The really cool thing is that LWC’s are designed to work together with aura components.

Components you build with LWC should render faster

LWC’s will take advantage of native web standards that exist in the browser. This means there is no added abstraction layer, like the Aura framework (or any framework for that matter) to slow things down. It also means LWC’s will most likely render faster than aura components.

That does not mean that aura components are bad and should be avoided. However, in cases where performance is really important to a components success, you should probably consider LWC’s.

Developing LWC’s is fun!

I have been fortunate to be part of the pilot for LWC’s and the overwhelming feedback that has been coming in from all the other people that are part of the pilot is that “Developing LWC’s is fun”. One reason it is fun, is because developers are able to finally use modern JavaScript syntax that has been off limits to aura components. And if you are not sure what I am talking about with modern JavaScript, check out this post.

As an added bonus, because LWC’s utilize common web standards, it should be easier to find developers with the skills to develop LWC’s. It might also be easier to transition existing developers to using LWC’s because there is no additional framework to learn.

You need to check out the new and updated apps in the Sample Gallery

You may not know this, but the Developer Relations team hosts a very cool sample app gallery available here. This app gallery features LWC updated versions of all the sample apps you have grown to love (like Dreamhouse and Northern Trail Outfitters), but it also includes two new sample apps you will love even more:

  1. Recipes – This app is all about bite-sized (30 lines of code or less) LWC recipes. Once installed you will have access to several tabs and each one features multiple LWC’s that highlight a very specific use case. The best part about this app is that you can rest assured that best practices were considered right from the start. Feel free to use this as the starting point for all your new LWC’s.

Recipes.png

  1. E-Bikes – This represents what an actual retailer might build using LWC’s. It shows off all the best of LWC’s in a real-world kind of application.

ebikes.png

 

You cannot create LWC’s in Dev Console and need to use VS Code and the extensions

Sorry to say, but you cannot create LWC’s in Developer Console. For now (and Safe harbor, note the word “now”), you will need to use Visual Studio Code and the CLI extensions for SalesforceDX. Now, just in case you have not dipped your toes into the world of SalesforceDX, this represents your perfect opportunity to get started. I would suggest you start by checking out this great trail on Trailhead.

Going GA in Spring 19 – At that time it will support LEX, Mobile App and Communities

LWC’s will not be generally available until the release of Spring 19, which should be in February 2019. But, there is no reason to wait until then. You can sign up for a pre-release org now and your first step after that should be to go to Trailhead and earn the Quick Start: Lightning Web Components badge. It only takes 20 minutes and it will get you setup with everything you need to start building your own LWC’s.

Hopefully, you are feeling a little less apprehensive about this shift. It truly is a GREAT time to be a developer and I have no doubt that in time you will come to love creating LWC’s. Have fun!!!

Check out the Salesforce API Explorer

In an attempt to make things easier for us developers, the Developer Relations group has created a nice little tool called the Salesforce API Explorer.

Screen Shot 2018-08-23 at 1.48.18 PM

What It Includes Now

The first thing you should know about this tool is that it is still in Developer Preview and the team that created it is actively seeking feedback on how it can be improved. You can submit feedback right from the Send us Feedback link at the top.

As of this writing, there are only the following two API’s featured here:

  • Force.com REST API
  • Marketing Cloud REST API

How You Can Help

Remember when I said this was still in Preview mode? Well, you can easily vote on which API’s will be included next by clicking the like button underneath the API’s listed in the “Which API’s would you like to see here next?” section. Please take the time to go through the list and vote for which ones you would like to see appear next. Come on. You can’t complain about a lack of good documentation without taking the time to be part of a solution.

Why It is So Cool

This Explorer tool is not only cool because of the fact that it will list all the API’s in one place in a nice readable way. But, it is VERY cool when you consider the nice “Try it now” feature that lets you see the results of executing any of the API calls against your developer org.  You just need to provide credentials for your org.

You will then select a Resource, such as Account and then an endpoint, such as FindAccountById. Not only does this show you all the documentation you need for that endpoint, but you can try it out by doing the following:

  1. Click Try it Now
  2. Enter any path parameters (if needed), such as the Account ID
  3. Click Execute
  4. A Live response appears on the right

Screen Shot 2018-08-23 at 6.35.09 PM.png

Boom! You don’t have to go into workbench. You can do everything you need right here in the explorer tool. Cool, right?

Why the recordForm component is so AWESOME!!!

The Summer 18 Salesforce release is almost here, and as usual it contains lots of great features. But one new feature, the lightning:recordForm component has not gotten the coverage I think it deserves. So, I wanted you all to know just how cool this new Base Lightning Component really is, by showing you the code for a Quick Contact component

To truly appreciate how far we have come with Lightning development, I would have to show you what the equivalent code without Base Components looked like. But, that would be like bringing you back to the stone ages and who needs that. Instead I will just point you to the code used to build something similar using what was available before the new recordForm component.

And to see that, I will direct you to a great tutorial on GitHub that was designed to show you how to Build Lightning Components with Salesforce DX. And if you have not started using Salesforce DX yet (and I cannot imagine why you have not) then this is the perfect opportunity to get started. In this step-by-step tutorial, you will be led through creating 3 lightning components:

Component # 1 – quickContactView

Uses the lightning:recordViewForm and several lightning:outputField base components to create a read-only version of the Quick Contact Form.
Screen Shot 2018-07-05 at 10.28.48 AM

Component # 2 – quickContactEdit

Uses the lightning:recordEditForm and several lightning:inputField base components to create a editable version of the Quick Contact Form.
Screen Shot 2018-07-05 at 10.30.13 AM

Component # 3 – quickContactViewEdit

Uses aura:if‘s and a lightning:buttonStateful base components to toggle between the quickContactView and quickContactEdit components.
Screen Shot 2018-07-05 at 10.31.32 AM
The result of using these 3 components, is a form that looks like the following:

Screen Shot 2018-05-28 at 10.14.26 AM

In this version of the component, the user must first click the “Click to Edit” button before they are able to edit the contact fields. This all works fine, but wouldn’t it be better if you could achieve this same functionality by creating only one component?

Ok, you don’t really have to answer that…because the answer is obviously, “YES!”.

The Single Component Alternative

Good news. As of the Summer 18 release, you will be able to do exactly that by using the newly available lightning:recordForm base lightning component. Using it is dead simple and involves code such as the following:
Screen Shot 2018-07-05 at 10.40.50 AM

In that code snippet, I only had to use one attribute and one recordForm base lightning component in a single component to reproduce all the functionality that previously required 3 separate components. BAM! That is practically magic.

So hopefully now you get why this new base lightning component is perhaps the coolest one ever.

Hope you get a chance to check it out and please let me know what you think.

If you found this article useful, you might want to checkout my latest course on Pluralsight titled, Lightning Component Development Best Practices, where I talk about base lightning components and a lot more.

Need Help Converting Your Classic JavaScript Buttons to Quick Actions?

In last weeks Lightning Keynote for TrailheaDX, Eric Jacobsen told everyone that an analysis done by his group showed that there are over 2 Million Javascript buttons in Salesforce Classic today.

WOW!!! That’s a lot of buttons that still need to be converted to Lightning Quick Actions.

This has been a not so fun task lingering over many Salesforce developer heads for quite some time. I imagine this one issue has been the main reason many Salesforce orgs have been hesitant to fully adopt Lightning.

So now my question to you is, “Do you think you need help converting your JavaScript buttons to Quick Actions?”

If you answered yes, then the good news is that the help is coming. Eric announced in that very same keynote that a new tool called the Lightning Configuration Converter will be available in late Spring 18.

The new tool will help you to identify those JS buttons that you still need to convert and then for some of them, will give you a simple way to convert them by using a single click. Yep! A single click!!!

Screen Shot 2018-04-08 at 5.15.28 PM

So that was the good news and now here is the bad news.  The bad news is that the tool is not quite available yet and even when it is, they are estimating that it will only convert about 20% of your buttons at first. But, it sounds like that number will possibly go up as time goes on. And let’s face it, 20% is still a lot better than 0%. So, I still think this a huge win for the Salesforce development community.

And here is some more good news. Right now what is available is a GitHub repo that contains 9 examples of commonly used JavaScript buttons and the code needed to convert those to Lightning Quick Actions. This covers some of the most common and sometimes complex scenarios where JS buttons are used, such as:

  • Showing a Dialogue
  • Redirecting to a URL conditionally
  • Performing Mass Updates

So check out the repo and wait for more news about the release of the new Lightning Configuration Converter.

Happy Converting…

Come Check out Managing Application State with SPA’s at TDX18

I am very honored to be participating as a panelist asking questions about Managing Application State with SPA’s. The session will be on Thursday, March 29, 2018 from 1-3:00 pm and is titled, “The Extracurricular: “Why Did That Do That?” Managing Application State w/ SPAs”.

It is a really cool format and one I think will be very fun and interactive (with lots of audience participation), so if you have any interest in this topic, I highly encourage you to attend. The main speaker is the incredible Matt Lacey and he will be talking about the challenges he has faced building a Visualforce application that used VF Remoting and React + Redux to manage application state.

The best part of this is it is not just your typical session in which the speaker just tells you a bunch of stuff and shows a bunch of boring slides. Not, this one is special. It will involve Matt briefly telling and showing us his app and then the rest of the time will be a very interactive discussion about managing application state that will involve not only the panelists and myself, but you the audience member as well. How super cool is that?

Ok, so if you are going to TDX18 and have some time on Thursday, please stop by.

And also be sure to check out Camp Quick Start  (that is where I will be most of the time), as well as the new and incredibly fun Robotics Ridge.

See you there…

Goodbye Force.com IDE Beta…Hello Visual Studio Code

Back in 2016, I wrote a post here about how the Force.com IDE was making an epic comeback, with support for Lightning.  At the time I was very excited to see that Salesforce was refocusing it’s efforts towards improving that tool in the form of a Beta. Even though the Force.com IDE was the original tool that Salesforce offered and it had a long history with the development community, it had failed to keep up with the bevy of tools now being offered by third-parties.

Fast forward to today and the recent announcement by Salesforce that the Force.com IDE Beta has been officially discontinued.

So where does that leave Salesforce developers?

Well, not as bad as you might think. Salesforce is not giving up on supporting a local IDE. Nor are they giving up on the original version of the Force.com IDE (at least not just yet). So far, only the new Beta will be discontinued.

It is just that they are focusing their efforts towards improvement of the Salesforce Extensions for Visual Studio (VS) Code. It just made no sense to support two tools and after analyzing feedback from the Beta of the Force.com IDE, the team had to make a clear choice and Salesforce Extensions for VS Code came up the winner.

I personally prefer Visual Studio Code and there is no question that it is easier to install than Eclipse (which was always a bit of a nightmare imho with all the required Java installs it required). I also like how intuitive it is and that I can use it to do all sorts of other modern development. If there is a popular modern language out there, you can safely bet that VS Code supports it.

If you have not had a chance to check it out yet, I highly suggest you do so and just remember to keep an open mind.

Also, be aware that Salesforce Extensions for VS Code does not yet support everything that the Force.com IDE does. Like I said earlier, the original Force.com IDE is not going away, just the newer Beta version which included support for Salesforce DX and Lightning. It is going to take some time for the development team to get all the features that the Force.com IDE offers into Salesforce Extensions for VS Code.

But keep in mind, that VS Code is where they are headed, so if you have not yet checked out Visual Studio Code, now is the perfect time to do so. I think you will be pleasantly surprised and impressed with it.

And let me know what you think…

New Dream Job at Salesforce

THLogoI have very exciting news to share. The first day of Dreamforce will also be my first day as a member of the Trailhead team. I have accepted a job as a Technical Curriculum Engineer.

Doesn’t that just sound cool?

And the best part is that I will be working for the legendary, Jeff Douglas!!! Yep, that guy. The one and only. I bet you are way jealous now.

The thing that I love so much about Trailhead is the quality of the content they produce. I truly believe they are leading the way in terms of how to produce effective technical instructional material and I am just thrilled to be a part of it.

The thing I am most passionate about in life is the process of taking something that is very complex and difficult and presenting it in a way that is easily understandable to almost anyone. It is kind of like the ultimate crossword puzzle (and yes, I happen to love crossword puzzles).

As far as this blog and my courses at Pluralsight, we will have to see how that goes. I still have my latest course about Lightning Best Practices coming out soon (since I am almost finished with it). But after that is published, I may take a break for a while so I can really focus on my new and exciting job.

Cheers everyone,

Sara

 

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