JavaScriptové knihovny a frameworky

Jirka Kosek

Poslední modifikace: $Date: 2017/12/16 17:30:36 $

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>

leafletjs.com

  • open-source knihovna pro zobrazení OpenStreet map

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

  • dokumentace

  • <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <div id="map"></div>
    <script>
    var map = L.map('map').setView([50.83, 15.04], 10);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    </script>

D3.js

Web Components

Web Components

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

  • komponenty zapouzdřují určitou funkcionalitu

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

  • mnoho věcí, které se dnes musí programovat, 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/

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

  • https://angularjs.org

  • verze 2 odstraňuje mnohé problémy, cenou je ztráta zpětné kompatability – https://angular.io

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/

Když JavaScript nestačí

Historie JS

  • nový jazyk vyvinutý za necelé dva týdny pro Netscape v půlce 90. let

  • drobné odlišnosti v implementacích mezi prohlížeči byly postupně odstraněny díky standardizovanému ECMAScriptu

  • po více jak 20 letech chybí v JS některé moderní koncepty

  • pro vývoj rozsáhlých aplikací chybí typová kontrola

  • řešení:

    • nové verze ECMAScript, které doplňují chybějící funkcionalitu

    • nové jazyky, které lze kompilovat do „starého JS“

    • různé pomocné nástroje

Verze ECMAScript

  • ES5 – 2009, podporují všechny prohlížeče

  • ES6/ES2015 – 2015, nepodporují všechny prohlížeče

  • ES7/ES2016 – 2016, nepodporují všechny prohlížeče

  • ES8/ES2017 – 2017, nepodporují všechny prohlížeče

  • novou syntaxi a funkcionalitu lze používat již dnes díky transpileru https://babeljs.io

Transpilace

Užitečné nástroje

  • Closure Compiler – kompilace, minifikace, deklarace a kontrola typů

  • Flow – deklarace/inference a kontrola typů

Další zdroje informací

Doporučená četba