10 Ciekawych Bibliotek w JavaScript

W tym wpisie przestawię 10 bibliotek, o których ostatnio usłyszałem i które mnie zainteresowały z jakiegoś powodu.

1. Node-Falafel - Falafel to biblioteka w node, która umożliwia transformacje drzewa (AST) kodu JavaScript. Prawdopodobnie można użyć Webpack-a albo Rollup-a aby móc użyć jej w przeglądarce.

Użycie jest bardzo proste, jedno wywołanie funkcji:

var falafel = require('falafel');

var src = '(' + function () {
    var xs = [ 1, 2, [ 3, 4 ] ];
    var ys = [ 5, 6 ];
    console.dir([ xs, ys ]);
} + ')()';

var output = falafel(src, function (node) {
    if (node.type === 'ArrayExpression') {
        node.update('fn(' + node.source() + ')');
    }
});
console.log(output);

powyższy kod doda funkcje jako wrapper dla każdego wyrażenia tablicowego.

(function () {
    var xs = fn([ 1, 2, fn([ 3, 4 ]) ]);
    var ys = fn([ 5, 6 ]);
    console.dir(fn([ xs, ys ]));
})()

Działa też dla JSX poprzez custom-owy parser np. acorn-jsx.

2. Animejs - Ciekawa biblioteka do animacji.

3. Isomorphic-git - Biblioteka dla node i przeglądarek do obsługi gita. Wspominałem o niej w ostatnim wpisie Server WWW w przeglądarce.

4. number-flip - Biblioteka dodaje dość znaną animacje, zmiany liczb lub ciągu znaków z jednej wartości na drugą.

5. jquery.fn - Biblioteka zawiera kilka plugin-ów jQuery, najciekawsze są macro, które tworzy plugin jQuery z wywołań jQuery oraz proximity, zdarzenie które odpala się, gdy kursor myszki znajduje się w pobliżu elementu.

6. re-template-tag - Ciekawa funkcja jako tag szablonów ciągu znaków (ang. template literals).

var regex = re`/foo/u`;

Dzięki temu, że jest to szablon można korzystać ze zmiennych wewnątrz wyrażenia regularnego. Niestety jest to tylko mała nadbudówka nad natywnym obiektem RegExp.

Ciekawym pomysłem byłoby połączenie tego rozwiązania (które ma tylko kilka linii kodu) razem z biblioteką XRegExp aby dodać nowe funkcje do wyrażeń regularnych. I co ciekawe taka biblioteka już istnieje w repozytorium npm, a jest nią xre.

7. Svelte - Ciekawy framework/kompilator, który generuje minimalistyczny kod, który korzysta tylko z Vanilla JavaScript.

8. JIMP - czyli JavaScript Image Manipulation Program. Odpowiednik ImageMagick w JavaScript według kodu w npm powinien działać także w przeglądarce.

9. Proxymise - Biblioteka upraszczająca użycie funkcji, które mają api podobne do fetch, gdzie wartość obietnicy posiada funkcje, którą trzeba wywołać.

Dla funkcji fetch, kod by wyglądał tak:

(async () => {
    const value = await proxymise(fetch('https://jcubic.pl/feed.xml'))
        .text().match(/<title>(.*?)<\/title>/)[1];
    document.body.innerHTML = value;
})();

gdyby mieć już zdefiniowaną funkcje compose lub pipe, z jakiejś biblioteki lub własną, to można by nadpisać fetch:

window.fetch = compose(fetch, proxymise);
// lub
window.fetch = pipe(proxymise, fetch);

10. Shimport - Biblioteka, która umożliwia korzystanie z nowej funkcji w JavaScript, jaką są importy, (moduły ES2015), w każdej przeglądarce.