React meets Liferay - Liferay with modern JS stack

thank you so hello everyone let me welcome you on my session which is going to be about wreck and how we can combine react with a life fray to make such a nice applications but before I start with the presentation itself let me say a few words about me I'm working as a team leader and senior Java developer at Lundegaard and I'm playing with Liferay since version 5 so it's been quite a while when I started but a Liferay and I would like to just emphasize that I'm not a JavaScript geek or react week I'm just focusing mainly on the Java development but for today yes I'm gonna talk about react and life rate together but the most important part I would like to show you the concept how we can combine these technologies together I hope that I will give you enough detail to understand this concept so let's briefly sure I would like to show you the edge and there I'm gonna go through the motivation show you the simplest case how to actually how you can combine react with the Liferay and I would like to derive the most important stuff which you need to handle and then I show you how we think that Liferay shoot made a better life ray and at the end how we did it what is the architecture of our solution and every s every solution we got some pitfalls and we got some good achievements and I would like to discuss them with you because some things are really good some things are neat improvements so we'll we will discuss them at the end of the at the end of session so let's start with the motivation I divided motivation into the three parts the first one was that I actually change the company two years ago and I realized that instead of a bunch of Java developers who knows really well spring and spring MVC and all the all the Java stuff how to develop actually the front end on the portal 62 now I have still have some Java developers really good at a portal stuff but I also have a lot of front-end coders or a lot of huge designers and especially a lot of JavaScript developers who wants to actually join our team to deliver the portal but we were asking them ok can you do something for us on the portal but they say yes we would like to join your team but we still want to keep writing react we don't want to like really butter what is the JSP code and what is the Java we still want to focus on the on the JavaScript so we need to find a way how to use their full potential the other motivation was our customers because they are asking so often yeah we are considering the upgrade but we know that it will take some time if already here that it's not gonna be done in a week so they are there considering the update but on the other hand they still need to keep up actually running the 6.2 or 6.2 EE and they need to find a way how to actually deliver the applications which are easily migrate able to the DXP because they don't want to pay for the application twice let's say for the 6.2 and then pay another amount of money for the migration so they are asking our is there any way how to create actually application which we can easily take and move it to the to the DXP and the last one but not least I've heard it many times we just want it our developers wants to write to react and wants to be efficient on the front and side and also customer comes to games to us and say ok but we got a lot of free Act applications and react developers but we mean we need to use our CMS and we would like to combine it somehow could you provide us some solution for that and we said yes we need to consider it we need to find a way how to do it so how we can connect react with life right in the simplest case so you can ever imagine you can just download I hope that most of you known very well create react up comment line from line think you can actually download it downloaded from web just write a write a simple ina curve and it generates for you the basic structure of the react project and you just write a root component just write another script and build a whole application to the one JavaScript bundle then this bundle could we just included in the team and the only thing you need to do is just to render some div someplace for the JavaScript application and you can actually have a single page application in the portal it's really simple just to write a team create actually application by using a common line interface and it sounds it sounds really simple but it doesn't work because you will you will kill the portal you just don't care about the portraits you just you need to think about the multiple instances of the same application on the page you also need to think about the fact that you don't even know the number of the applications on a page in advance because you are managing the page you are putting the portlets on the page and you need to handle the things that you dynamically adding the actual react applications on the page another thing to consider is application state you need to handle the application state and according to good rules it's good way to have only one application state for the whole page so you need to somehow handle handle this fact - you need to consider routing problems and efficient resource loading so how to how we think if I consider these these bullets and the motivation it's gonna show us how we how we think that Liferay should meet with react we think that the important fact is that the reactive l / must do what they do best so just write the react code and don't focus on the portal integration that much so they need to be able to write at least 80% of the application without even starting the portal and even when they need to finalize the integration with the portal and everything get up and running they still need to have access to all of the features they know well like hot module reloading and all the stuff they usually use when they are creating react application also we think that the state of the whole application even if you are using a dynamic portlets and if you are putting them on the page it should stay on the one place it should be in the one react store and you need to handle the dynamic injections of the state parts inside of the one state also it's really important to download only the JavaScript which is necessary to render the page so if you have a three point if you are a three portlets on one page and just to one portal is on the second page if your just access the page with the one portlet you just download the JavaScript necessary to render one portlet not the JavaScript for all of all of the applications another thing which is really important Porto has quite robust CMS and quite robust configuration capabilities and it's necessary to be able to pass the data to do react widgets and to be able to configure them and actually get different applications from the same reactivities just by the by the configuring them differently on the portal and the last of course we need to consider our df/dx be migrators so we should be we should be able to actually move the same JavaScript to the DXP very easily so how we did it I would like to start with this simplified architecture so just imagine that you have a portal page where the three portlets portlets they are responsible for rendering I hope that you can see my mouse now they are responsible for rendering this stuff in a JSP and it's just a container for the application and this is kind of configuration script tag which actually holds the name of the component of the root component of the react we are also passing a namespace in here to be able to render multiple instances and then we are passing a container name where we should actually render the component then there is a there is a initial data script so if you imagine the portal page now we have a portal page with three portlets so it means that there will be three these JSP fragments rendered on the page then it comes the JavaScript part the react Union part scans the whole page founds these script tags and actually injects and renders the react components into the into the lives according to the name of the root component considering all the facts that I will cover later on and it also does the fact it does the thing that when when it founds the component then it's a synchronously ask for the JavaScript to be able to actually render the component so it's downloading the resources efficiently and the last thing you need to include somehow the this JavaScript part is just a bundle into the into the application and we are doing it through a team because this is the this is the easiest way so let's cover these parts like more in a more in deep detail the first one is a portlet part I've already talked about the script tag the important thing is that we got this initial data part over there too because this this part is used for passing all the configuration or the portlet preferences to our widget so if we fill in this this part in the script tag then the reactive all pro can actually access these these things in properties of the route component and it's another good advantage is that it's a template so even the react developer if he don't know jsps exactly he can use it as a template and he can easily write this this part of the JSP and the last thing what I want to say I'm showing it because I want you to understand that we also created we also created a JSP tag which even simplify this this writing so now I'm gonna talk about the react developer point of view because this is the this is the most important stuff we are creating actually this for them to be able to include reacting today life right so we are developer he just write a standard root component all the container components read users and stuff he he usually is doing but then he needs to do two extra steps he needs to write a row J's file which is actually contract between the script ax which I've already showed you and contract between the between his application and he needs to do the entry module so let's cover these two more clearly I hope that it's it's visible but this file it's really important because over there you are saying that on this path this path it's actually matches the scripts track name name in the script tag and according to this when when our loader found the script tag with the name of AB to call form it searches to this wrote J's file and then according to this he knows what to do so he knows that he needs to inject a song synchronously he needs to inject two reducer in the state and he also know how to actually render the component inside of the death so in here we have a callback to the reach component for our framework to know what components to actually render into the page and the last thing I was talking about the efficient resource logging and this is the name of the chunk because if we don't put the portlet on the page this chunk is not loaded so it's not like it is using the resources efficiently and the other part which is necessary for JavaScript developer to write is the entry module and the entry module is something which is defining the belt because we said that we include everything in agile and the team but we need to define what is everything what is the Java Scala the JavaScript built of the application and we will define it in here so we can name in this array we can name as many application as we want H to name and then our framework just does through the web back multiple JavaScript files but these two are the most important ones because the wenzer and the entry module these two Java scripts needs to be included in the team the first one render they are just libraries like react react redux and all the libraries which are actually don't right and the second one it's really small JavaScript it's not like all the applications inside there is just logic which does the which does the loading of the widgets man when when when the actually the entry module search is for the widgets and do the a synchronous load of the rest of the JavaScript slicer on based on the what what the loader founds on the page okay so now let's talk about the development stuff how actually work the reactive ellebra he has something like a very similar fake portal page where he puts all the all the script tags and he just run npm start and he can easily develop everything or everything he can develop the application without even running the portal and i think it's it's it's good time to actually show you something so i just switched to my ide and hopefully it's visible again and i'm gonna show you a few things so and now imagine that i'm i'm a react developer i just closed all of these java stuff I'm not gonna comment the Java stuff because I think that all of you are very familiar with the portlet development with the theme development so I will focus just on the JavaScript part so this is the react union part and it's a boilerplate so I will I will discuss it later on but the JavaScript guy just needs to write a module it's application so it's in here so there is a there is a root component and there is the actual application I just make it bigger and I was talking about the local development so if he wants to start local development he just he just starts the NPM and p.m. on start and should be done good and it what it actually does it actually starts a local development server over this file so we can in here you can prepare oh sorry it's too small I just make it bigger but it's it's just a simple static page but you can put how many script tags as you want you want it to and it actually loads the application according to this static page and then if you decided to for example edit something so if I go back to the to the application yes I can easily easily edit for example it is the first section whether with a name so if I delete it save it the hot module reloading module should recognize it as you can see it over here and it's gone so it's immediately you don't even need to reload the page it's quite standard thing for the for the react developer for his development what but what we improved and what I'm going to show you now is that I also have a I also have a portal in here up and running sorry not on this board in here hopefully yeah I got the same application already deployed on the on the server and if I if I decided to find you in the application and develop it develop it with the portal I can just use a different different script like this one and if I start it it will actually start so the proxy over the over the Liferay development and I can actually do the same stuff so just wait for a while to to the application to start and we should see we should see it in action the first start a qual button should be I should be really fast so as you can see now now I connected the roses saying over the over the Liferay and if I do the same thing for example I'll add something now it should work too so just to return the stuff in here and for example at it I did this one okay I add one more in here and change the change the name oh sorry just a sec so and if I go back just wait for a while okay it looks like a hiccup so let's roll the page yeah and it's it's in here and it's when I when I delete it it should be it should be okay again then it's directly it should disappear yeah and it disappears so you can easily you can easily modify the front end of the application even when you are running in in a final stage on the portal what I want to also show you is how we how we handle the state things because I was talking about the fact that we can use a multiple instances on the page as you can see I have a multiple instances of the application using the read acts form so even with the validations as as you can see I'm using the same JavaScript code but the important thing is that it's actually not influencing each other I have I have a two different applications in here and if I just run this this console hopefully I just show it to the bottom as you can see according to namespace I actually separate the state on the two on the two parts so as you can see here I have a fields fill it in in the first form and here we go there is a second form so we also handle it to the namespaces problem of the end and instances problem in the Redax store so we can dynamically inject inject our our reducers so let's let's go back to the to the presentation so we did it that way and we are saying okay it's working for us but definitely there are some good stuff and there are some pitfalls so what we think that it's really achieve meant is that we actually got working production build and we managed to actually deliver the project which was where the team was like one only one portal specialist and like a three real developers so it's kind of a kind of good thing for us we feel that we are really proud of the fact that react developers can do what they do best at least 80% of their time and they just need to integrate with the portal at the final stage we are really proud of the fact that even on the Liferay portal the hot module reloading is still working and what I haven't showed but the chunks are loaded loaded asynchronously so we are also taken to account the efficient resource loading and we did one POC of the micro age migration of our application from the 6.2 to the dxp and we actually succeeded whether quite quite short time but on the other hand what we don't like or what we feel like it needs to be really improved the first one and I guess that everyone will tell me this is wrong we put the dependency of our react up locations in the team and actually making the portlets dependent on the team someone can say ok it's ok but we feel like ok it's not gonna it's it's not a good approach so we already managed to get rid of this dependency and we used the OSGi model with AMD loader and we managed to actually load our scripts through the OSGi module and through the AMD which is which is available in a life right the second very big not big problem but at least for if you want to work cooperate with multi multi vendor environment so whether multiple vendors you will realize that it's a not good idea to give them a boilerplate with a lot of folders when they need to search the right place where to put the application so we are so we are thinking okay we need to change this because it's not good idea to just send you zip and say let's start with this and yeah if you we feel that that the bootstrapping code and all the code which is handling the script act and a synchronous loading and injecting of the of the reducers dynamically into the store it should be like separated from the application itself so that's why we that's why we prepared a concept or we are working on a concept we call it Union two and our main goal was simplify development even more and just to make make it clear dependencies between modules and we found a way how to do it we actually completely separate all of the stuff like bootstrapping we also added a common line interface support and we separate it to the different NPM packages and from our new point of view the react developer just received the folder where he just rides a widget and he just receives a one configuration file where he just say ok and this is the way how you should register my widget in the application and that's and the rest of it all the code is just in a separate NPM packages and if he wants to develop multiple multiple widgets at a time we found out that learner Jas is really good tool because it actually allows you to develop multiple separate NPM packages together in a one hot spot hot module reloading cycle so even if you separate it on the NPM packages you can still work as I as I showed before another huge improvement or we feel that it's a kind of vacant provement is that we started to use react portals so in the previous example I've shown you that we have a multiple applications and each application is has its own virtual Dom and it has its own route component one in but if you use react portals you can have just a one would component and it's more efficient in a way that browser handles all the events and this stuff and the last last point which is really important we let more developers to start started from the beginning so we are trying to do it by doing extreme programming so they are discussing every every decision when they are preparing the Union to so I hope that it's gonna be it's gonna be perfect no not perfect but it's gonna be definitely better so let me sum it up the whole presentation I would like to say that now we got two working production build where where we run react and Liferay together and it's working perfectly customers satisfied we have also project on the dxp but this one is quite heavy one and it's running for more than six months and hopefully we will deliver it next year we feel that using react especially for the application development or for the widget development to the CMS is definitely faster than just doing it by by the JS piece especially if you have a real developers in your company so it's definitely a good way to consider and we are proud of the fact that we still kept the base portlet concept because i've seen a many implementation of angularjs or real JS on the portal but it ends up like you have to one single page application and you actually degrade the Liferay portal to do something which serve static content and we didn't do that we follow the portlet principles we still can use a portlet so we are kind of proud of the fact that we keep keep these main principles in here and yeah we realized that it's on this big project we are using for real developers and just one portal specialist and it's working perfectly so we feel that we can we can like change the change the structure of our team very easily and yeah we we manage the POC between which is migrating 6.2 to the DX be very easily but I must say that we also consider some changes on in the backend logic so we separated back-end logic from the Liferay itself so it's not only about life right but only about react but react helps a lot so based on these points I think that Liferay should meet with react more often and we are gonna push it and we hope that it's gonna work in the future too so thank you and now it's done the questions yeah it's that's that's a very good question not yet but because we are not we haven't opened sauce it yet but I was discussing this with our technical CTO and he said okay I think that that's a good way and we were discussing it like the presentation before it should be open source so I hope that we're gonna do it in in a few weeks hopefully I think we still have time for one or two more questions so I have a question do maybe have some examples or did you try to do this I mean including Cree act as the dependency which is loaded by AMD mojo 7 because I had some trouble for this and yeah we actually we actually managed I commented but maybe maybe I wasn't so clear we put it into the team because it's easier migrate table from 6.2 to the XP but our last customer he was asking for a better solution and even we received some feedback from the different colleagues from different companies and we managed to put the JavaScript into one OSGi module which is loaded by AMD and it's actually working so it's possible it's definitely worth it's great and do you have any examples alright right now it's not it's not in the public repository but we got an example and I can I can show you after the presentations great thank you thank you for the presentation it's really cool welcome my question would be how much code do the two portlets their share from the base react code is that they are just like namespaced and completely independent or is it just like a page react aware and the two portlets then just take the parts that are different I'm sure if I get right your question but you are asking how many code we need to write to be able to run the whole thing or no I mean that you have a react base right do you load the react twice no no just is it just once yeah yeah yeah yeah I got you a question now we actually create the belt which is in the vendor chairs there is just one react one everything one all like right library so one redux I wanna relax up in module bar and then at the theme level at the theme level yeah and if you do that by the AMD who is when the colleague is asking it's only loaded wants to okay so what just once on a page so what would be the the difference if that wasn't react then let's say it was angular yeah yeah it's gonna work with the angular 2 but you need to handle the same steps we did actually in our framework so you need to write your logic how to scan the tags you need to write a logic which actually renders the angular application inside of the inside of the inside of the derivative thank you actually actually we got one project where other colleagues trying to play with the angularjs and they are doing something similar but it's not like real production ready yet [Music]

Channel: Liferay

Views: 3,956

Rating: 4.818182 out of 5

Keywords:

Id: 5PmA0hNKzdY

Length: 29min 2sec (1742 seconds)

Published: Wed Oct 18 2017