Liferay Frontend Modules and Dependencies Demystified
•
0 likes•942 views
In this talk you'll know how can we include npm resources and how can we create modules for Liferay DXP, which we can use in others Liferay portlets
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Liferay Frontend Modules and Dependencies Demystified
Similar to Liferay Frontend Modules and Dependencies Demystified (20)
Recently uploaded
Recently uploaded (20)
Liferay Frontend Modules and Dependencies Demystified
- 1. Liferay Frontend Modules and Dependencies Demystified Clóvis Neto Engineering, Liferay 1
- 2. 2
- 3. How much do you think Liferay cares about modularity?
- 4. DEVCON 2015
- 7. DEVCON 2016
- 8. Problem "The current support in Liferay Portal doesn't match the expectations of the standard frontend developer" - Chema Balsas
- 10. Solution Support the most used industry-standard workflow for frontend development: npm
- 11. Liferay AMD Module Loader Liferay NPM Bundler
- 12. AMD Module Loader != NPM Bundler
- 13. Liferay AMD Module Loader PORTLET PORTLET PORTLET Async
- 14. Who has made?
- 15. Responsible for the project Infrastructure team @izaera
- 16. Steps 1- Open your bundle’s bnd.bnd file and add the Liferay-JS-Config header to point to the configuration file that contains the module’s definition. BND Configuration // .bnd
- 17. Steps 2- Next add the Web-ContextPath in your .bnd file, if you doesn't inform, the Liferay will consider the properties: name and version, localized in your package.json. BND Configuration // .bnd
- 18. Steps 3- Create a configuration file, for example config.js, in the location you have specified in Liferay-JS-Config. Writing the configuration file 4- Identify the loader your module requires - YUI and AlloyUI modules - AMD or global libraries
- 19. Using YUI configuration definition
- 20. Using Liferay Loader Definition
- 21. Writing the module Steps
- 22. Writing the module Steps
- 23. And... How about ES6?
- 24. Using ES6 *if you use ES6, you won't need to create the config.js file
- 25. And you don't need to be worried about transpilation, because the Liferay do it for you!
- 26. But, if I want to use npm libraries in my ES6 modules?
- 29. // package.json
- 30. When you are using npm-bundler, you need to transpile your ES6 files.
- 31. 1- Install the necessary dependencies
- 32. 2- Create the .babelrc file
- 33. 3- Create the .npmbundlerrc file
- 34. babel --source-maps -d build/resources/main/META-INF/resources src/ main/resources/META-INF/resources && liferay-npm-bundler Now you can add the babel transpilation command in your build script:
- 35. And, if that steps are too much for you...
- 36. You can use blade-cli *Blade-cli providers some projects boilerplate like: Angular, React, Vue.js, Metal Js, jQuery and Billboard.js
- 37. I want to know more about frontend
- 38. Frontend guild team follow up Tuesdays and Thursdays, 4:30 p.m. to 6 p.m. 4º Floor
- 39. Why? We want to get closer from the others departments, and the frontend guild follow up is an excellent opportunity to share knowledge and solve doubts.
- 40. Thank you!