Wybieranie biblioteki lub frameworka JavaScript

Z tego artykułu dowiesz się, jak wybrać bibliotekę lub platformę do użycia w aplikacji internetowej. Omówione tu kwestie pomogą Ci rozważyć zalety i wady poszczególnych rozwiązań i znaleźć bibliotekę lub platformę JavaScript, która będzie odpowiednia do rozwiązania Twojego problemu biznesowego. Zrozumienie, które zalety i wady mają zastosowanie w różnych sytuacjach, jest kluczem do sprawdzenia dużej liczby dostępnych bibliotek JavaScriptu.

Czym są biblioteki i platformy JavaScript

Co to jest biblioteka JavaScript? W najprostszej postaci biblioteka JavaScript to gotowy kod, który można wywołać w kodzie projektu, aby wykonać określone zadanie.

Ten post dotyczy głównie „bibliotek”. Jednak wiele z tych informacji dotyczy też platform. Różnicę między nimi można podsumować w ten sposób:

  • W przypadku biblioteki kod aplikacji wywołuje kod biblioteki.
  • W przypadku platformy kod aplikacji jest wywoływany przez platformę.

Różnice te ilustrują poniższe przykłady.

Przykładowe wywołanie biblioteki JavaScript

Biblioteka JavaScript wykonuje określone zadanie, a następnie zwraca kontrolę aplikacji. Gdy używasz biblioteki, kontrolujesz przepływ aplikacji i wybierasz, kiedy wywołać bibliotekę.

W poniższym przykładzie kod aplikacji importuje metodę z biblioteki lodash. Po zakończeniu działania funkcji kontrola jest zwracana do aplikacji.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

Po wykonaniu metody lodash.capitalize wywołuje ona wcześniej napisany kod JavaScript, który zamienia pierwszą literę ciągu znaków na wielką.

Przykład użycia platformy JavaScript

Platforma JavaScript to wstępnie zdefiniowany szablon kodu, w którym tworzysz zachowanie aplikacji. Oznacza to, że gdy używasz platformy, to ona kontroluje przepływ aplikacji. Aby użyć platformy, musisz napisać niestandardowy kod aplikacji, który następnie zostanie wywołany przez platformę.

Poniższy przykład pokazuje fragment kodu, który używa platformy JavaScript Preact:

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

W tym przykładzie widać, że platforma ma znacznie większą kontrolę nad kodem, który piszesz, a w niektórych przypadkach nawet decyduje o tym, kiedy go wykonać.

Dlaczego warto korzystać z biblioteki?

Korzystanie z biblioteki JavaScriptu może pomóc uniknąć niepotrzebnego powtarzania kodu. Biblioteki mogą abstrakcyjnie przedstawiać złożoną logikę, np. manipulowanie datami lub obliczenia finansowe. Biblioteka może też pomóc w stworzeniu pierwszego produktu, dzięki czemu nie trzeba pisać całego kodu od podstaw, co może być czasochłonne.

Niektóre biblioteki JavaScriptu po stronie klienta pomagają wyeliminować dziwne zachowania platformy internetowej. Biblioteka może też służyć jako narzędzie do nauki. Jeśli na przykład nie znasz funkcji wygładzania animacji, kod źródłowy biblioteki może Ci pomóc zrozumieć, jak działają takie funkcje.

Niektóre biblioteki są wspierane przez duże firmy, które inwestują czas i pieniądze w ich aktualizowanie i zabezpieczanie. Wiele bibliotek zawiera obszerną dokumentację, która pozwala Tobie i Twojemu zespołowi szybko zapoznać się z ich użyciem.

Korzystanie z biblioteki JavaScriptu pozwala zaoszczędzić czas.

Dlaczego warto zwracać uwagę na korzystanie z biblioteki?

