IC SunsetThe developerWorks Connections platform will be sunset on December 31, 2019. On January 1, 2020, this forum will no longer be available. More details available on our FAQ.
Topic
  • 5 replies
  • Latest Post - ‏2019-02-07T22:46:32Z by Java_Home
jrromao
jrromao
4 Posts

Pinned topic WCM Script Portlet & Angular 5 - How to structure a big application

‏2018-01-17T18:49:25Z |

Hello.

In my company we are currently developing an implementation project of a WebSphere Portal Server and we want to develop some of our features in Angular 5.
After some testing, we chose to build our application in an external IDE and import it into a Script Portlet, provided by the IBM Digital Experience.

We like to have your opinion about the structure we should use in our application...


One of the possibilities we have is to split the application into several sub-applications, but because each of them must be integrated into a Script Portlet, we will lose the advantage of having a single-page application. The navigation between sub-applications will require to communicate between portlets (eventually switching between portal pages) and this will refresh the entire portal, degrading the response times.
How would you recommend that we structure our project avoiding the problem to manage a giant Angular application in a single Script Portlet?

Thank you.

  • jim.barnes
    jim.barnes
    1074 Posts

    Re: WCM Script Portlet & Angular 5 - How to structure a big application

    ‏2018-01-18T13:47:01Z  

    If I wanted to do a really big SPA, I would not use the script portlet,

    What we have done in the past, is make the portal them the holder of the angular app, and then just have the various components on the page, 

    Really though depending on the size of the app, why even use portal for the rendering of the spa?

    If you are doing everything on one page, it is an overkill to use portal to hose one page

  • jrromao
    jrromao
    4 Posts

    Re: WCM Script Portlet & Angular 5 - How to structure a big application

    ‏2018-01-18T14:24:40Z  

    We need to use the portal because we must provide another pages where we will include WCM Content Viewer Portlets.

    Can you help us how to "make the portal them the holder of the angular app"?

    We would like to avoid the use of iFrames... Is it possible to create a kind of "angular portlet"?

    Thank you very much.

  • jim.barnes
    jim.barnes
    1074 Posts

    Re: WCM Script Portlet & Angular 5 - How to structure a big application

    ‏2018-01-18T20:28:13Z  
    • jrromao
    • ‏2018-01-18T14:24:40Z

    We need to use the portal because we must provide another pages where we will include WCM Content Viewer Portlets.

    Can you help us how to "make the portal them the holder of the angular app"?

    We would like to avoid the use of iFrames... Is it possible to create a kind of "angular portlet"?

    Thank you very much.

    sorry that was portal theme.   so you have the base code as part of your themes, and then have the pages load what ever additional javascript they might need for modules on the page

    and yes it is entirely possible to make an angular portlet, just have the html in the jsp render your app and call in your js.

    Additionally you can retrieve wcm content via a rest feed instead of pulling it through a render portlet, so you could incorporate it into an SPA

  • KristopherBarry
    KristopherBarry
    2 Posts

    Re: WCM Script Portlet & Angular 5 - How to structure a big application

    ‏2018-01-19T13:48:21Z  

    Here's a good example and a place to get started creating an Angular-based Script Portlet using Dx:


    https://developer.ibm.com/digexp/docs/docs/script-portlet/using-angular-angular-4-single-page-application-script-portlet/

  • Java_Home
    Java_Home
    1 Post

    Re: WCM Script Portlet & Angular 5 - How to structure a big application

    ‏2019-02-07T22:46:32Z  
    Hi everyone, 
     
    I tried integration between angular-6 and WebSphere portal.
     
    It works but with some problems, I did NOT recommend to integrate angular-6 with WebSphere portal due following : 
     
    1- You need to create separate portlet for each portal page, 
    suppose you create angular-portlet-1, you need to set specific portal page (hard-coded) inside <base> tag, so you can't use this portlet with different pages. So you need to duplicate your angular portlet code to add on multiple pages paths inside <base> tag.
     
    2- WebSphere portal URL parameters will truncated which kept WebSphere portal behaviors, from my opinion i think this is fetal error, because WebSphere portal kept all required these information in this encrypted parameters.
     
    3-  You can't create portal page for specific component inside portlet, you need to switch through components using links inside page or directly from URL address bar.  Because portal theme iterate on portal pages, its can't iterate though angular component unless your hard-coded components URIs.
     
    4- You can't add two angular portlets in same page, you will get 'Error: Zone already loaded'
     
    5- Now WebSphere portal act as Tomcat !! Yes if you going to use WPS to host angular portlets so why you need to purchase licence ?
    Even you have content, you can use free-tools, or use WCM and integrate though rest services. 
     
    Angular 2.x : 
     
    6- For important application, i think its not recommend to build your business logic using Typescript, because all those scripts will transfer to client browser, then he can reverse engineering, also JavaScript its not reliable language to build important business such banking or government.
     
    7- If you need to leverage your application and enhance performance, you need to utilize your application technology.
    I think Angular-JS it very good option to use as front-end for your portlet because its working under portal umbrella not working as SPA.
     
    8- Angular-2 export application in just four JS files, so in huge application these files sizes will be more than 10 MB, and maybe cause some issues with browsers. (I am not sure about this issue can cause an issue with browser or no)
     
     
    Summary, I think selecting angular option based on your system, if you need to develop simple system you can use scrip-portlet with one component (no router-outlet), but if you have big system go with spring-portlets with Angular-JS front-end, then you can use Java and WPS power and benefits with fast performance from angular.  
     
    You can't reliable your important system on JavaScript to make your system fast!
     
    Thanks