Developing Standard Web Components

Modern Liferay applications often require advanced functionality beyond the platform's out-of-the-box capabilities. In these scenarios, developers may need to integrate external applications or create custom frontend components that they can seamlessly embed in Liferay pages. To address these needs, you can deploy standard web components as client extensions, adding advanced functionality as custom HTML elements. Understanding the key principles behind web component development is essential for building efficient and maintainable modern applications.

Understanding Standard Web Components

Standard web components are an integral part of modern Liferay application design, ensuring reusability, flexibility, and compatibility across different projects and frameworks. As a W3C standard, web components work natively in all modern browsers, making them ideal for frontend client extensions in Liferay.

The following are key principles of web components.

Encapsulation and Reusability

Web components use Shadow DOM to encapsulate styles and functionality, preventing conflicts and enabling reuse across applications and pages. This encapsulation promotes a clean, modular architecture, reducing the risk of unintended side effects and simplifying maintenance.

Framework Agnostic Development

Developers can leverage frameworks that support web component creation, such as React (react-web-component), Angular (@angular/elements), Vue (vue-web-component-wrapper), Lit, and Stencil. This flexibility enables teams to use their preferred tools, fostering developer productivity and reducing the learning curve. However, server-side rendering frameworks like Next.js are incompatible, as they do not produce standard web components.

Dependency Management with Import Maps

Liferay's support for JavaScript import maps enables shared dependencies, reducing bundle size and improving load times. By defining dependencies at the platform level, developers can avoid redundant code and ensure consistent resource utilization across components.

Here’s an example of import map usage:

{
  "imports": {
    "react": "<https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js>",
    "@clayui/button": "<https://cdn.jsdelivr.net/npm/@clayui/button>"
  }
}

Components can then reference the shared dependency instead of bundling it separately:

import React from 'react'; 
import { ClayButton } from '@clayui/button';

As implementations grow larger and more complex, leveraging JavaScript import maps is key to reducing the size of code and modules. They can contain shared code, shared utilities, shared NPM modules, and any other code that would otherwise need to be duplicated across web components.

Composition vs Encapsulation

Generally, you should favor small, composable components. This is because they simplify individual components and empower page designers to assemble applications in site pages, improving flexibility and reducing maintenance. However, you can use encapsulation for standalone components when page designers should not modify them, similar to a Single Page Application (SPA). In this approach, the page designer only places the component, while the developer retains full control over its functionality and composition.

Secure Integration and Data Access

Liferay web components seamlessly integrate with Liferay Objects for data storage and Headless APIs for data access. This helps ensure a cohesive data management strategy. To ensure secure data handling, the integration relies on these features:

Authentication via p_auth Token: Liferay automatically provides a p_auth token, enabling secure authentication for API requests from web components. Here’s an example of a secure fetch request:

fetch('/o/headless-delivery/v1.0/some-endpoint', {
  headers: {
    'Authorization': 'Bearer ' + Liferay.authToken,
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

Leveraging Liferay’s Built-in Security: Web components automatically respect the logged-in user’s permissions and access controls. This eliminates the need for additional authentication setup by leveraging Liferay's robust security model.

Best Practices for Web Component Development in Liferay

To maximize the benefits of standard web components in Liferay, consider these best practices:

Choose a Familiar Framework: Select a framework that supports web components and matches your team's expertise.
Use React and Clay for UI Consistency: If you’re familiar with React, use Clay UI components for a native Liferay look and feel.
Implement Import Maps: Reduce redundancy by defining dependencies at the platform level.
Keep Components Lightweight: Avoid large dependencies when possible and favor design-time composition over development-time encapsulation.
Ensure Accessibility: Follow WCAG guidelines to make components usable for all users.
Employ Modular Design: Break complex UI features into smaller, reusable web components.

Conclusion

Building standard web components in Liferay provides a future-proof approach to frontend development. By leveraging import maps, headless APIs, and Liferay Objects, developers can create scalable and maintainable modern applications. This approach aligns with the principles of modern Liferay application design, promoting efficiency, maintainability, and adaptability.

Next, you’ll explore how to leverage Frontend Data Sets to display and interact with application data.