Technicznie rzecz biorąc, możesz stworzyć aplikację internetową od podstaw, ale po co się trudzić, skoro możesz skorzystać z bezpłatnego oprogramowania (open source) lub kupić rozwiązanie, które na dłuższą metę pozwoli Ci zaoszczędzić czas i pieniądze? Dostępnych jest wiele bibliotek i platform JavaScriptu, z których każda oferuje unikalne podejście do rozwiązywania problemów i ma inne cechy. Na przykład:

  • Bibliotekę można napisać i utrzymywać wewnętrznie, a nie przez firmę zewnętrzną.
  • Biblioteka może mieć określone licencje prawne, które sprawiają, że jest odpowiednia lub nieodpowiednia dla Twojej aplikacji internetowej.
  • Biblioteka może być nieaktualna lub nieobsługiwana.
  • Biblioteka może uprościć zestaw złożonych zadań i zaoszczędzić Ci dużo czasu i pieniędzy.
  • Biblioteka może być powszechnie używana w społeczności i dobrze znana deweloperom.

Jak można się domyślić, różne cechy mogą wpływać na aplikację internetową na różne sposoby. Czasami decyzja nie jest aż tak ważna i możesz bezpiecznie zmienić bibliotekę, jeśli Ci się nie podoba. Czasami jednak biblioteka może mieć znaczący wpływ na Twoją pracę i aplikację internetową, co sugeruje, że może być konieczne bardziej świadome podejście.

W niektórych środowiskach JavaScriptu innych niż po stronie klienta, np. na serwerze (uruchamianym w środowisku chmury) lub na Raspberry Pi, może być konieczne dostosowanie kryteriów używanych do sprawdzania bibliotek i platform.

Wydajność

Nie należy ignorować wpływu biblioteki JavaScript na wydajność aplikacji internetowej po stronie klienta. Duża biblioteka JavaScriptu może zakłócać wczytywanie strony. Pamiętaj, że milisekundy przekładają się na miliony.

Wyobraź sobie sytuację, w której używasz biblioteki JavaScript do animacji. Niektóre biblioteki mogą łatwo dodać dziesiątki kilobajtów, a w niektórych przypadkach nawet setki kilobajtów. Zasoby JavaScriptu, takie jak ten, mogą znacznie opóźnić wczytywanie strony, ponieważ przeglądarka musi pobrać, przeanalizować, skompilować i wykonać kod.

Im większa biblioteka JavaScript, tym większy wpływ na wydajność dla użytkowników.

Podczas oceny lub używania biblioteki lub platformy JavaScript weź pod uwagę te sugestie, aby poprawić wydajność:

  • Jeśli masz dużą bibliotekę JavaScriptu, rozważ użycie mniejszej alternatywy. Na przykład date-fns oferuje wiele funkcji przy mniejszym rozmiarze niż inne opcje.
  • W nawiązaniu do poprzedniego przykładu z date-fns zaimportuj tylko te funkcje, których potrzebujesz, np. import { format } from 'date-fns'. Pamiętaj, aby połączyć to podejście z eliminacją martwego kodu, aby utworzyć i wysłać użytkownikom minimalny ładunek JavaScriptu.
  • Użyj narzędzi do testowania wydajności, takich jak Lighthouse, aby sprawdzić, jak użycie określonej biblioteki JavaScript wpływa na wydajność. Jeśli biblioteka wydłuża czas wczytywania strony o sekundę (pamiętaj, aby podczas testowania ograniczyć sieć i procesor), być może trzeba będzie ponownie ocenić wybraną bibliotekę. Oprócz sprawdzania wczytywania strony należy też profilować wszelkie zachowania strony internetowej, które wywołują kod z danej biblioteki – wydajność wczytywania strony nie daje pełnego obrazu sytuacji.
  • Jeśli autor biblioteki jest otwarty na komentarze, prześlij swoje uwagi dotyczące wydajności, sugestie, a nawet propozycje zmian w projekcie. W tym miejscu społeczność open source może się wykazać. Jeśli zdecydujesz się na przekazanie darowizny, najpierw skontaktuj się z pracodawcą.
  • Użyj automatycznego narzędzia do śledzenia pakietów, takiego jak bundlesize, aby wykrywać nieoczekiwanie duże aktualizacje biblioteki. Biblioteki JavaScriptu często z czasem się rozrastają. Dodawanie funkcji, poprawki błędów, przypadki skrajne i inne czynniki mogą zwiększyć rozmiar pliku biblioteki. Gdy Ty lub Twój zespół zgodzicie się na korzystanie z biblioteki, jej aktualizowanie może być mniejszym problemem i nie powinno budzić żadnych wątpliwości. W takich przypadkach warto skorzystać z automatyzacji.
  • Sprawdź wymagania dotyczące biblioteki i oceń, czy platforma internetowa oferuje tę samą funkcjonalność natywnie. Na przykład platforma internetowa oferuje już selektor kolorów, co eliminuje potrzebę używania biblioteki JavaScript firmy zewnętrznej do implementacji tej samej funkcji.

