Libraries

use the arrow keys to navigate; press space for slide overview
image from Webmuch

Libraries

Libraries

What is a library

Choosing a library

  • So, you want a library to solve a specific problem. How do you know if a library is right for you? Checklist:
    1. do you really need a library? (or is it just to hide your lack of Javascript skills?)
    2. does it fit your needs? (check the configuration options)
    3. is it well documented?
    4. is it easy to use?
    5. is it responsive?
    6. does it have a reasonable file size?
    7. can you customize the design? (preferably with CSS)
    • if the candidate fails on any of these checks, look for another!

Using a library

  • The exact steps may differ, but they typically are:
    1. many libraries require jQuery (see further): download and include jQuery in your page
    2. next, go to the library website and download the library
    3. unzip it, and copy the relevant files, usually from a dist/ folder to your project
    4. include necessary CSS and JS files from this folder in the <head> resp. <body>
    5. next configure and use your library (check the documentation)

OWL Carousel demo (1)

  • As an example, we'll demonstrate how to use OWL Carousel. Let's start from this empty HTML page:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>OWL Carousel demo</title>
      <meta charset="utf-8" />
      <!-- vendor styles go here -->
      <!-- ... -->
      <style>
        html { font-size: 62.5%; }
        body { background-color: #eee; min-height: 100%; }
        header { max-width: 960px; margin: 0 auto; }
      </style>
    </head>
    <body>
      <!-- vendor scripts go here -->
      <!-- ... -->
    </body>
    </html>

OWL Carousel demo (2)

  • OWL Carousel requires jQuery (see documentation), so download it and include it in your project:
    ...
    <body>
      <!-- vendor scripts go here -->
      <script src="vendor/jquery.min.js"></script>
    </body>
    </html>
    • .min.js is by convention the filename of a compressed version of a js file
    • good practice: put all of your vendor scripts in a subfolder vendor/

OWL Carousel demo (3)

  • Next, download and unzip OWL Carousel. The dist/ folder contains the needed distribution files; copy them to a new folder vendor/owlcarousel/ (you may skip files like README.md or LICENSE):
    dist folder in zip contents
    content copied to vendor/owlcarousel/

OWL Carousel demo (4)

  • Now add the necessary stylesheets to the <head>, and script to the bottom of <body> (see documentation):
      ...
      <link rel="stylesheet" href="vendor/owlcarousel/assets/owl.carousel.min.css">
      <link rel="stylesheet" href="vendor/owlcarousel/assets/owl.theme.default.min.css">
      <style>
        ...
      </style>
    </head>
    <body>
      <script src="vendor/jquery.min.js"></script>
      <script src="vendor/owlcarousel/owl.carousel.min.js"></script>
    </body>
    </html>

OWL Carousel demo (5)

  • Finally add the HTML markup, and init the carousel with a script at the bottom (see documentation):
      ...
      <body>
      <div class="owl-carousel owl-theme">
        <img src="images/foto1.jpg" alt="">
        <img src="images/foto2.jpg" alt="">
        <img src="images/foto3.jpg" alt="">
        ...
      </div>
      <script src="vendor/jquery.min.js"></script>
      <script src="vendor/owlcarousel/owl.carousel.min.js"></script>
      <script>
        $(document).ready(function() {
          $(".owl-carousel").owlCarousel({
              loop: false
          });
        });
      </script>
    </body>
    </html>

TinyMCE web editor example

  • Another all-time classic, the TinyMCE web editor:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Word processor example</title>
      <script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
      <script type="text/javascript">
        tinyMCE.init({
          // General options
          mode : "textareas",
          plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
    
          // Theme options
          theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
          theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        });
      </script>
    </head>
    <body>
      <form method="post" action="#">
        <p>
          <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 650px">
            <p>This is the first paragraph.</p>
            <p>This is the second paragraph.</p>
            <p>This is the third paragraph.</p>
          </textarea>
        </p>
        <p>
          <input type="submit" name="save" value="Submit" />
          <input type="reset" name="reset" value="Reset" />
        </p>
      </form>
    </body>
    </html>
    

Libraries

Frameworks

What is a framework

  • Framework: fundamentally changes the way we use Javascript
    • Javascript language extensions (looping, string & array functions...)
    • cross browser solutions for DOM handling or events
    • enforce a strict coding methodology like MVC
    • target a specific platform like mobile web apps
  • Some popular frameworks:
    • frameworks is usually not easily combined
    • frameworks are usually hard to learn, but pay off once you mastered them
    • remarkably, frameworks are usually free too
    • frameworks are usually strongly opinionated, i.e. force you in methodology / style etc...

jQuery (1)

  • JQuery was invented in 2006 by John Resig, solving many of the serious limitations and caveats of Javascript (and CSS) at the time.
  • Arguably historically the most popular framework. At its peak, about 90% of all websites used JQuery, whereas its competitors were far behind at not more than 10%.
  • Today, the vast majority of sites still uses jQuery, but more and more for legacy reasons (like libraries requiring jQuery).

jQuery (2)

  • Probably its main feat was making DOM handling easier:
  • window.addEventListener('load', function() {
      let allMenuLinks = document.querySelectorAll('#myMenu a');
      for (let lnk of allMenuLinks) {
        lnk.addEventListener('click', function() {
          console.log(this.innerHTML + ' link clicked');
          this.classList.add('visited');
        });
      }
    });
    $(window).on('load', function() {
      let $allMenuLinks = $('#myMenu a');
      $allMenuLinks.on('click', function() {
        console.log($(this).text() + ' link clicked');
        $(this).addClass('visited');
      });
    });

jQuery (3)

  • Also allows all kinds of animations:
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>JQuery animation demo</title>
      <meta charset="utf-8" />
    </head>
    <body>
      <button id="btn1">toggle</button>
      <p id="par1">
        Leven ons vraag jonge goa ouder. Schatkist ad aardschok bepaalden producten ik gomboomen te er.
        Dan naast alais ijzer ten. Ons uitmaakt machtige menschen kapitaal zou pogingen tin gestoken.
        Verklaart bijgeloof mengeling er versteend nu. Uithoudt oog die doodende staatjes het verschil.
        Opzicht nu fortuin nu menigte. Hen verwoede voorraad grootste ton elastica laatsten wij uit.
      </p>
      <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
      <script>
        $('#btn1').on('click', function() {
          $('#par1').slideToggle();
        });
      </script>
    </body>
    </html>

jQuery UI

  • More effects, interactions, UI components etc... can be found in the jQuery UI library, built on top of the jQuery framework. Bounce example:
  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>jQuery UI Effects - Effect demo</title>
      <meta charset="utf-8" />
      <style>
        body {
          font: 12px Arial;
        }
        #box {
          width: 200px;
          background-color: #ccc;
          border-radius: 10px;
          border: 2px solid #aaa;
          padding: 10px 20px;
        }
      </style>
    </head>
    <body>
      <p><input type="button" id="btn1" value="Run Effect" /></p>
      <p id="box">
        Etiam libero neque, luctus a, eleifend nec, semper at, lorem.
        Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
      </p>
      <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
      <script>
        $("#btn1" ).on('click', function() {
          $("#box").effect('bounce');
        });
      </script>
    </body>
    </html>

