Comparing Frontend API Approaches
Liferay offers multiple pathways for frontend API consumption, each with distinct characteristics. In this lesson, you'll explore their differences and similarities to ensure you're equipped to select the most suitable methods for your applications.
Comparing API Call Methods
As there are multiple ways to consume Liferay's APIs in a frontend context, it's essential to compare and contrast the differences between approaches in order to understand where each method is most effective.
Call Method | Custom Fragments | Frontend Custom Elements | External Applications |
---|---|---|---|
Where it runs | Inside Liferay | Outside Liferay | Outside Liferay |
API Call Method | fetch (client-side) or restClient (server-side) |
fetch (client-side) |
Only headless APIs |
Authentication | Automatic via session (JSESSIONID) | Automatic via session (JSESSIONID) | OAuth 2.0 |
Security Token | Liferay.authToken (for CSRF protection) | Liferay.authToken (for CSRF protection) | OAuth 2.0 |
Data Processing | Can offload processing to Liferay's server | Must process data on the client side | Must process data on the external application side |
Scalability | Server-side execution can handle more processing | Load is distributed across client browsers | Load is distributed across the external application |
Use Case | Injecting dynamic content into Liferay pages | Fully decoupled micro frontends | Displaying Liferay content in external applications |
In particular, consider these primary differences when deciding which approach to use:
- Authentication: Both fragments and frontend client extensions are rendered within the same page where a Liferay session is active, allowing them to use cookie-based authentication. External headless frontends run outside of Liferay, however, requiring OAuth 2.0.
- Access to
restClient
: Unlike fragments, client extensions and external applications must make direct API calls, handling authentication and request headers themselves. - Security and API Access Control: Applications not bound to Liferay sessions (such as external applications) require carefully scoped API access with OAuth 2.0 to prevent over-permissioning, while fragments and some client extensions can leverage role information from user sessions.
Comparing Client-to-Server and Server-to-Server Calls
Where Liferay sessions are active, such as for API calls within fragments, both client-to-server and server-to-server calls can be considered. When deciding between types of calls, several key factors come into play as each approach has its strengths and limitations.
- Scalability: Client-to-server calls scale better by distributing workload across browsers, ideal for dynamic, user-intensive applications.
- Security: Server-to-server calls offer better control over sensitive data as this processing happens entirely within Liferay.
- Performance: Client-to-server calls are generally faster for dynamic interactions, while server-to-server calls can introduce additional latency.
- Data Control: Server-to-server calls enable pre-processing and data filtering before it reaches the client, reducing exposure risks.
Deciding Between Call Types
Depending on the requirements of your calls and the broader application details, both client-to-server and server-to-server call types may be appropriate for different situations. Consider the following additional guidance when deciding between call types.
Scalability
Client-to-server calls scale effectively, as workload is distributed across clients. Each client interacts directly with the API, freeing the server to focus on responses without processing calls itself. This makes it an excellent choice in high-traffic applications with concurrent user queries.
Alternately, server-to-server calls via restClient
centralize processing, offering control but creating a potential bottleneck. High traffic, like multiple users accessing object details in a restClient
fragment, increases server resource usage while the server processes and responds to each API call.
Security
Client-to-server calls expose request and response data to the browser, requiring caution with sensitive information. While suitable for non-critical data like UI elements, it's less ideal for handling confidential content.
Conversely, security is enhanced with server-to-server calls due to internal data processing, which shields sensitive data from client or browser exposure. This is optimal for scenarios requiring strict data privacy, such as accessing confidential user information.
Performance
Client-to-server calls offer faster dynamic UI updates via direct browser-API communication, reducing data travel time. For example, direct client-side API filtering enhances user responsiveness by calling APIs directly from the client.
Server-to-server calls, however, add processing overhead within the Liferay server. This potentially slows response times, notably for fragments with frequent or complex API calls.
Data Control
Client-to-server calls send raw API responses directly, potentially exposing unnecessary fields or sensitive data. While API parameters can limit retrieval, the full API response remains accessible to the client.
Server-to-server calls instead offer data pre-processing and control via restClient
for fragments, ensuring clients receive only necessary information by aggregating, filtering, or modifying response data on the server. This simplifies frontend development and enhances security by limiting data exposure.
Flexibility
Client-to-server calls offer greater flexibility for interactive, dynamic UIs. Browsers handling these requests enables easy integration with JavaScript frameworks for seamless user interactions. Server-to-server restClient
supports only GET requests, making it suitable for read-only data but less versatile for advanced operations like POST or PUT.
Choosing client-to-server or server-to-server calls should align with your application's needs. Opt for client-to-server calls in fragments for scalability and speed, and server-to-server calls for secure and controlled data handling. For dynamic updates, such as displaying new tickets in real-time when a user applies filters or searches, client-to-server calls are ideal where possible. To display elements as part of a static dashboards, you can use restClient
server-to-server calls. Balancing these factors ensures efficient and secure API consumption.
Conclusion
Comparing the differences between frontend API calls is essential in choosing appropriate approaches. Scalability, security, performance, data control, and flexibility needs should guide your choices depending on the requirements of your applications. Next, you'll learn about consuming Liferay APIs within backend processes.
Capabilities
Product
Education
Contact Us