Bezpieczeństwo

Korzystanie z modułu innej firmy wiąże się z pewnymi zagrożeniami dla bezpieczeństwa. Szkodliwy pakiet w bazie kodu aplikacji internetowej może zagrozić bezpieczeństwu zarówno zespołu programistów, jak i użytkowników.

Rozważmy bibliotekę opublikowaną w ekosystemie NPM. Taki pakiet może być prawidłowy. Z czasem jednak pakiet może zostać naruszony.

Oto kilka wskazówek dotyczących bezpieczeństwa, które warto wziąć pod uwagę podczas korzystania z kodu innych firm lub jego oceny:

  • Jeśli korzystasz z GitHuba, rozważ użycie funkcji zabezpieczeń kodu, takich jak Dependabot. Możesz też rozważyć skorzystanie z alternatywnych usług, które skanują kod pod kątem luk w zabezpieczeniach, takich jak snyk.io.
  • Rozważ skorzystanie z usług audytu kodu, czyli zespołu inżynierów, którzy mogą ręcznie sprawdzić kod innej firmy, którego używasz.
  • Zastanów się, czy nie zablokować zależności w określonej wersji lub nie zatwierdzić kodu innej firmy w ramach kontroli wersji. Może to pomóc w zablokowaniu zależności do jednej konkretnej wersji, która jest uznawana za bezpieczną. Paradoksalnie może to mieć negatywny wpływ na bezpieczeństwo, ponieważ możesz przegapić ważne aktualizacje biblioteki.
  • Przejrzyj stronę główną projektu lub stronę w GitHubie, jeśli istnieje. Sprawdź, czy występują nierozwiązane problemy z bezpieczeństwem i czy poprzednie problemy z bezpieczeństwem zostały rozwiązane w rozsądnym terminie.
  • Kod firmy zewnętrznej, który korzysta z innego kodu firmy zewnętrznej, może wiązać się z większym ryzykiem niż biblioteka, która ma zero zależności. Pamiętaj o tym ryzyku.

Ułatwienia dostępu

Możesz się zastanawiać, jak biblioteki oprogramowania są powiązane z ułatwieniami dostępu w internecie. Biblioteka oprogramowania może być używana w różnych środowiskach, ale w przypadku biblioteki opartej na języku JavaScript po stronie klienta bardzo ważna jest dostępność w internecie.

Biblioteka (lub platforma) oparta na języku JavaScript po stronie klienta może zwiększyć lub zmniejszyć dostępność witryny. Weźmy na przykład bibliotekę JavaScript innej firmy, która dodaje do strony suwak obrazu. Jeśli suwak obrazu nie uwzględnia ułatwień dostępu w internecie, jako programista stron internetowych możesz przeoczyć tak ważną funkcję i wydać produkt, który nie ma kluczowych funkcji, takich jak suwak, po którym można się poruszać za pomocą klawiatury.

  • Czy wtyczka do responsywnej typografii obsługuje użytkowników, którzy powiększają lub pomniejszają stronę?
  • Czy wtyczka do przesyłania plików obsługuje przesyłanie plików z urządzeń wspomagających?
  • Czy biblioteka animacji obsługuje użytkowników, którzy wolą ograniczyć ruch?
  • Czy wtyczka map interaktywnych obsługuje korzystanie tylko z klawiatury?
  • Czy biblioteka odtwarzacza audio zapewnia odpowiednie wrażenia podczas korzystania z czytników ekranu?