jQuery (4)

Since the introduction of new CSS techniques like transitions/animations, and the many improvements made to Javascript, jQuery gradually looses its relevance. Its decline is clearly visible on Google Trends:

Frameworks popularity

Disappearing into oblivion is the fate of every framework, as nicely illustrated on StackOverflow Trends:

frameworks vs vanilla

  • Frameworks (and libraries) typically have a lifespan of 5, maximum 10 years.
  • Learning a framework is usually hard, and takes time. Choosing the "right" framework is tricky, and mostly a matter of personal preference.
  • before taking on frameworks, you should properly learn your vanilla Javascript; it is the only front-end technology made to last, and the best investment in your human capital at this point
  • therefore, frameworks are outside the scope of this course

Libraries

[Node.js runtime]

Node.js example

  • Node.js is actually not a framework, but a platform built on Chrome's V8 Javascript runtime to build network applications. A simple webserver example (install Node first):
    var http = require('http');
    
    http.createServer(function (request, response) {
      response.writeHead(200, {'Content-Type': 'text/plain'});
      response.end('Hello World\n');
    }).listen(8124);
    
    console.log('Server running at http://127.0.0.1:8124/');
  • In the command prompt:
    > node example.js
    Server running at http://127.0.0.1:8124/
  • now open this link in your browser...
Odisee logo