Understanding Liferay’s Frontend Architecture

Liferay’s component-based frontend architecture includes these facets:

• Industry-standard web development languages
• Liferay-specific developer tools
• Frontend client extensions
• Headless API framework
• Design system and design elements

Together, these facets provide the foundation for developing frontend web applications in Liferay. In this lesson, you are introduced to each piece of Liferay’s frontend architecture. As you proceed through the course, you’ll understand how they interact and integrate with one another.

Liferay Developer Tools

With Liferay, development begins by setting up a workspace, which serves as your centralized hub for managing projects, configurations, and code. This workspace is then populated with modules, configurations, and client extensions, all of which are the building blocks of your frontend applications.

In addition to workspaces, Liferay provides a range of CLI and IDE tools with which you can streamline workflows, automate processes, and manage deployments. You can explore these developer tools in the Mastering Liferay Workspaces and Tooling course.

Frontend Client Extensions

Client extensions are self-contained units of code that reside outside the Liferay DXP container and interact with the platform solely through its APIs. This decoupled architecture offers several advantages over traditional extension methods (e.g., OSGi plugin modules):

• Improved Performance: By running outside the portal container, client extensions reduce resource competition and enhance application performance.
• Enhanced Scalability: Client extensions improve scalability by allowing you to fine-tune resource consumption and distribute workloads effectively.
• Reduced Maintenance: This decoupling minimizes maintenance overhead and reduces the risk of conflicts or breaking changes during platform upgrades.

Frontend client extensions are a specific category of client extensions. They provide frontend resources to your Liferay DXP instance for enhancing the presentation layer of your sites. These resources can range from custom CSS and JavaScript files to fully interactive web components that seamlessly integrate with Liferay's UI.

For frontend developers, client extensions are the recommended method for adding custom functionality and styling to web applications. You can explore client extensions in the Foundations of Liferay Client Extensions and Mastering Liferay Frontend Client Extensions courses.

Headless API Framework

To fully take advantage of the client extension paradigm, frontend developers must understand the platform’s headless API framework. Liferay provides an extensive list of out-of-the-box APIs for platform administration and content consumption. With these APIs, developers can execute most actions available through the Liferay UI, enabling them to create consistent and connected experiences across systems.

Consuming headless APIs involves initiating requests, processing responses, and integrating received data within your systems. Unlike other API methods, headless APIs separate the presentation layer from the body. This flexible, platform-agnostic approach enables developers to consume the same backend data within a variety of custom frontends and applications.

REST and GraphQL Support

Liferay supports both REST and GraphQL endpoints for its headless APIs, giving you the flexibility to choose how you interact with the platform. Each approach offers unique strengths depending on your project’s requirements. REST APIs are fully OpenAPI-compliant, ensuring broad compatibility with tools and libraries supporting the OpenAPI specification. They are the widely adopted industry standard for API communication. REST APIs are well-suited for straightforward CRUD operations and handling large data sets.

Unlike REST, which returns a fixed set of data per endpoint, GraphQL empowers developers to specify exactly what data they need in a single request. GraphQL’s ability to combine fetching and modifying operations into a single query makes it highly efficient for complex data interactions. GraphQL APIs are advantageous for situations where data requirements can change frequently or in applications where bandwidth is a concern.

You can explore headless APIs in the Foundations of Liferay Headless APIs and Mastering Consuming Liferay Headless APIs courses.

Liferay’s Design System

A design system is a set of tools, standards, and components that streamlines frontend development and ensures consistency across solutions. Organizations require robust design systems to produce predictable and visually cohesive experiences for their users. Design systems also foster collaboration between developers and designers by providing a shared framework of guidelines and capabilities that they can use to create engaging, accessible solutions.

Liferay’s design system is built upon two technologies: Lexicon and Clay. Lexicon is a design language that provides both a style guide and a patterns library for building interfaces within the Liferay ecosystem. Clay is Liferay’s web implementation of Lexicon with Bootstrap. It provides an extensive library of frontend components, along with a framework for developing your own.

Design Elements in Liferay DXP

Liferay DXP provides a powerful suite of features and capabilities for designing user interfaces and experiences. These tools are collectively referred to as design elements. While many design elements are accessible to users without development expertise, frontend developers can leverage the functionality of Lexicon and Clay to unlock even greater potential using client extensions.

There are some design elements that are especially relevant to frontend developers:

• Fragments: Composable, reusable building blocks for pages.
• Themes: Visual blueprints for the look and feel of a site.
• Style Books: Design resources that customize styling rules.
• Frontend Data Sets: Virtual containers for aggregating data from sources with headless APIs.

You can explore these design elements and more in the Mastering Liferay Design Elements course.

Conclusion

Equipped with this understanding of the frontend architecture, developers can begin developing web applications in Liferay with a combination of out-of-the-box and custom components. Frontend client extensions are collections of CSS and JS files. When deployed to Liferay DXP through a Liferay workspace, frontend client extensions modify the rendered HTML for pages in a web application. Frontend client extensions leverage the headless API framework to access and manipulate backend data. They also depend on the styling, patterns, and components of Liferay’s design system, which enable them to interact with the platform's various design elements.

Next, you’ll learn how you can compose pages with fragments and custom element client extensions.