Można oczekiwać, że aby spełnić te wymagania dotyczące ułatwień dostępu, konieczne będzie pewne zaangażowanie ze strony programisty stron internetowych. Na przykład:

  • Jeśli brakuje jakichś funkcji, możesz je zaimplementować w bazie kodu, nawet jeśli nadal używasz danej biblioteki.
  • Jeśli Twój pracodawca wyrazi na to zgodę, możesz dodać brakującą funkcję do biblioteki, o ile autor biblioteki na to zezwala.
  • Możesz rozpocząć rozmowę z autorem biblioteki. Czy na przykład te konkretne funkcje ułatwień dostępu są uwzględnione w Twoich planach? Czy zgadzasz się, że powinny być w bibliotece?
  • W przypadku popularnych zastosowań możesz poszukać alternatywnych bibliotek, które są bardziej dostępne. Mogą one istnieć, ale być trudniejsze do znalezienia.
  • W skrajnych przypadkach może być konieczne całkowite porzucenie biblioteki i wdrożenie funkcji od podstaw. Może się tak zdarzyć, gdy biblioteka lub platforma ma gorszą dostępność przy pierwszym użyciu i musisz cofnąć wiele z tego, co biblioteka lub platforma rzekomo daje Ci bezpłatnie.

Konwencje

Biblioteka oprogramowania, która korzysta z ustalonych konwencji kodowania, jest łatwiejsza w użyciu. Jeśli biblioteka używa nieznanej konwencji kodowania, Tobie i Twojemu zespołowi może być trudno z nią pracować.

Jeśli biblioteka nie jest zgodna z powszechnymi konwencjami kodowania (np. z popularnym przewodnikiem po stylu), nie możesz od razu wprowadzić poprawki. Nadal masz jednak kilka opcji:

  • Pamiętaj, aby odróżniać kod źródłowy biblioteki od interfejsu API udostępnionego Tobie, czyli użytkownikowi biblioteki. Chociaż wewnętrzny kod źródłowy może używać nieznanych konwencji, jeśli interfejs API (część biblioteki, z którą wchodzisz w interakcję) używa znanych konwencji, nie ma się czym martwić.
  • Jeśli interfejs API biblioteki nie jest zgodny z powszechnymi konwencjami kodowania, możesz użyć wzorca projektowego JavaScript, takiego jak wzorzec proxy, aby opakować i zawrzeć wszystkie interakcje z biblioteką w jednym pliku w bazie kodu. Serwer proxy może wtedy oferować bardziej intuicyjny interfejs API innym częściom kodu w bazie kodu.

Konwencje odgrywają dużą rolę w ułatwianiu korzystania z interfejsu. Biblioteka z intuicyjnym interfejsem API może zaoszczędzić wiele godzin, a nawet dni pracy w porównaniu z nieintuicyjnym interfejsem API, który wymaga wielu eksperymentów, aby go zrozumieć.

Aktualizacje

Na przykład w przypadku w pełni działającej biblioteki, która wykonuje kilka obliczeń matematycznych, aktualizacje mogą być rzadko potrzebne. W rzeczywistości biblioteka z pełnym zestawem funkcji to rzadkość w stale zmieniającym się świecie tworzenia stron internetowych. Czasami jednak chcesz, aby autor biblioteki był responsywny i chętny do wprowadzania aktualizacji. Nowe badania i odkrycia mogą ujawnić lepsze sposoby wykonywania zadań, dlatego techniki stosowane w bibliotekach i platformach zawsze mogą ulec zmianie.

