Fórum
Liferay 7 and any SPA framework integration
Viktor Dzundza, modificado 7 Anos atrás.
Liferay 7 and any SPA framework integration
New Member Postagens: 16 Data de Entrada: 16/09/16 Postagens Recentes
Hi there,
According to this Liferay documentation Liferay can be extended by these types of applications:
For creating a SPA within Liferay can be used Portlet or Theme.
There are two ways to using angular inside the portlet.
On big component as in your example. You have to know, that you can’t nest components. So every portlet must be part of your app. With this approach, you will lose the possibility that a portlet can provide an individual element to your page. All portlets need to know what the name of your root component is and must extend this root component. You may not use these portlets without changes in another portal server if they use another ngApp name or no one. The advantage is you can share the $rootScope in all of your portlets, and the portlets may communicate with each other in angular ways (shared components).
Every portlet comes with its root component. In this case, there are no dependencies. Every portlet may instantiate its ngApp by angular.bootstrap. Furthermore, every ngApp is created only for a small part of the web page and only if it’s needed. In both ways, you should avoid using routeing.
When the portlet is used for serving SPA app it causes the access to URL, so in the portlet, we won't be able to catch the changing and show separate screen if needed.
Advantages:
- portlets can be removed by the administrator and rearranged in different ways. So when we don't need some functionality, we can just remove the particular portlet from a page.
Disadvantages:
- Portlet communications. For example, when we add two portlets and when to change something on UI in the first and second portlet should update own UI we need to include some communication via server side. That is integrated libraries for realtime communication such as socket.io.
- As we mentioned before, the portlet is not separate SPA page, so it needs to investigate how multiple pages can be served and changed in one portlet.
The transition from one portlet to another cause reload the full page
- Context is not persisted server-side, so if you navigate to another portal page and come back, your angular app is reset to the beginning.
- Angular will fight w/ other portlets on the page to own the address bar; remember all angular context is kept in the address bar, so if other portlets/code are trying to own the address bar this can pose problems.
- Angular won't have effective access to i18n, portlet prefs or permissions like a regular portlet. You have to retrieve everything you need at first render of the portlet and pass it via javascript.
Using SPA by modifying a theme.
In this case, theme template is changed by adding javascript bundles. That is we should create a separate page via Liferay admin portal and apply theme with injected files to this page. This separate page will be presented as fully SPA.
Advantages:
- SPA Framework can track routeing completely, and there are no limitations for use any framework feature.
Disadvantages:
- There SPA should keep Liferay links and do transition manually.
- Should sync routes between Liferay pages
I've found in the documentation that we can create Automatic Single Page Applications. What does it mean? Could anyone provide an example?
Database switching
According to https://dev.liferay.com/discover/reference/-/knowledge_base/7-0/database-templates can we dynamically change the database source?
Internationalisation
Does Liferay provide a service or route for loading translation JSON ?
Using SPA frontend libraries.
I've found this text in the documentation
What does it mean by words "you can use any" ?
Angular 1,2, react, ember or other libraries is not just libraries for manipulation with DOM.
I see the architecture diagram where we have Framework icons (Angular, react) and relations to API.
What did the Liferay development team mean by this one?
According to this Liferay documentation Liferay can be extended by these types of applications:
- OSGi
- Portlet
- Web Plugins
- Templates
- Themes
For creating a SPA within Liferay can be used Portlet or Theme.
There are two ways to using angular inside the portlet.
On big component as in your example. You have to know, that you can’t nest components. So every portlet must be part of your app. With this approach, you will lose the possibility that a portlet can provide an individual element to your page. All portlets need to know what the name of your root component is and must extend this root component. You may not use these portlets without changes in another portal server if they use another ngApp name or no one. The advantage is you can share the $rootScope in all of your portlets, and the portlets may communicate with each other in angular ways (shared components).
Every portlet comes with its root component. In this case, there are no dependencies. Every portlet may instantiate its ngApp by angular.bootstrap. Furthermore, every ngApp is created only for a small part of the web page and only if it’s needed. In both ways, you should avoid using routeing.
When the portlet is used for serving SPA app it causes the access to URL, so in the portlet, we won't be able to catch the changing and show separate screen if needed.
Advantages:
- portlets can be removed by the administrator and rearranged in different ways. So when we don't need some functionality, we can just remove the particular portlet from a page.
Disadvantages:
- Portlet communications. For example, when we add two portlets and when to change something on UI in the first and second portlet should update own UI we need to include some communication via server side. That is integrated libraries for realtime communication such as socket.io.
- As we mentioned before, the portlet is not separate SPA page, so it needs to investigate how multiple pages can be served and changed in one portlet.
The transition from one portlet to another cause reload the full page
- Context is not persisted server-side, so if you navigate to another portal page and come back, your angular app is reset to the beginning.
- Angular will fight w/ other portlets on the page to own the address bar; remember all angular context is kept in the address bar, so if other portlets/code are trying to own the address bar this can pose problems.
- Angular won't have effective access to i18n, portlet prefs or permissions like a regular portlet. You have to retrieve everything you need at first render of the portlet and pass it via javascript.
Using SPA by modifying a theme.
In this case, theme template is changed by adding javascript bundles. That is we should create a separate page via Liferay admin portal and apply theme with injected files to this page. This separate page will be presented as fully SPA.
Advantages:
- SPA Framework can track routeing completely, and there are no limitations for use any framework feature.
Disadvantages:
- There SPA should keep Liferay links and do transition manually.
- Should sync routes between Liferay pages
I've found in the documentation that we can create Automatic Single Page Applications. What does it mean? Could anyone provide an example?
Database switching
According to https://dev.liferay.com/discover/reference/-/knowledge_base/7-0/database-templates can we dynamically change the database source?
Internationalisation
Does Liferay provide a service or route for loading translation JSON ?
Using SPA frontend libraries.
I've found this text in the documentation
On the front-end, Liferay has kept pace with the most recent progressions in that space. If you’ve used Liferay in the past, you can of course continue to use Liferay’s venerable Alloy UI, but you are also free to use the front-end technologies you love the most:
Bootstrap
SaSS
EcmaScript 2015 (using Babel.js)
You can also use any JavaScript library, including
Metal.js (developed by Liferay)
jQuery (included)
Lodash (included)
Angular 1 or 2
React
Your library of choice
What does it mean by words "you can use any" ?
Angular 1,2, react, ember or other libraries is not just libraries for manipulation with DOM.
I see the architecture diagram where we have Framework icons (Angular, react) and relations to API.
What did the Liferay development team mean by this one?