Best practice to reference the third party js libraries. | Community
Skip to main content
B
BigT168
Level 5
June 26, 2017
Solved

Best practice to reference the third party js libraries.

  • June 26, 2017
  • 5 replies
  • 4736 views

We try to use Bootstrap, JQuery, AngularJs and other third party js libraries. Right now, some libraries provide the CDN access, for example, bootstrap, you can add this  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> into the customheaderlibs. I also see AEM  has bootstrap under this path /etc/clientlibs/social/thirdparty/bootstrap.

The question is what's the best practice to include the third party js lib?

Thanks.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by VeenaVikraman

    There is no harm in adding external libraries until unless you think there is any scope of ending up in an error. So as lasling​ suggested, even I would recommend to add it to the bottom.

    But there may be cases , where if some external JS plugins are not YUI Compressor compatible, it can end up in errors in your publish as in publish Minification is enabled by default.. We have faced this issue while using some third-party JS files in our projects and it took some time to figure out what was causing issue.

    In that case I would recommend you to download that JS and modify it and include it with your Clientlibs, or request the developers to provide you a YUI compatible version of the same plugin and you can include it to your project clientlibs.

    Thanks

    Veena

    5 replies

    MC_Stuff
    MC_Stuff
    Level 10
    June 26, 2017

    Hi BigT168,

         In the headlibs.jsp part of page template component include the external library.   If you are using DTM you can inject there also.

    Thanks,

    L
    leeasling1
    Level 3
    June 27, 2017

    I would suggest the footer right before the </body> tag so they're not render blocking.

      B
      BigT168Author
      Level 5
      June 27, 2017

      Thank you for the response.

      I actually try to ask if we should use, for example, the Bootstrap from AEM or from CDN or should have our own copy of the Bootstrap?

      VeenaVikraman
      Community Advisor
      VeenaVikramanCommunity AdvisorAccepted solution
      Community Advisor
      June 27, 2017

      There is no harm in adding external libraries until unless you think there is any scope of ending up in an error. So as lasling​ suggested, even I would recommend to add it to the bottom.

      But there may be cases , where if some external JS plugins are not YUI Compressor compatible, it can end up in errors in your publish as in publish Minification is enabled by default.. We have faced this issue while using some third-party JS files in our projects and it took some time to figure out what was causing issue.

      In that case I would recommend you to download that JS and modify it and include it with your Clientlibs, or request the developers to provide you a YUI compatible version of the same plugin and you can include it to your project clientlibs.

      Thanks

      Veena

        VeenaVikraman
        Community Advisor
        VeenaVikramanCommunity Advisor
        Community Advisor
        June 27, 2017

        oh Let me correct myself here. The above scenario which we faced was when we included the thrid party plugins to our clientlibs,. But I have never tried the other way (adding the external link) to know if that also get minified (logically i don't think it shud be as it is residing in another platform totally ). I am sorry if this confuses ..

        Terms & ConditionsAccessibility statement

        Loading footer...