Wybierając bibliotekę lub platformę, zwróć uwagę na sposób obsługi aktualizacji i pamiętaj, że takie decyzje mogą mieć na Ciebie wpływ:

  • Czy biblioteka ma rozsądny harmonogram publikacji? Na przykład aktualizacje repozytorium kodu źródłowego mogą być częste, ale jeśli nie zostaną odpowiednio „opublikowane” lub „wydane”, pobranie ich może być trudne.
  • Czy biblioteka udostępnia aktualizacje z rozsądnym schematem wersjonowania oprogramowania? Biblioteka powinna oszczędzać Twój czas. Jeśli musisz nieoczekiwanie zmieniać kod za każdym razem, gdy aktualizujesz wersję biblioteki, może to podważyć sens korzystania z tej biblioteki. Zmiany powodujące niezgodność są czasami nieuniknione, ale w idealnym świecie zmiany są rzadkie i nie są wymuszane na użytkownikach biblioteki.
  • Czy biblioteka zapewnia zgodność wsteczną? Czasami aktualizacje oprogramowania mogą wprowadzać zmiany powodujące niezgodność, ale zapewniają też warstwę zgodności wstecznej. Dzięki temu użytkownik biblioteki może korzystać z jej najnowszej wersji przy minimalnych zmianach w kodzie.

Licencjonowanie

Licencjonowanie oprogramowania jest ważnym aspektem korzystania z bibliotek oprogramowania innych firm. Autor biblioteki może przypisać do niej licencję. Jeśli rozważasz użycie biblioteki, wybór licencji może mieć na Ciebie wpływ.

Na przykład biblioteka JavaScript może mieć licencję na oprogramowanie, która pozwala na używanie jej w środowisku niekomercyjnym. W przypadku osobistego projektu hobbystycznego może to być świetny wybór. Jeśli Twój projekt ma charakter komercyjny, rozważ zakup licencji Enterprise.

W razie wątpliwości rozważ skorzystanie z profesjonalnej porady prawnej lub skonsultuj się z zespołem prawnym w swojej firmie.

Społeczność

Biblioteka lub platforma, która ma dużą społeczność użytkowników i współtwórców, może być przydatna, ale nie jest to gwarancją. Ogólnie rzecz biorąc, im więcej użytkowników ma biblioteka lub platforma, tym większe prawdopodobieństwo, że przyniesie korzyści. Oto kilka zalet i wad uczestnictwa w społeczności deweloperów:

Zalety:

  • Duża baza użytkowników może oznaczać większe prawdopodobieństwo wczesnego i częstego wykrywania błędów.
  • Duża aktywna społeczność może oznaczać więcej samouczków, przewodników, filmów, a nawet kursów dotyczących danej biblioteki lub platformy.
  • Duża, aktywna społeczność może oznaczać większe wsparcie na forach i stronach z pytaniami i odpowiedziami, co zwiększa prawdopodobieństwo uzyskania odpowiedzi na pytania dotyczące pomocy.
  • Zaangażowana społeczność może oznaczać więcej zewnętrznych współtwórców biblioteki lub platformy. Mogą pomóc w tworzeniu funkcji, których nie ma w harmonogramie autora.
  • Jeśli biblioteka lub platforma jest popularna w społeczności, istnieje większe prawdopodobieństwo, że Twoi współpracownicy i znajomi słyszeli o niej lub nawet ją znają.

Wady:

  • Projekt z dużą i zróżnicowaną bazą użytkowników może stać się zbyt rozbudowany z powodu ciągłego dodawania funkcji. Zbyt duże biblioteki mogą negatywnie wpływać na wydajność sieci.
  • Projekt z aktywną i zaangażowaną społecznością może być stresujący dla autorów i opiekunów oraz może wymagać intensywnego moderowania społeczności.
  • Projekt, który szybko się rozwija, ale nie ma odpowiedniego wsparcia, może zacząć wykazywać oznaki toksycznej społeczności. Na przykład początkujący lub młodsi programiści stron internetowych mogą czuć się niemile widziani w określonej społeczności z powodu gatekeepingu.

