JavaScriptové knihovny a frameworky

Jirka Kosek

Poslední modifikace: $Date: 2016/12/02 09:26:24 $

Proč čistý JavaScript někdy nestačí

  • mezi prohlížeči pořád existují drobné nekompatibility nebo rozdíly v podporovaných technologiích

  • ošetřování rozdílů mezi prohlížeči je pracné

  • mnoho běžných úkolů je v čistém JS+DOM zbytečně zdlouhavých a složitých

  • pro psaní rozsáhlých aplikací je užitečná abstrakce, která nám dovolí lépe se orientovat v rozsáhlém kódu

jQuery

jQuery

  • https://jquery.com/

  • dnes asi nejznámější a nejpoužívanější knihovna

  • usnadňuje průchod a minipulaci s DOM, obsluhu událostí, animace, AJAX, …

Základní použití

  • knihovnu je potřeba nejprve načíst do stránky

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  • knihovnu lze načítat z CDN nebo si udělat vlastní kopii

  • veškerá funkcionalita je dostupná pomocí objetu $

  • elementy lze snadno vybírat pomocí selektorů

    $("#button")
  • pomocí metod lze pak snadno dále pracovat s vybranými elementy

    $("#button").click(… co se má stát, když se klikne na tlačítko…)
  • spuštění kódu po načtení stránky

    $(document).ready(… co se má stát, když je stránka celá načtená…)
  • demo

jQuery a AJAX

  • $().ajax() – univerzální silně parametrizovatelná funkce

  • $().get() – provedení požadavku GET

  • $().getJSON() – provedení požadavku GET, který vrací v JSON

  • $().post() – provedení požadavku POST

  • $().load() – snadné načtení a vložení fragmentu HTML do stránky

  • kód je obvykle mnohem kratší než v čistém JS

    $(document).ready(function() {
      $("#btn").click(function() {
        $.getJSON("http://localhost:8000/data.json", function(osoba) {
          $("#result").html("Jméno je " + osoba.jmeno + " a věk je " + osoba.vek);
        });
      });
    })

Související knihovny

  • jQuery UI – snadná tvorba uživatelského rozhraní

  • jQuery Mobile – knihovna pro tvorbu rozhraní vhodného i pro mobilní a dotyková zařízení

  • QUnit – knihovna pro jednotkové testování JS kódu

Zajímavé knihovny

Google Maps JavaScript API

  • snadné vkládání map do stránek

  • pomocí API lze do mapy přidávat další vrstvy, body, trasy, …

  • při větším počtu požadavků placené

  • dokumentace

  • <div id="map"></div>
    <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
            async defer></script>

Seznam Mapy API

  • snadné vkládání map do stránek

  • pomocí API lze do mapy přidávat další vrstvy, body, trasy, …

  • dokumentace

  • <script src="//api.mapy.cz/loader.js"></script>
    <div id="mapa"></div>
    <script>
    var stred = SMap.Coords.fromWGS84(14.41, 50.08);
    var mapa = new SMap(JAK.gel("mapa"), stred, 10);
    mapa.addDefaultLayer(SMap.DEF_BASE).enable();
    mapa.addDefaultControls();
    </script>

D3.js

Web Components

Web Components

  • sada specifikací, které umožní vytváření komponent pomocí základních webových technologií – HTML+CSS+JS

  • komponenty budou zapouzdřovat určitou funkcionalitu

  • zamezí nežádoucí interakci mezi více knihovnami vloženými na stránce

  • mnoho věcí, které se dnes musí programovat, půjde do stránky vložit čistě deklarativním způsobem

  • postaveno na čtyřech technologiích: Custom Elements, HTML Imports, Templates, Shadow DOM

  • podpora v prohlížečích postupně vzniká

  • http://webcomponents.org/

  • katalog komponent: https://customelements.io/

Polymer

Frameworky pro vývoj aplikací

Angular JS

  • rozšiřuje HTML o relativně snadnou možnost tvorby aplikací

  • zabudovaný obousměrný data-binding odstraňuje nutnost ruční synchronizace DOMu se stavem aplikace

  • u rozsáhlejších aplikací může mít Angular 1 problémy s výkonem

  • připravuje se podstatně lepší verze 2

  • https://angularjs.org/

React

  • populární a výkonná knihovna pro tvorbu uživatelského rozhraní

  • umožňuje snadnou definici komponent, ze kterých se vykresluje stránka aplikace

  • lze používat jednoduchý šablonovací jazyk JSX nebo kód generovat pomocí funkcí

  • komponenty vykreslující stránku aplikace tvoří virtuální DOM

  • React se snaží uživatele zcela odstínit od DOM a kvůli výkonu vždy modifikuje jen nejnutnější části DOM

  • lze kombinovat s dalšími knihovnami

  • pro řízení toku aplikace a dat se často používá knihovna Flux

  • https://facebook.github.io/react/

Další zdroje informací

Doporučená četba