How to Design and Build Better Lightning Web Components | Dreamforce 2025

You. Firstly, thank you for attending. I've tried to put as much of my experience into the next 20 minutes as possible, so hopefully you get something out of today's session by way of brief introduction. My name's Dave Norris. I'm a developer advocate at Salesforce. I've been with the company about 15 years now and became a certified technical architect about 12 years ago. I had a vision about five years ago that I wanted to build a lightning web component that was genuinely useful to a wide variety of audiences. And for my use case, I looked at the existing activity timeline, which is on the slide here, and I thought, how could we make it better? And there were three things that came out of what my instincts when I was using this component. Firstly, there was a limited time Spanish. It only went back about 18 months worth of data. It was really hard to spot clusters of activity. So you can see the timeline's very vertical, but the spaces between the tasks are the same. So I can't tell if that's a year gap or a day gap. And there was limited object support. So this is the thing I wanted most because the standard activity timeline, pots, tasks, events and that's it. So what about opportunities? What about assets? What about custom objects that I'd created? So in order to frame the presentation, I'm going to go into three pillars. Ideation, design and build and test and hint. The most important two are ideation and design. Even in the advent of Vibe coding and developer assistance. So we're going to start in Ideation. Five years ago, I did not have this available to me. Large language models did not exist. But the first thing I recommend you do before you start building anything, especially if you want to put it on the App Exchange. And that was my end goal in this use case is to research your ideas. So here I've written a prompt that I could use now, but I'm calling out the things that I think are most important when you research the Idea Exchange, because you all put your ideas for the standard timeline on the Idea Exchange, I can steal the best ones. I can also see if Salesforce is going to be building anything in the near future, because obviously I don't want to build it in the meantime. Then I'm going to search across the web app exchange and GitHub to see if anyone's built anything similar. So if you don't do this, you'll end up building something that probably already exists, or you'll start building it, realizing that there are libraries out there that could have helped you. So When I did this, I found these two existing applications. The one on the left is actually part of Health Cloud. It's a timeline that lets me scroll left and back. Shows me clusters of activity. Seems to do exactly what I'm interested in. Has a great user interface but isn't configurable. Specifically designed for Health Cloud use cases. And on the right I found on the AppExchange Universal timeline. Still there. That is very configurable. I could have plotted anything on Universal Timeline but you can see the UI is outdated. In fact, I believe that is still a VisualForce page that they've wrapped in an aura component just to make it work in lightning. When I searched GitHub, I liked the Health Cloud timeline, but I didn't really know where to start. Had that scrollable slider at the bottom and it was plotting records. Well, I found a JavaScript library called D3 allows you to do complex visualizations like this. This is actually from the GitHub repo. It's a gif that shows you what's possible. It's just letting me scroll through ace time series. That seems to be something along the lines of what I want to do in Salesforce. So by doing research I can then start saying, well, when I go into the design and build phase, this is probably the JavaScript library that I want to use. And then I come up with a minimum viable component. I need dynamic properties so things like title and height should be changeable. I should be able to zoom and scroll if I hover over a record. I should see the compact layout admins go to a lot of trouble to create their layouts. I need to reuse what they've done and not do something custom. Then I need to easily configure which objects are plotted. I need to take into account that someone's going to want to change icons and fields. Then in the idea Exchange, we knew roughly how far back in time people were interested in going based on people were saying we can only go back 18 months. We were planning for about 1,000 records, which we thought would be about three years worth of historical data. So once we've got that minimum viable component, I then move into design. I'm not building anything yet. I've got some ideas in my head and I know I'll use the D3 JavaScript library. I'm sure there are many developers in the audience that have either built because I am guilty of this or have seen a component in Salesforce that stands out like a sore thumb. And it's because they haven't used the Lightning design system. Now, the Lightning design system has a bunch of components to provide blueprints and guidelines to configure your user interfaces to look exactly like Salesforce's. This is what their components use. And you can see that there are a bunch of these things called base components. These base components, you can actually scroll down through them, you can see modals, progress bars. This is an example of a radio group and it will show you the attributes of those base components. And you can even change it on the website to see what would happen. If you change a certain attribute, how would it impact the base component on the screen? So the other thing that's important is prototyping. If you've got something mildly complicated, like we were trying to do here, scrolling backwards and forwards through time on the same website, you've got access to designer tools and they've provided you a library of components that you can use in figma. So if you are a Figma user, it looks a little bit like this. So those base components, it's just like using App Builder. If you're an administrator, you drag them and drop them into figma. Here I'm changing, I don't want to use an account, I want to use a contact. So it's not an account name anymore. We're going to update it to be a contact name. And then finally we don't want to use the account icon anymore. We can go and use the contact icon. And everything here is using the Lightning design system. So I can quickly mock up something that I can give to a user and say, is this going to meet your expectations? It's important because it picks up inconsistencies. Because once you start developing code, the time taken to remediate and do your code again to fix issues is extremely high. You want to fix those issues before you start build. So this is what we wanted our new timeline to look like. This was our mock up in Figma and people started calling out icon inconsistencies. There is a difference between the Lightning design System version one and version two. I don't know if people have been using that in their Salesforce instances, but we've gone from a square icon to a circular icon. So in our mockups we were still using the version one, but you can see that it looked inconsistent. Also highlighted things like we were planning to do filtering. So we had this in the mockup. This was a panel that was gonna pop out when someone clicked the filter. This was gonna be where we showed you all of the Custom and standard objects that you could plot on the timeline. But people said are you expecting me to click to unselect all of those or click to select? That's not a great user experience and you're plotting a date range on this timeline. So I'd expect to see the date range used at least, if not be able to change it so we could quickly fix those. In the prototyping stage, let's have an all type checkbox that will check all of those boxes underneath and deselect them and put in the time range, make it read only just to make our lives a little bit easier for version one. The other thing I needed to do as a developer is shift my mindset because everything I've been talking about up till now is how do we build a great user experience for people that will be using it? Which sort of sounds obvious in a way, but actually life in Lightning is a little bit different because it's not just the end users that's going to be using my timeline, it's going to be administrators. They will be the one dragging it onto an app builder page and they're going to be expecting to see properties that they can change at runtime because it should work across pages and I should be able to be flexible with sizes and titles. Equally developers, we're using base components like radio buttons, buttons, we're using panels, we're using cards, everything from the Lightning design system. But other developers might want to use my experience component, which is made up of many base components in their custom components. So my component just might be a small part of a much larger component. So what properties and events are developers going to expect to use? So you got to bear those three Personas in mind when you're developing a Lightning web component. And lastly, don't forget admins and developers when you're doing prototyping. So we even went to the effort of saying, well, this is a mock up of App Builder, it's in the Figma mockup libraries and we even configured on the right hand side what the app builder setup might look like. So we said we were going to allow you to change the parent record. So if you drag the timeline onto a case, but you wanted to see the related contact, that should be quite easy for an admin to do. You should be able to change the title, the height, how far back in time you want to see, how far in front you of forward in time do you want to see and even if you want to show today's date. So we had a think about this and we even asked people what they expected to see in those drop down boxes because if it's not intuitive then there's something fundamentally wrong that we need to change. All right, so we can get on to build and test. This is relatively straightforward. I think most people in the room will be familiar with these, but if you, if you're not, we'll go through them very quickly. Most people are probably still using an IDE of some point, maybe playing with CLI based code assistance to help them build. Salesforce provides a VS code extension now called agentforce Vibes to help you. And this isn't just the code assistant. It's a range of extensions to help you do things like analyze your code. Code formatting if you've got more than two developers on your team, I guarantee you they will have very strong opinions on how to format code. And that's not great. The more developers you have, the more variance you're going to have in how they've structured their code. So we need to come up with a standard way of formatting. So we're going to use an external library called Prettier. Then you need to automate quality gates. No one should be writing code without making sure it adheres to your standards. So we can use Code Analyzer to do that and testing. Most people know how to do Apex tests, but if you're writing Lightning web components, front end testing is important. Meta released an open source library called Jest that we use as a plugin at Salesforce. You should be testing your JavaScript as well. And there's also a Salesforce accessibility library to test for usability and accessibility requirements. Now I got bitten by this because if you look at the GitHub repo for my component, people have pointed out that it's not compatible with things like screen readers. So something I could have picked up a lot sooner. And then finally, everyone in the room is getting ready to ask AI for help, if they're not already. So agentforce Vibes is Salesforce's new extension that you can open up in a panel in an IDE and start playing around with it. But I'm sure many of you are using Cursor and Claude as well. We what I'm going to show you is a couple of things just to make sure that even if you're asking AI for help, that you understand what some of these tools do, because the last thing you want it to do is make any destructive changes to your code base and break something. So I've come up with a couple of really brief scenarios here. I formatted some code here with a SoQL statement here, and I'm returning an object which I've defined as an inner class. And I've deliberately formatted my code like this. Does anyone like the way I've structured this SoQL query? No. People do it very differently. If I gave it to three developers, they would probably structure that slightly differently. Each one of them probably equally good. There's no right or wrong here. But one thing I like about Prettier is it takes procrastination out of the decision because we can run a prompt called NPX prettier and then we're gonna ask it to actually overwrite. I can ask it to just check my code as well. And what you'll see on the right hand side is I didn't do anything. It's gone through everything I asked it to and formatted my SoQL statement and what I'm returning. So Prettier is very opinionated. And by that I mean there's not a lot of configuration options to do something different if you don't like it, but it makes sure your code base is completely consistent. The other thing that not a lot of people are doing, which they probably should be, is analyzing their code. So one of the VS code extensions allows you to run Code Analyzer. I'm running it via the CLI here, but the MCP server support for Agent Force Vibes also will do this. So I give it a target folder or a target class if I wanted to, and we can define a number of rules to run. We can expand this to make it a little bit easier to see. It's going to analyze those rules and then give me a number of violations found. So Here it's found 20 violations across two files. 8 moderate, 12 low. And it gives me a nice table showing me the severity, the rule, the location, and what's wrong with it. So even if you're starting to move into the world of AI, understanding what these tools do under the COVID is super important because they're going to make destructive changes to your code base. And you need to know what's going to happen. Because I can ask Agent Force Vibes to do this for me. And it will do it. It will execute these commands. But if you're not fully understanding what it's doing, it might do something unexpected. Okay, what else can I show you? Well, we can also show you the outcome. Oh, no, let's show you Agent Force Vibes. May as well. We open cursor. So All I'm going to do is open the extension for AgentForce vibes. This is now available to all of you. I'm going to give you a couple of tips. So if any of you are playing with Claude and you're doing it via cli, you're probably not asking it to create a massive app with one prompt to get the most out of these code agents. What most people are doing is they're using Markdown to provide to a tool like Claude that gives them some formatting and guidelines as to how you want to structure your projects at your company. There's a couple of things in Agent Force Vibes that are important to understand. One is how much YOLO do you want Agent Force Vibes to do? You only live once. I've given access here to pretty much edit anything it wants, which is pretty dangerous because just like cursor, I want it to pause at certain points to say, I want to run this command. Are you sure? Do you accept? So that's one tip. Second tip is it supports MCP servers. So I've added Salesforce DX here and I can set auto approve to true on any of these commands. And all of these commands are super useful to code agents. So getting usernames running so queries it can get metadata, it can list all my Salesforce orgs, What else can it do? Retrieve metadata, run code analyzer so I can start interacting with my code base like I've never done before. And lastly, just like if you're using Claude and you're setting these markdown files to provide that guidance, agentforce Vibes has something similar too. So down here in the bottom, you've got a little icon here that says Manage agentforce rules. If I open this up, you're going to see a bunch of rules that Salesforce provide you. Apex App Dev General LWC Mobile. If I open one of these up, you can see it's just Markdown that gives some guidance to the agent on how it should interpret your instructions. So the first thing you need to do if you're going to use Agent Force Vibes is to copy these files because they're overwritten every time the extension is updated. So you can use these as a starting point and you can also add your own specific company rules as well. So what did the component end up looking like? This is what it looks like in App Builder. So when you design a custom component, it will appear in your palette either as customers or as a managed package, depending on where you've deployed it. I've just Dragged it into a page layout here under an Engagement tab. And you can see here on the right hand side. Because we've given some thought onto how we interact with administrators, there are some nicely formatted properties that they can change at runtime. They don't want to come back to the developer to make changes. So you can see here we're currently using square icons. So our compromise was at the moment there's no way to detect whether you're in Salesforce Lightning Design System one or two. So we just give the admins the ability to say what icon flavor do you want? Square or circular? And you can see that it gets updated in that builder straight away what it looks like from an end user's point of view. If we go to the Engagement tab, after we've saved the component, this is what it looks like. So you can navigate, you can move how much zoom you want on the time warp and you can move forwards and backwards through time and you can plot any object you want. And we've made sure that when you hover over, we're using the compact layout. And you can see here we're showing today's date. In this particular instance, the filter panel doesn't have the mistakes we were earlier introducing. If we hadn't done the design phase, we've got the ability to check and uncheck all. So if we wanted to only see cases, we can apply that and the filter gets applied in the browser, so. So we don't have a server round trip to worry about. So it's just one record to display. So in a nutshell, because I only had you for 20 minutes, we could have gone on for 45. If you are developing Lightning web components and I was spending the majority of my time thinking about it, it would be in the ideation and design phase. Even if I'm using a dev assistant, the dev assistant is not gonna know what to do magically. I need to tell it. And that requires thought. If you are using agentforce Vibes, make sure you use those rules to define what your company's standards look like. And with that, bang on time. Thanks for listening. Hope you enjoy the rest of Dreamforce and I'll see you next time.