Modern frontend workflowsin Liferay Portal and Liferay DXP

Iván Zaera Avellon, Liferay Chema Balsas, LiferayPier Paolo Ramon, SMC

#LRIS17 | @_pier

#LRIS17 | @_pier https://www.youtube.com/watch?v=Zcdwd4sCz6I

#LRIS17 | @_pier https://www.youtube.com/watch?v=8zFvPPIF-SM

#LRIS17 | @_pier

#LRIS17 | @_pier

PROBLEM

The current support in Liferay Portal does not match the expectations of the

standard frontend developer

#LRIS17 | @_pier

545’372Packages in the npm registry

#LRIS17 | @_pier

2’273’588Downloads of the package lodash alone

During yesterday, 14th november 2017

#LRIS17 | @_pier

#LRIS17 | @_pier

SOLUTION

Support the most used industry-standard workflow for frontend

development: npm

#LRIS17 | @_pier

Iván Zaera Avellon @izaera

Software Engineer,Liferay Spain

Chema Balsas @jbalsas

Software Engineer,Liferay Spain

#LRIS17 | @_pier

Matching Developer ExpectationsIf a necessary feature has a high astonishment factor, it may be

necessary to redesign the feature— principle of least astonishment

#LRIS17 | @_pier

DEVS FRONT-END ADMINS

Developers should simply develop, any

way they feel comfortable with.

Frontend developers should not care about the backend or how the application is put

together.

Admins must have some control over the

deployment and shared modules in a controlled

environment.

#LRIS17 | @_pier

Addressing Technical Challenges

BACKWARDS COMPATIBILITY

PORTALMODULARITY

Reuse current Infrastructure

Don’t introduceBreaking Changes

Build tools inspired by standard bundlers.

Leverage Liferay AMD Loader

#LRIS17 | @_pier

Liferay AMD LoaderAn asynchronous loader of JavaScript modules (files).

#LRIS17 | @_pier

The solution

#LRIS17 | @_pier

Do I need Node.js and npm on my server?!

NO

#LRIS17 | @_pier

Build process Internal npmregistry

LiferayAMD Loader

Liferay Portal

BabelTypeScript

CoffeeScript• • •

(plain vanilla JS)

AMDCommonJSECMAScript

— — —(presets)

BundlingCompiling

Resolve packagedependencies graphs

Serve resolved resourcesto the client

Reduce request countby concatenating and minifing

#LRIS17 | @_pier

The Beginning

An intrepid developer begins a portlet project!

#LRIS17 | @_pier

Create a project

Our developer uses blade or the SDK to create the project and decides to use Javascript and some npm packages to implement his solution.

#LRIS17 | @_pier

Use npm

The used npm packages are hosted by the npm registry (npmjs.com) for development consumption.

#LRIS17 | @_pier

Download packages

Using npm standard tool, the developer downloads the needed npm packages to his local machine. Those packages are written to the standard node_modules folder.

#LRIS17 | @_pier

Time for a decision

When finished, the developer decides to deploy the portlet to Liferay Portal.

#LRIS17 | @_pier

Keep calm and use the bundler

The developer makes use of the npm bundler to pack all needed Javascript packages. Also, using gradle and standard Liferay plugins the developer assembles an OSGi bundle containing the artifacts generated by npm bundler. Finally, the OSGi bundle is deployed to the Portal making some

#LRIS17 | @_pier

Black magic happens

The npm processor analyzes the deployed bundle searching for npm packages, and publishing everything found in the npm registry: the name of the packages, their version numbers, and dependencies, as well as their valid versions (semver expressions).

#LRIS17 | @_pier

Moreblack magic happens

A Portal tracker registers and publishes the portlet.

#LRIS17 | @_pier

Welcome visitors

Until some user opens a browser and hits a Portal page containing the deployed portlet.

#LRIS17 | @_pier

Real World

The Portal sends the HTML and Javascript code for the page containing the portlet. That code is run by the browser and that makes the AMD Loader to initialize.

#LRIS17 | @_pier

Module collaboration

The AMD Loader asks the Portal for information about all available Javascript modules, their versions, and dependencies. Such information is composed by the npm registry and published by means of a servlet.

#LRIS17 | @_pier

The end!

Finally, the portlet’s Javascript codes invokes the AMD require() method at some time which makes the AMD Loader grab the npm packages that were bundled in the portlet.

#LRIS17 | @_pier

When will it be available?

Liferay DXP FP 30 Liferay Portal CE GA 5

which is now!

#LRIS17 | @_pier

Who wants a demo?

#LRIS17 | @_pier

Thanks and rate my session!If the demo worked.

Otherwise you can skip that step.No seriously please don’t.

Rate My Session!

Download the Liferay Events Mobile App Today

Pier Paolo Ramon

Twitter. @_pierGitHub: @yuchi