Liferay vs React

Overview

React

Stacks182.6K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

Liferay

Stacks299

Followers64

Votes0

GitHub Stars2.2K

Forks3.7K

Liferay vs React: What are the differences?

Introduction Liferay and React are both commonly used technologies in web development. However, they have key differences that distinguish them from each other. The following paragraphs will highlight and emphasize these differences.

UI Component Hierarchy: In Liferay, the UI components are built using JSP and ADM. This allows for more traditional server-side rendering and a layered rendering approach. On the other hand, React utilizes a virtual DOM and JSX syntax, allowing for more efficient and reusable UI components that can be rendered on both the client and server side. The use of a virtual DOM in React also enables easier component re-rendering and updates, making it more suitable for dynamic and interactive web applications.
Application Architecture: Liferay is an enterprise-grade web portal platform that provides out-of-the-box features for content management, collaboration, and user management. It uses a monolithic architecture, meaning that all the features and functionalities are bundled together in a single application. React, on the other hand, is a JavaScript library that focuses solely on the UI layer of an application. It can be used as a part of a larger application architecture and can be integrated with different back-end frameworks or libraries. This makes React more flexible and suitable for building modular and scalable applications.
Server-Side Rendering: Liferay uses server-side rendering by default, which means that the HTML content is generated on the server and sent to the client for rendering. This can be advantageous for improving initial load time and SEO. In contrast, React primarily focuses on client-side rendering, where the HTML content is generated on the client side using JavaScript. This allows for more dynamic and responsive user interfaces but may result in slower initial load times and limited SEO unless additional configurations or frameworks are used for server-side rendering.
Learning Curve: Liferay requires developers to have knowledge of Java and web development using JSP and ADM. It also has its own APIs and frameworks, which can add to the learning curve. React, on the other hand, is a JavaScript library that can be used with various frameworks and libraries. It has a simpler and more focused API, making it easier for developers to learn and utilize. However, React does require understanding of JavaScript and its ecosystem, which may be a learning curve for developers who are not familiar with it.
Community and Ecosystem: Liferay has a strong and active community of developers and contributors. It provides a wide range of features, extensions, and plugins that are specifically developed for the Liferay platform. React, on the other hand, has a large and thriving community backed by Facebook. It has a vast ecosystem of libraries, tools, and frameworks that can be used in conjunction with React to enhance development productivity and create feature-rich applications.
Scalability and Performance: Liferay is designed to handle large-scale enterprise applications and can scale horizontally by adding more servers. It provides several caching mechanisms and supports clustering for high availability. React, being a UI library, doesn't inherently provide scalability features. However, with the use of server-side rendering, virtual DOM, and efficient component rendering, React applications can be highly performant and scalable, especially when combined with optimized backend architectures and caching strategies.

In summary, Liferay is an enterprise web portal platform with a monolithic architecture, while React is a JavaScript library focused on UI development with a more flexible and modular design. Liferay uses server-side rendering by default, while React primarily focuses on client-side rendering. Liferay has a learning curve associated with Java and its own APIs, while React has a simpler and more focused API. Both technologies have strong communities and ecosystems, and while Liferay is designed for large-scale enterprise applications, React can be highly performant and scalable when combined with optimized backend architectures.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on React, Liferay

Cyrus

Aug 15, 2019

Needs adviceon

Vue.js

React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

884k views884k

Comments

Cyrus

Aug 15, 2019

Needs advice

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

401k views401k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

React	Liferay
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.	It makes software that helps companies create digital experiences on web, mobile and connected devices.
Declarative; Component-based; Learn once, write anywhere	Tailored solutions built fast, secure, and connected on one platform; Increase Online Revenue with B2B Commerce; Create Simple, Effective Self-Service Experiences; Drive Employee Productivity; Unify Disparate Systems
Statistics
GitHub Stars 240.3K	GitHub Stars 2.2K
GitHub Forks 49.7K	GitHub Forks 3.7K
Stacks 182.6K	Stacks 299
Followers 147.0K	Followers 64
Votes 4.1K	Votes 0
Pros & Cons
Pros 837 Components 674 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly	No community feedback yet

What are some alternatives to React, Liferay?

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Famo.us

Famo.us is a free and open source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript.

eXo Platform

eXo Platform is a digital workplace solution that allows businesses to connect, engage, empower and reward teams.

Riot

Riot brings custom tags to all browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

Marko

Marko is a really fast and lightweight HTML-based templating engine that compiles templates to readable Node.js-compatible JavaScript modules, and it works on the server and in the browser. It supports streaming, async rendering and custom tags.

Related Comparisons

Liferay vs React: What are the differences?

UI Component Hierarchy: In Liferay, the UI components are built using JSP and ADM. This allows for more traditional server-side rendering and a layered rendering approach. On the other hand, React utilizes a virtual DOM and JSX syntax, allowing for more efficient and reusable UI components that can be rendered on both the client and server side. The use of a virtual DOM in React also enables easier component re-rendering and updates, making it more suitable for dynamic and interactive web applications.
Application Architecture: Liferay is an enterprise-grade web portal platform that provides out-of-the-box features for content management, collaboration, and user management. It uses a monolithic architecture, meaning that all the features and functionalities are bundled together in a single application. React, on the other hand, is a JavaScript library that focuses solely on the UI layer of an application. It can be used as a part of a larger application architecture and can be integrated with different back-end frameworks or libraries. This makes React more flexible and suitable for building modular and scalable applications.
Server-Side Rendering: Liferay uses server-side rendering by default, which means that the HTML content is generated on the server and sent to the client for rendering. This can be advantageous for improving initial load time and SEO. In contrast, React primarily focuses on client-side rendering, where the HTML content is generated on the client side using JavaScript. This allows for more dynamic and responsive user interfaces but may result in slower initial load times and limited SEO unless additional configurations or frameworks are used for server-side rendering.
Learning Curve: Liferay requires developers to have knowledge of Java and web development using JSP and ADM. It also has its own APIs and frameworks, which can add to the learning curve. React, on the other hand, is a JavaScript library that can be used with various frameworks and libraries. It has a simpler and more focused API, making it easier for developers to learn and utilize. However, React does require understanding of JavaScript and its ecosystem, which may be a learning curve for developers who are not familiar with it.
Community and Ecosystem: Liferay has a strong and active community of developers and contributors. It provides a wide range of features, extensions, and plugins that are specifically developed for the Liferay platform. React, on the other hand, has a large and thriving community backed by Facebook. It has a vast ecosystem of libraries, tools, and frameworks that can be used in conjunction with React to enhance development productivity and create feature-rich applications.
Scalability and Performance: Liferay is designed to handle large-scale enterprise applications and can scale horizontally by adding more servers. It provides several caching mechanisms and supports clustering for high availability. React, being a UI library, doesn't inherently provide scalability features. However, with the use of server-side rendering, virtual DOM, and efficient component rendering, React applications can be highly performant and scalable, especially when combined with optimized backend architectures and caching strategies.

Liferay vs React

Overview