LSNA 2016 3rd party JS frameworks

Integrating 3rd part javascript frameworks in Liferay.

Transcript

1. Integrating Liferay DXP with Popular UI Frameworks Or specifically React.js Bryce Osterhaus, Software Engineer Michael Hadley, Software Engineer
2. Workshop Goals • Set up environments • Package application on deploy • Rapid development with hot-module-reloading • Create a Todo Application built with React.js • Integrate Application with Liferay’s web services
3. Workshop Resources Modules Repo: https://github.com/mthadley/dxp-react-workshop Slides: https://speakerdeck.com/bryceosterhaus
4. Setup • Download workshop folder from flash drive • Java 8 & Node ^4.2.0 • Install NPM dependencies at ./modules/dxp-react-workshop/todo/todo-web npm install
5. Start Liferay Navigate to bundle: Mac: PC: ./catalina.sh run catalina.bat run cd bundles/tomcat-8.0.32/bin/
6. UI Frameworks
7. How to integrate Serve Create Package
8. React + Webpack Create modular components Package components into a single asset Serve assets and run application
9. What is React.js? Front-end view layer that handles rendering and event binding with unidirectional data flow.
10. What does a React component do? • Renders HTML or other React components • Handles event binding • Manages “state” of component Display State Render
11. What is Webpack? A module bundler that takes modules with dependencies and generates static assets representing those modules.
12. Basic Webpack Approach D D E bundle.js A B C
13. Loaders & Presets
14. Todo Application Requirements • Build and deploy application in one command • Add “todo” tasks • Render tasks • Complete tasks • Persist tasks in database via Liferay web-services
15. Todo Application
16. Modules Located at: workshop/modules/dxp-react-workshop/todo Modules: • todo-api & todo-service - See workshop “Create Amazing Web Services with Liferay DXP” • todo-web (The one we care about)
17. Todo App Located at: workshop/modules/dxp-react-workshop/todo/todo-web Directory Structure: ├ /node_modules ├ /src ├ build.gradle ├ package.json └ webpack.config.js
18. Deploying Modules Navigate back to root directory /workshop Run command: or What is happening?: • Building modules into .jars • Deploying them to tomcat bundle ./gradlew deploy gradlew.bat deploy
19. Running Javascript Javascript File: src/main/resources/META-INF/resources/js/src/entry.js Add script to view.jsp
20. Deploying App Navigate back to root directory /workshop Run command: or What is happening?: • Building modules into .jars • Deploying them to tomcat bundle ./gradlew deploy gradlew.bat deploy
21. Webpack Configuration
22. Webpack Configuration From todo-web root run: Modify script in view.jsp Re-deploy node ./node_modules/webpack/bin/webpack.js
23. Issue... Why do I have to build in two separate steps?
24. Webpack + Gradle File: todo-web/build.gradle • Import ExecuteNodeTask • Create gradle task • Task depends on npmInstall (due to webpack) • Task classes depends webpack Re-deploy
25. Import React Component Components: Todo App Todo App with Web-services
26. Re-deploy Modules Navigate back to root directory /workshop Run command: Verify that javascript is running ./gradlew deploy
27. Issue... Will I always have to re-deploy?
28. Hot Reloading Add to webpack.config.js
29. http://gaearon.github.io/react-hot-loader/
30. API Web-services Location: localhost:8080/api/jsonws
31. API Call
32. Take Aways (what did we learn?) • Package javascript via Webpack • Use Webpack bundle within Liferay • React within Liferay • Develop our javascript without having to re-deploy • Liferay Services integrating within a React component
33. Q & A Contact: bryce.osterhaus@liferay.com michael.hadley@liferay.com