Upload
others
View
34
Download
0
Embed Size (px)
Citation preview
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