How should I work on Bootstrap and JavaScript links?

1

What is the best way to work with Bootstrap or JavaScript?

  • Referencing by CDN

    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    
  • Referencing for the downloaded file

    link rel="stylesheet" href="#">#                    
  • asked by anonymous 01.06.2018 / 16:40

    1 answer

    3

    The two forms are complementary and both with their respective disadvantage advantages.

    Ideally, you should always prefer the version that is on the CDN, because, of course, it is on the CDN. A file on the CDN will usually load much faster than one on the server itself, especially when it comes to Bootstrap and Jquery, which are used on most sites. This is because, if your client has already accessed any other site that uses the same file on the CDN, the client will already have the version used downloaded on his computer and thus will use the same one. Do not worry, the browser does all the heavy lifting for you.

    But if the client does not have the version already downloaded and the connection to the CDN server is unstable, your application will not be able to load correctly. Relying on external applications, which we do not have control of, is not always a good option. If the file is small and does not hinder the loading of your application, you can only use the local version by pointing to the file on your own server.

    If you want to take advantage of both solutions, I advise you to import the file directly from the CDN and create a fallback with JavaScript so that if the file does not load successfully import your version local. This way, if CDN is available, it will use all the advantages of it, but when not, it will load the local version, even requiring more time to load the application, but preventing it from being broken.

    It's quite common to see this approach in importing jQuery:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/js/jquery-1.10.2.min.js"><\/script>')</script>
    

    In the first row the library is imported from what would be equivalent to the CDN. If this request fails, the window.jQuery object will continue to be null, causing the local file import script to be created on the second line.

      

    Note : Even nothing prevents you from using another CDN service like fallback , but it would also have the same problems and ideally, / em> to it; it depends a lot on the project you are doing, but honestly I have never seen any application that used multiple fallbacks and was harmed by not using it.

    Additional readings

    01.06.2018 / 17:09