This website uses cookies to ensure you get the best experience. Learn More.
Liferay and Javascript SPAs: The Perfect Pairing
In my last blog, Creating a React Client Extension, I basically built a React-based SPA that was hosted on Liferay.
And I got to thinking that we really aren't sharing just how great Liferay is to host Javascript-based SPAs in any framework, be it React, Angular, Vue.js or others.
So I thought I'd take some time to share with Javascript developers some reasons why you should consider leveraging Liferay to host custom SPAs.
Where are you hosting your Javascript SPAs? Extra headaches deploying them in the cloud or hosting them yourself?
Whether you want to deploy your app to Liferay's cloud (SaaS or PaaS varieties) or you want to deploy to Liferay Self-Hosted (even if self hosted means your own cloud), Liferay is ready to host your Javascript SPAs.
Each Liferay option is ready for the SPA deployment and hosting, you don't have to think about it even before starting your project. Oh, and if you are moving from or to a cloud option, that's okay because your project doesn't have to change at all, Liferay will handle it regardless.
In fact, you could deploy your SPA to a self-hosted Liferay today, and if you move to the cloud tomorrow, your SPA can go to without making any changes to your app!
This is a big deal, right? I mean if you're going to write a React application that requires SAML authentication via Okta, how much trouble is that? Or if you need to also support authenticating via Google? Or LDAP/Active Directory? Or you want different techniques for development and testing, but production must fit into your enterprise SSO infrastructure?
With Liferay as your host platform, you set up all of these authentication methods within Liferay itself leveraging GUIs for all of them. And Liferay supports using just one or a combination of these. And all of the authentication happens outside of your SPA, you just get to take advantage of it and rely on Liferay to handle it all for you.
How much time have you spent trying to get your SASS/CSS just right to handle all your presentation?
With Liferay, styling is handled by the Liferay Theme, by Style Books, and by Global CSS Client Extensions (CX) and Theme CSS CX.
The goal is to define all of the styles within Liferay so it delivers a consistent look and feel across all pages in the portal (even the ones that are not hosting your Javascript SPAs).
In this way your Javascript SPAs just need to render the right DOM and Liferay will style to enforce the consistent look and feel.
What SPA doesn't need to fetch and persist custom data?
In Liferay, Objects is a tool to define a persisted object in the Liferay UI and Liferay will automatically create RESTful as well as GraphQL endpoints for your Javascript SPAs to use for all of your persistence needs.
Simply define and publish your Object and the new Liferay Headless endpoints will be generated for you, you don't need to set up another service or database or anything on the back end to use the new Objects from your SPAs.
And since they are RESTful (including HATEOAS links) as well as GraphQL endpoints, you can consume them using whichever technique best serves you or your application.
With Liferay Objects, not only do you get the persistence of data, but that data can be permissioned such that different users can have different access.
And you don't have to worry about managing those permissions in your Javascript code, the permissions are assigned and checked within Liferay. Graphical UIs as well as headless calls can change the permissions on records, and the headless APIs will verify the permissions the current user has before allowing them to be invoked.
Liferay, especially in regards to Objects and Headless, is really a hybrid platform.
You can completely own the whole UI for CRUD operations on your custom Objects. Or you could leverage Liferay's UI to handle some of those operations, i.e. use Liferay to create or delete records, and use your SPA just for retrieval and updates.
The primary idea is to write SPAs only for those things you must, things that must implement specific business requirements, but leverage Liferay's facilities for those things that don't require custom implementations for.
How much of your typical Javascript SPA is searchable by the major engines? How easy is it for folks to find something that is part of your SPA?
Liferay is Search Engine friendly. You can leverage Liferay facilities to expose content and data to have that data indexed by the likes of Google and Bing, and then leverage your Javascript SPAs for the application work to apply the business logic in front of your data.
On other platforms, to host your SPAs often require [sometimes significant] changes so the Javascript SPA can run within their system.
Or worse yet, you're stuck running your SPA within an iFrame on their platform.
Liferay can host your Javascript SPA with little if any modification. I recently blogged about the changes necessary to host a React SPA on Liferay titled From React App to React Client Extension in 5 Easy Steps. The five steps were all operations done outside of the React app itself, but did not change the React app itself in any significant way.
And definitely no iFrames are involved.
Building a SPA but you need CMS, DAM, or Commerce capabilities? Having trouble finding and integrating one or more services like these into your application?
Liferay provides CMS, DAM, Commerce, Workflow, BPM, and other supporting services out of the box. No need to find and integrate these services into your app, they're included in Liferay, you just need to include them using our well-defined, OpenAPI-compliant headless endpoints.
If you're a React developer, Liferay provides a convenient widget library called Clay UI. Clay is a complete widget library that helps to provide a consistent UI with the rest of the Liferay interface. It's free, it's integrated, it leverages all of the Liferay styling tools...
Doesn't get much better than that!
These are all benefits you can achieve by using Liferay as your foundation for your JavaScript SPAs, and there are probably more which I just couldn't think of.
Have some benefits that you think should be added to my list? Comment below and let's talk!