Dokumentacja

Niezależnie od tego, jak prosta lub złożona jest biblioteka lub platforma JavaScript, dokumentacja oprogramowania zawsze może pomóc. Nawet bardzo doświadczeni deweloperzy korzystają z dokumentacji, zamiast samodzielnie pisać kod. Dokumentacja wyjaśnia, którego interfejsu API należy używać i jak to robić.

Dokumentacja może nawet zawierać przykładowy kod, który ułatwi Ci szybkie rozpoczęcie pracy. Oceniając bibliotekę lub platformę, możesz zadać sobie te pytania:

  • Czy biblioteka zawiera dokumentację? Jeśli nie, musisz samodzielnie znaleźć rozwiązanie.
  • Czy dokumentacja jest jasna, zrozumiała i jednoznaczna? Wielu deweloperów poświęca dużo czasu na dokumentację. Może się to wydawać nieistotne, ale przejrzystość dokumentacji tekstowej może mieć duży wpływ na produktywność.
  • Czy dokumentacja jest generowana całkowicie automatycznie? Taka dokumentacja może być trudniejsza do zrozumienia i nie zawsze zawiera jasne wskazówki dotyczące korzystania z interfejsu API.
  • Czy dokumentacja jest aktualna? Konserwacja dokumentacji jest czasami traktowana jako kwestia drugorzędna. Jeśli biblioteka zostanie zaktualizowana, ale dokumentacja nie, może to prowadzić do marnowania czasu na programowanie.
  • Czy dokumentacja jest wyczerpująca i dostępna w różnych formatach? Przewodniki użytkownika, przykładowy kod, dokumentacja referencyjna, demonstracje na żywo i samouczki to cenne formaty dokumentacji, które mogą pomóc w korzystaniu z biblioteki lub platformy.

Dokumentacja nie zawsze musi być kompletna. Musisz ocenić potrzeby organizacji, wymagania projektu i złożoność oprogramowania, a następnie określić, jakiego poziomu dokumentacji potrzebujesz.

Podsumowanie

To normalne, że przy pierwszym wyborze biblioteki lub platformy możesz czuć się przytłoczony(-a). Podobnie jak w przypadku innych rzeczy, im więcej się uczysz i ćwiczysz, tym lepiej Ci idzie. Może on być przydatny, gdy następnym razem będziesz wybierać bibliotekę lub platformę. Nagłówki w tym poście możesz wykorzystać jako listę kontrolną. Na przykład: czy ta biblioteka jest wydajna? Czy ta biblioteka spełnia standardy mojej firmy dotyczące ułatwień dostępu w internecie?

Istnieją inne aspekty bibliotek i platform, które warto wziąć pod uwagę, a które nie zostały szczegółowo omówione w tym poście:

  • Możliwość rozszerzania: jak łatwo można rozszerzyć bibliotekę o niestandardową logikę lub zachowanie?
  • Narzędzia: czy biblioteka zawiera narzędzia takie jak wtyczki do edytora kodu, narzędzia do debugowania i wtyczki do systemu kompilacji (jeśli dotyczy)?
  • Architektura: czysty kod jest ważny, ale czy ogólna architektura biblioteki jest sensowna?
  • Testy: czy projekt ma zestaw testów? Czy witryna projektu używa plakietek lub wskaźników, które zestaw testów przekazuje do najnowszego zatwierdzenia?
  • Zgodność: czy biblioteka dobrze współpracuje z innymi bibliotekami lub platformami, których obecnie używasz?
  • Koszt: jaki jest koszt platformy? Czy jest to rozwiązanie open source, czy można je kupić?
  • Wskaźniki próżności: powinny znajdować się na dole listy kryteriów lub można je całkowicie zignorować, ale warto wziąć pod uwagę „głosy” na projekt, konta w mediach społecznościowych, które reprezentują projekt, lub liczbę otwartych błędów/problemów na stronie projektu.