Modern frontend workflows in Liferay Portal and Liferay DXP. Iván Zaera Avellon, Liferay Chema Balsas, Liferay Pier Paolo Ramon, SMC

Transcription

1 Modern frontend workflows in Liferay Portal and Liferay DXP Iván Zaera Avellon, Liferay Chema Balsas, Liferay Pier Paolo Ramon, SMC

2

3

4

5

6 PROBLEM The current support in Liferay Portal does not match the expectations of the standard frontend developer

7 Packages in the npm registry

8 Downloads of the package lodash alone During yesterday, 14th november 2017

9

10 SOLUTION Support the most used industrystandard workflow for frontend development: npm

11 Iván Zaera Software Engineer, Liferay Spain Chema Software Engineer, Liferay Spain

12 Matching Developer Expectations If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature principle of least astonishment

13 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.

14 Addressing Technical Challenges BACKWARDS COMPATIBILITY Reuse current Infrastructure Don t introduce Breaking Changes PORTAL MODULARITY Build tools inspired by standard bundlers. Leverage Liferay AMD Loader

15 Liferay AMD Loader An asynchronous loader of JavaScript modules (files).

16 The solution

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

18 Build process Internal npm registry Liferay AMD Loader Compiling Babel TypeScript CoffeeScript (plain vanilla JS) Bundling AMD CommonJS ECMAScript (presets) Liferay Portal Resolve package dependencies graphs Serve resolved resources to the client Reduce request count by concatenating and minifing

19 The Beginning An intrepid developer begins a portlet project!

20 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.

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

22 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.

23 Time for a decision When finished, the developer decides to deploy the portlet to Liferay Portal.

24 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

25 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).

26 More black magic happens A Portal tracker registers and publishes the portlet.

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

28 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.

29 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.

30 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.

31 When will it be available? Liferay DXP FP 30 Liferay Portal CE GA 5 which is now!

32 Who wants a demo?

33 Thanks and rate my session! If the demo worked. Otherwise you can skip that step. No seriously please don t. Pier Paolo Ramon