everwatchsolutions/convergent-ui

Ask for new feature : export and import tag to deal with web performance

Opened this issue · 2 comments

jhaeyaert commented

Sorry, don't known where to purpose this feature.

In a micro applications / services architecture, each application is responsible of a small piece of functionalities of a bigger system.

For instance the footer-app could be responsible to manage all things about the website footer.
The footer is then included into the website homepage using a <div data-loc="http://page-footer-app" />

For isolation and simplicity (dev, deployment, ...), I want that the page-footer application declares all js scripts and dedicated css styles inside its own templates.

Currently, this approach will cause web performance issues cause my footer css will be loaded at end of the page and maybe some important js too.

So, I working on a directive allowing to export some tags and import them at right position during process of the main page.

An example is worth a thousand words.

Imagine the main html page served at http://mywebsite/ :

<html>
   <head>
      <link **data-import="css"** />
      <script **data-import="js"** />
   </head>
   <body>
      ...
      <div data-loc="http://page-footer-app" />
   </body>
</html>

And my footer app that responds :

      <link type="text/css" rel="stylesheet" href="http://cdn/footer.css" media="all"  **data-export="css"**>
      <script type="text/javascript" **data-export="js"**>
         function() {....}
      </script>
      <div>
         <p>This is my fantastic footer page</p>
      </div>

Note : this is not very pertinent to have a footer.css but it's an example.

This way, I manage my dedicated footer styles and scripts into footer templates.
When the convergent-ui filter will render the final page, my css and js resources will be included at right place (and removed on the other side). I can also add some normal scripts into my footer template that do not need to be placed into head tag (-> don't specify data-export attribute)

Right now I adapted the code and have a simple solution (less than 10 lines of code) only working with script and link tags (it could be extended to all tags but certainly with a lot of performance issues).

Let me now if you're interested by this feature and think it could be good to share.

PS : Sorry for the approximative english (yeah i'm a french guy, ...)

andrewserff commented

If I'm understanding this right, you can already accomplish this. We have one applicaiton that uses plain HTML/CSS/jQuery and another that uses ReactJS. So I didn't want to include ReactJS into the main application so we just include it in the page that will show that portion of the ui. So I include the css and the javascript from the backend service and it works! Here is how they are loaded:

<head>
    <link rel="stylesheet" href="/cui-req://https://service2/static/css/service2.css" />
</head>

And the Javascript is loaded at the bottom of the page body like:

<body>
  ...
 <script src="/cui-req://https://service2/static/js/service2.js"></script>
</body>

Let me know if that's not what you're after.

jhaeyaert commented

Hi,

It's not exactly the same use case. In your case, we can see that there is a high coupling between backend and service2. Indeed, every time I need to add or modify some resources into templates of service2, I need to go back to backend application and add these ressources too.
If the backend application merges multiple services developed by different teams, each team will be responsible to inform the backend team that there is maybe some evolution to make.

What I want to achieve is to be able to have full independent applications capable to tell the main application template that there are some elements to import (maybe the ressources aren't manage by the service itself but by a tiers like cdn).

This way, I can have a footer app :

<link type="text/css" rel="stylesheet" href="http://cdn/footer.css" media="all"  data-export="css">

 <div>
      <p>This is my fantastic footer page</p>
</div>

And an header app :

<link type="text/css" rel="stylesheet" href="http://cdn/header.css" media="all"  data-export="css">

 <div>
      <p>This is my fantastic Header page</p>
</div>

Then my homepage application :

<html>
   <head>
      <link **data-import="css"** />
      <script **data-import="js"** />
   </head>
   <body>
      <div data-loc="http://page-header-app" />
      ...
      <div data-loc="http://page-footer-app" />
   </body>
</html>

Will be resolved like this :

<html>
   <head>
      <link type="text/css" rel="stylesheet" href="http://cdn/header.css" media="all"  data-export="css">
      <link type="text/css" rel="stylesheet" href="http://cdn/footer.css" media="all"  data-export="css">
   </head>
   <body>
      <div>
         <p>This is my fantastic Header page</p>
      </div>
      ...
      <div>
         <p>This is my fantastic footer page</p>
      </div>
   </body>
</html>

Note that if no js script is imported, the tag will be basically removed.

Is it more clear for you ?