Questions And Answers
-----------------------------------------------------------------------------------------------------------------------------
Company Asked: Salesforce Experience: 3+ years.
1)What is LWC.
Ans :
LWC stands for lightning web components. It is used to build the user interface in salesforce lightning platform.
Company Asked: TCS, Deloitte Experience: 3+ years.
2)What is the Difference between AURA and LWC?
Ans :
Company Asked: TCS, Deloitte, Infosys Experience: 2+,3+ years.3)What are the decorators we have in the LWC?
Ans:
@api decorator
@track decorator
@wire decorator
Company Asked: Salesforce Experience: 3+ years.
4)What are the files we can create in the LWC component?
Ans:
HTML File
JavaScript File
CSS file
Company Asked: Salesforce ,TCS Experience: 3+ years.5)What are the naming rules we need to take care while creating the LWC component?
Ans:
It must begin with a lowercase letter
It must contain only alphanumeric or underscore characters
It must be unique in the namespace
It Can’t include whitespace
It Can’t end with an underscore
It Can’t contain two consecutive underscores
It Can’t contain a hyphen
Company Asked: TCS Experience: 3+ years.
6)What are the best practices to write the LWC component?
Ans:
Keep Components Simple:
Break down your components into smaller, reusable parts. Combine them to create more complex interfaces.
Naming Conventions:
Carefully name variables, methods, and components.
Use @track for Reactive Properties:
Mark properties with @track to make them reactive.
Avoid Imperative Methods:
Instead of manipulating the DOM directly, use LWC’s reactive programming model and
wire services to fetch data from Salesforce.
Leverage Lightning Data Service (LDS):
Use LDS to load and save data. It simplifies data retrieval and management in LWC.
Use Wire Adapters:
Utilize UI API wire adapters and Lightning Base Components. These allow admins to configure your
components without modifying code, and they enhance component visibility.
Choose the Correct Event Type:
Use the appropriate event type (standard or custom) based on your use case.
Standard events are more efficient, while custom events provide flexibility.
CSS Variables for Theming:
Use CSS variables (custom properties) for theming your components.
This makes it easier to maintain consistent styling across your app.
Company Asked: TCS Experience: 3+ years.
7)How can variables be utilized across two components without employing a parent-child relationship?
Ans)
Using Services and Observables:
Services: Create a shared service (JavaScript module) that holds the data you want to share. Import this service into both components.
Observables: Use RxJS observables to notify components when data changes. The service can emit events, and components can subscribe to these events to stay in sync.
This approach works well for scenarios where components are unrelated and need to communicate.
Custom Events:
Components can fire custom events to communicate with each other.
Define a custom event in one component and dispatch it when needed.
In the other component, listen for this event and handle it by updating its state or performing any necessary actions.
This method allows non-parent-child components to exchange information.
Company Asked: TCS, IBM Experience: 3+ years.
8)When working with Lightning Web Components (LWC), there are several key points to keep in mind to ensure efficient, maintainable, and high-quality. what are those points?
Ans)
1. Component Design
Single Responsibility Principle: Each component should have a single responsibility. Break down complex components into smaller, reusable components.
Component Composition: Use composition over inheritance. Compose components to build complex UIs.
2. Performance Optimization
Lazy Loading: Load data and components only when needed to improve performance.
Efficient Data Fetching: Use selective queries and cacheable Apex methods to reduce server calls.
Debouncing: Implement debouncing for input fields to reduce unnecessary server calls.
3. Reactivity and State Management
@track Decorator: Use the @track decorator for reactive properties to ensure the UI updates when data changes.
Immutable Data Structures: Use immutable data structures and create new references when updating objects or arrays to trigger reactivity.
4. Error Handling
Try...Catch Blocks: Use try...catch blocks to handle errors in asynchronous operations.
User Feedback: Provide meaningful feedback to users using lightning-toast or other UI elements.
5. Security
Avoid Direct DOM Manipulation: Use LWC's templating system instead of direct DOM manipulation to prevent security vulnerabilities.
Escape User Input: Always escape user input to prevent cross-site scripting (XSS) attacks.
6. Styling
SLDS (Salesforce Lightning Design System): Use SLDS classes for consistent styling across components.
Scoped CSS: Use scoped CSS to avoid style conflicts between components.
7. Testing
Unit Testing: Write unit tests for your components using Jest to ensure they work as expected.
Integration Testing: Perform integration testing to verify that components interact correctly with each other and with the backend.
8. Documentation
Comment Your Code: Add comments to explain complex logic and provide context.
API Documentation: Document public properties and methods using JSDoc comments.
9. Accessibility
ARIA Attributes: Use ARIA attributes to make your components accessible to users with disabilities.
Keyboard Navigation: Ensure your components support keyboard navigation.
10. Code Quality
Linting: Use ESLint to enforce coding standards and catch potential issues early.
Code Reviews: Conduct code reviews to maintain code quality and share knowledge within the team.
Feel free to post any comments regarding mistakes, corrections, ideas, and suggestions related to the article.
Thank you for reading the article.
Jayanth A
Comments
Post a Comment