JavaScriptové knihovny a frameworky

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, …

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…)

$("#button").on("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

$.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);
    });
  });
})

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

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>

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>

open-source knihovna pro zobrazení map

využívá mapové podklady OpenStreetMap, ale může využívat i jiné (např. Mapy.cz)

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>

knihovna pro vizualizaci dat

http://d3js.org/

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, Templates, Shadow DOM, ES Modules

dnes již podporují všechny prohlížeče

https://www.webcomponents.org/

framework pro snazší tvorbu Web Components

https://lit.dev

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

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

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

obsahuje šablonovací systém, který se deklarativně napojí na data, která se mají zobrazovat v DOMu

umožňuje snadnou definici komponent a jejich skládání do aplikace

lze snadno kombinovat s dalšími knihovnami

https://vuejs.org/

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í nejvíce chybí typová kontrola a balíčkovací systém

řešení:

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

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

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

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

ES9/ES2018 – ?

…

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

mnoho „lepších“ jazyků lze zkompilovat do JS

TypeScript

CoffeeScript

Dart

Elm

…

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

Flow – deklarace/inference a kontrola typů

…

Úvod do jQuery

Dokumentace k jQuery

Návod k použití Chrome Developer Tools