1. Liferay Portugal Users Group - Meetup #8
Portal 7.3 + NodeJS portlets
Fernando Fernandez
Co-organizador LPUG
Construindo uma comunidade mais forte

2. 2
Portal 7.3 CE GA1
(slides gentilmente fornecidos por David Gómez & Pablo Agulla)

3. The AppBuilder
Build applications visually
Based on the Data Engine

4. The AppBuilder - Steps
1. Define one or more Form Views
2. Define one or more Table Views
3. Create the app
4. Deploy
- Widget
- Standalone
- Add to product Menu

5. The deployed App

6. The deployed App

7. The deployed App

8. The deployed App

9. The deployed App

10. The deployed App

11. The deployed App

12. The deployed App

13. Master Pages
Facilitates visual consistency
across all pages.
Define common areas (headers &
footers)
- Formerly only possible with theme
development
- Providing guide rails per use case

14. Master Pages
A type of Page Template
(Managed within Site Builder)
Limitation:
Can’t be applied to widget Pages
(on a future release)

15. Easier edits on fragment based pages
●
For content authors, it is very handy to be able to quickly access the
edition of a given content as they are seeing it on a page.
●
The alternative is to go to the content administration application
and look for the specific content, which may take time and always
leaves some uncertainty as to whether it's really the right content.
●
This new feature allows users with permission to edit any content
displayed to enter a “Content Edition mode” in order to make
changes to the inline content (requires specific new permission) or
to access the edit form for reusable content.

16. New Fragment for individual content
Allows displaying individual content on a page
Several templates available
Supported
- Web Content
- Blog Entries
- Documents
Extensions can be developed to support other entities

17. Tree view for the site’s pages is back!
Reintroduced as complement
to Miller Columns
Evolution of Page Navigator
from 7.2
Provides Page Search

18. Automated deployment of fragments
1. Create a zip File with fragments using Fragments Toolkit
2. Put zip file on deploy folder
Can specify availability for certain virtual instances or sites.
Automatic deploy on startup.

19. Widget Pages to Content Pages (single)

20. Widget Pages to Content Pages (bulk)

21. Open Graph Support
Make your content more appealing
for sharing (Facebook, Twitter,
Linkedin…)
Allows to customize the messaging
for social platforms
Provides real time preview

22. Other improvements
Performance improved on fragment based pages
Dynamic Content Sets can be based on Search Keywords

23. Frontend changes
UI migration to React has started
Added new Utilities
- ReactRenderer
low level Java Primitive to render React
components
- react:component
High level JSP tag to be used within MVCPortlet

24. E ainda...
●
Search Engine Results Page (SERP) support
(https://www.portent.com/serp-preview-tool)
●
Soy components migrated to React under general move to
React Components
●
User segmentation by country or region, organization tags,
user tags & age, request parameter, hostname; segments reuse
●
Multiple hostnames per site
●
Accounts + Account Users

25. Now, your turn!
$ docker run -it -p 8080:8080 liferay/portal:7.3.0-ga1

26. Download
https://www.liferay.com/downloads-community

27. Javascript Portlets com NodeJS
“It’s a javascript world, and I don’t want to tell
Javascript developers ‘relearn the trade to work on Liferay’.”
Brian Chan @ Liferay DevCon 2018 Keynote (31’41’’)

28. React, Angular, Vue, NodeJS?
“React is the most popular javascript framework in the
market today and for good reasons. (...) If you don’t have
a horse in the race, we recommend trying React as your
first choice if you would like a JavaScript framework.
(…) Liferay has invested several years into Soy believing
it was the holy grail. (…) We’ve moved on and
recommend you learn from our mistakes and stay away.”
David Truong – Liferay Blogs – The State of Frontend Infrastructure

29. Como começar um projecto de Portlet React
●
Instalar um bundle Liferay
●
Fazer download do nodeJS
●
Instalar ferramentas Liferay JS
– npm install -g yeoman
– npm install -g generator-liferay-js

30. Gerar o portlet React base

31. Instalação do portlet

32. Adaptar o portlet (ex: mostrar userName)
Portlet instalado numa página
Ficheiro src/AppComponent.js adaptado
para invocar serviços Liferay
(ver http://localhost:8080/api/jsonws)

33. Your turn!
https://nodejs.org/en/download/

34. Meetup: https://www.meetup.com/Liferay-Portugal-User-Group/
Linkedin: https://www.linkedin.com/groups/12125960/
Youtube: https://www.youtube.com/channel/UCOJiHlf2FNDpdV_zifzqXnA
Construindo uma comunidade mais forte