{"action":"created","issue":{"url":"https://api.github.com/repos/acesinc/convergent-ui/issues/7","repository_url":"https://api.github.com/repos/acesinc/convergent-ui","labels_url":"https://api.github.com/repos/acesinc/convergent-ui/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/acesinc/convergent-ui/issues/7/comments","events_url":"https://api.github.com/repos/acesinc/convergent-ui/issues/7/events","html_url":"https://github.com/acesinc/convergent-ui/issues/7","id":145027582,"number":7,"title":"Ask for new feature : export and import tag to deal with web performance","user":{"login":"jhaeyaert","id":5955401,"avatar_url":"https://avatars.githubusercontent.com/u/5955401?v=3","gravatar_id":"","url":"https://api.github.com/users/jhaeyaert","html_url":"https://github.com/jhaeyaert","followers_url":"https://api.github.com/users/jhaeyaert/followers","following_url":"https://api.github.com/users/jhaeyaert/following{/other_user}","gists_url":"https://api.github.com/users/jhaeyaert/gists{/gist_id}","starred_url":"https://api.github.com/users/jhaeyaert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jhaeyaert/subscriptions","organizations_url":"https://api.github.com/users/jhaeyaert/orgs","repos_url":"https://api.github.com/users/jhaeyaert/repos","events_url":"https://api.github.com/users/jhaeyaert/events{/privacy}","received_events_url":"https://api.github.com/users/jhaeyaert/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-03-31T21:46:29Z","updated_at":"2016-04-01T07:07:10Z","closed_at":null,"body":"Sorry, don't known where to purpose this feature.\r\n\r\nIn a micro applications / services architecture, each application is responsible of a small piece of functionalities of a bigger system. \r\n\r\nFor instance the footer-app could be responsible to manage all things about the website footer.\r\nThe footer is then included into the website homepage using a `<div data-loc=\"http://page-footer-app\" />`\r\n\r\nFor isolation and simplicity (dev, deployment, ...), I want that the page-footer application declares all js scripts and dedicated css styles inside its own templates. \r\n\r\nCurrently, 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. \r\n\r\nSo, I working on a directive allowing to export some tags and import them at right position during process of the main page.\r\n\r\nAn example is worth a thousand words.\r\n\r\nImagine the main html page served at http://mywebsite/ :\r\n```\r\n<html>\r\n   <head>\r\n      <link **data-import=\"css\"** />\r\n      <script **data-import=\"js\"** />\r\n   </head>\r\n   <body>\r\n      ...\r\n      <div data-loc=\"http://page-footer-app\" />\r\n   </body>\r\n</html>\r\n```\r\n\r\nAnd my footer app that responds  :\r\n```\r\n      <link type=\"text/css\" rel=\"stylesheet\" href=\"http://cdn/footer.css\" media=\"all\"  **data-export=\"css\"**>\r\n      <script type=\"text/javascript\" **data-export=\"js\"**>\r\n         function() {....}\r\n      </script>\r\n      <div>\r\n         <p>This is my fantastic footer page</p>\r\n      </div>\r\n```\r\nNote : this is not very pertinent to have a footer.css but it's an example.\r\n\r\nThis way, I manage my dedicated footer styles and scripts into footer templates.\r\nWhen 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)\r\n\r\nRight 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).\r\n\r\nLet me now if you're interested by this feature and think it could be good to share.\r\n\r\nPS : Sorry for the approximative english (yeah i'm a french guy, ...)\r\n"},"comment":{"url":"https://api.github.com/repos/acesinc/convergent-ui/issues/comments/204278315","html_url":"https://github.com/acesinc/convergent-ui/issues/7#issuecomment-204278315","issue_url":"https://api.github.com/repos/acesinc/convergent-ui/issues/7","id":204278315,"user":{"login":"jhaeyaert","id":5955401,"avatar_url":"https://avatars.githubusercontent.com/u/5955401?v=3","gravatar_id":"","url":"https://api.github.com/users/jhaeyaert","html_url":"https://github.com/jhaeyaert","followers_url":"https://api.github.com/users/jhaeyaert/followers","following_url":"https://api.github.com/users/jhaeyaert/following{/other_user}","gists_url":"https://api.github.com/users/jhaeyaert/gists{/gist_id}","starred_url":"https://api.github.com/users/jhaeyaert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jhaeyaert/subscriptions","organizations_url":"https://api.github.com/users/jhaeyaert/orgs","repos_url":"https://api.github.com/users/jhaeyaert/repos","events_url":"https://api.github.com/users/jhaeyaert/events{/privacy}","received_events_url":"https://api.github.com/users/jhaeyaert/received_events","type":"User","site_admin":false},"created_at":"2016-04-01T07:07:10Z","updated_at":"2016-04-01T07:07:10Z","body":"Hi,\r\n\r\nIt'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.\r\nIf 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.\r\n\r\nWhat 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).\r\n\r\nThis way, I can have a footer app :\r\n\r\n```\r\n<link type=\"text/css\" rel=\"stylesheet\" href=\"http://cdn/footer.css\" media=\"all\"  data-export=\"css\">\r\n\r\n <div>\r\n      <p>This is my fantastic footer page</p>\r\n</div>\r\n```\r\n\r\nAnd an header app :\r\n\r\n```\r\n<link type=\"text/css\" rel=\"stylesheet\" href=\"http://cdn/header.css\" media=\"all\"  data-export=\"css\">\r\n\r\n <div>\r\n      <p>This is my fantastic Header page</p>\r\n</div>\r\n```\r\n\r\nThen my homepage application :\r\n```\r\n<html>\r\n   <head>\r\n      <link **data-import=\"css\"** />\r\n      <script **data-import=\"js\"** />\r\n   </head>\r\n   <body>\r\n      <div data-loc=\"http://page-header-app\" />\r\n      ...\r\n      <div data-loc=\"http://page-footer-app\" />\r\n   </body>\r\n</html>\r\n```\r\n\r\nWill be resolved like this :\r\n\r\n```\r\n<html>\r\n   <head>\r\n      <link type=\"text/css\" rel=\"stylesheet\" href=\"http://cdn/header.css\" media=\"all\"  data-export=\"css\">\r\n      <link type=\"text/css\" rel=\"stylesheet\" href=\"http://cdn/footer.css\" media=\"all\"  data-export=\"css\">\r\n   </head>\r\n   <body>\r\n      <div>\r\n         <p>This is my fantastic Header page</p>\r\n      </div>\r\n      ...\r\n      <div>\r\n         <p>This is my fantastic footer page</p>\r\n      </div>\r\n   </body>\r\n</html>\r\n```\r\n\r\nNote that if no js script is imported, the tag will be basically removed.\r\n\r\nIs it more clear for you ?"}}