Wybierz bibliotekę lub platformę JavaScript

Umar Hansa

Z tego artykułu dowiesz się, jak wybrać bibliotekę lub platformę do użycia w aplikacji internetowej. Zawarte tu dyskusje pomogą Ci poznać zalety i wady biblioteki lub platformy JavaScript w odniesieniu do problemu, który próbujesz rozwiązać. Wiedza na temat wad i zalet aplikacji w poszczególnych sytuacjach jest kluczem do sprawdzenia dużej liczby dostępnych bibliotek JavaScript.

Co to są biblioteki i platformy JavaScript

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

W tym poście głównie wspominamy o „bibliotekach”. Jednak wiele z tych dyskusji dotyczy też ram. Różnice między tymi 2 elementami 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 tę platformę.

Poniższe praktyczne przykłady ilustrują różnice.

Przykładowe wywołanie biblioteki JavaScript

Biblioteka JavaScript wykonuje określone zadanie, a potem przekazuje kontrolę aplikacji. Gdy używasz biblioteki, kontrolujesz przepływ danych w aplikacji i decydujesz, kiedy wywołać bibliotekę.

W tym przykładzie kod aplikacji importuje metodę z biblioteki lodash. Po zakończeniu działania funkcja przekazuje kontrolę aplikacji.

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

Przy wykonywaniu metody lodash.capitalize wywołuje ona gotowy kod JavaScript, który zaczyna wielką literą pierwszy znak ciągu.

Przykład użycia platformy JavaScript

Platforma JavaScript to wstępnie zdefiniowany szablon kodu, w którym budujesz działanie aplikacji. Oznacza to, że gdy używasz platformy, ona kontroluje przepływ aplikacji. Aby korzystać z platformy, musisz napisać niestandardowy kod aplikacji, a platforma będzie go wywoływać.

Ten przykład pokazuje fragment kodu korzystający z ramy JavaScript Preact:

import { createElement } from 'preact';

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

W tym przykładzie zauważysz, że framework ma znacznie większą kontrolę nad napisanym przez Ciebie kodem, a w niektórych przypadkach nawet decyduje, kiedy go wykonać.

Dlaczego warto korzystać z biblioteki?

Biblioteka JavaScript pozwala uniknąć niepotrzebnego powtarzania kodu. Biblioteki są w stanie wyodrębnić złożoną logikę, taką jak manipulacja datami czy obliczenia finansowe. Biblioteka może też pomóc w opracowaniu początkowego produktu bez konieczności pisania całego kodu od zera, co może trochę potrwać.

Niektóre biblioteki JavaScript po stronie klienta pomagają w uproszczaniu dziwactw platformy internetowej. Biblioteka może też pełnić funkcję narzędzia do nauki. Jeśli na przykład nie znasz funkcji wygładzania animacji, możesz zapoznać się z kodem źródłowym biblioteki.

Niektóre biblioteki współpracują z dużymi firmami, które inwestują czas i pieniądze w aktualizację i bezpieczeństwo bibliotek. Wiele bibliotek jest uzupełnionych obszerną dokumentacją, która pozwala Ci i Twojemu zespołowi szybko zapoznać się z ich używaniem.

Korzystanie z biblioteki JavaScript pozwala zaoszczędzić czas.

Dlaczego warto śledzić wykorzystanie biblioteki?

Teoretycznie możesz opracować aplikację internetową od podstaw, ale po co się męczyć, skoro możesz skorzystać z bezpłatnego oprogramowania (oprogramowania open source) lub kupić rozwiązanie, które w długim okresie pozwoli Ci zaoszczędzić czas i pieniądze? Dostępnych jest wiele bibliotek i ramek JavaScript, z których każda oferuje unikalne podejście do rozwiązywania problemów i która ma inne cechy. Na przykład:

  • Biblioteka może być napisana i obsługiwana wewnętrznie, a nie przez firmę zewnętrzną.
  • Biblioteka może mieć określone licencje prawne, dzięki którym biblioteka jest odpowiednia lub nieodpowiednia do aplikacji internetowej.
  • Biblioteka może być nieaktualna lub nieutrzymywana.
  • Biblioteka może uprościć zestaw złożonych zadań i zaoszczędzić dużo czasu i pieniędzy.
  • Biblioteka może być szeroko używana w społeczności i być dobrze znana wśród deweloperów.

Jak można się domyślać, różne cechy mogą mieć różny wpływ na aplikację internetową. Czasem decyzja nie jest aż tak ważna – możesz zastąpić bibliotekę, która Ci się nie spodoba. Czasami jednak biblioteka może mieć znaczny wpływ na Twoją pracę i aplikację internetową, co sugeruje, że konieczne może być bardziej świadome podejście.

W niektórych środowiskach JavaScriptu, np. na serwerze (w środowisku chmurowym) lub na Raspberry Pi, może być konieczne dostosowanie kryteriów weryfikacji bibliotek i platform.

Wyniki

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

Przeanalizujmy scenariusz, w którym do animacji używasz biblioteki JavaScript. Niektóre biblioteki mogą łatwo dodać dziesiątki kilobajtów, a w niektórych przypadkach nawet setki kilobajtów. Tego typu zasoby JavaScript mogą znacznie opóźnić wczytywanie strony, bo 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 frameworku JavaScript weź pod uwagę te sugestie dotyczące zwiększania wydajności:

  • W przypadku dużej biblioteki JavaScript rozważ użycie mniejszej alternatywy. Na przykład pakiet date-fns oferuje wiele funkcji w rozsądnym rozmiarze w porównaniu z niektórymi innymi opcjami.
  • W nawiązaniu do poprzedniego przykładu funkcji date-fns zaimportuj tylko potrzebne funkcje, np. import { format } from 'date-fns'. Połącz to podejście z potrząsaniem drzew, aby przygotować i wysłać do użytkowników minimalny ładunek JavaScript.
  • Aby sprawdzić wpływ korzystania z konkretnej biblioteki JavaScript na wydajność, użyj narzędzi do testowania wydajności, takich jak Lighthouse. Jeśli biblioteka wydłuża czas wczytywania strony o 1 sekundę (pamiętaj, aby podczas testowania ograniczać działanie sieci i procesora), być może warto rozważyć zmianę biblioteki. Oprócz sprawdzenia wczytywania strony pamiętaj o profilowaniu każdego działania strony, które wywołuje kod z danej biblioteki – wydajność wczytywania strony nie mówi wszystkiego.
  • Jeśli autor biblioteki akceptuje komentarze, prześlij swoje spostrzeżenia dotyczące wydajności, sugestie, a nawet wkład w projekt. To właśnie wyróżnia społeczność open source. Jeśli zdecydujesz się przekazać darowiznę, być może musisz najpierw skontaktować się z pracodawcą.
  • Korzystaj z automatycznego narzędzia do śledzenia pakietów, takiego jak bundlesize, aby wykrywać niespodziewanie duże aktualizacje biblioteki. Zwykle biblioteka JavaScript zwiększa swoją objętość z czasem. Dodawanie funkcji, naprawianie błędów, obsługa przypadków szczególnych i inne działania mogą zwiększać rozmiar pliku biblioteki. Gdy Ty lub Twój zespół zdecydujecie się na używanie biblioteki, jej aktualizowanie może być mniej kłopotliwe i nie powinno budzić żadnych wątpliwości. Właśnie wtedy przydaje się automatyzacja.
  • Sprawdź wymagania dotyczące biblioteki i oceń, czy platforma internetowa oferuje te same funkcje. Na przykład platforma internetowa oferuje już selektor kolorów, dzięki któremu nie trzeba używać biblioteki JavaScript innej firmy do wdrożenia tej samej funkcji.

Bezpieczeństwo

Korzystanie z modułu zewnętrznego wiąże się z pewnymi zagrożeniami dla bezpieczeństwa. Złośliwy pakiet w bazie kodu aplikacji internetowej może zagrażać bezpieczeństwu zarówno zespołu programistów, jak i użytkowników.

Rozważ bibliotekę opublikowaną w ekosystemie NPM. Taka przesyłka może być wiarygodna. Jednak z czasem pakiet może zostać zaatakowany.

Oto kilka wskazówek dotyczących bezpieczeństwa, o których warto pamiętać podczas korzystania z kodu zewnętrznego lub jego oceny:

  • Jeśli korzystasz z GitHub, rozważ oferty dotyczące bezpieczeństwa kodu, takie jak Dependabot. Możesz też skorzystać z usług alternatywnych, które skanują kod pod kątem luk w zabezpieczeniach, np. snyk.io.
  • Rozważ skorzystanie z usług audytu kodu, czyli zespołu inżynierów, który może ręcznie sprawdzić używany przez Ciebie kod zewnętrzny.
  • Zastanów się, czy warto zablokować zależności do określonej wersji czy zatwierdzić kod innej firmy w ramach kontroli wersji. Pomoże Ci to zablokować zależność do jednej konkretnej wersji, która jest uznawana za bezpieczną. Co dziwne, może to mieć odwrotny skutek w zakresie bezpieczeństwa, ponieważ możesz przegapić ważne aktualizacje biblioteki.
  • Przeskanuj stronę główną projektu lub stronę GitHub, jeśli taka istnieje. Sprawdź, czy istnieją nierozwiązane problemy z bezpieczeństwem oraz czy wcześniejsze problemy z bezpieczeństwem zostały rozwiązane w rozsądnym czasie.
  • Kod zewnętrzny, który korzysta z innego kodu, może wiązać się z większym ryzykiem niż biblioteka, która nie ma żadnych zależności. Pamiętaj o tym ryzyku.

Ułatwienia dostępu

Zastanawiasz się pewnie, jaki związek mają biblioteki oprogramowania z dostępnością stron internetowych. Biblioteka oprogramowania może być używana w różnych środowiskach, ale w kontekście biblioteki po stronie klienta opartej na JavaScriptu duże znaczenie ma dostępność witryny.

Biblioteka JavaScript po stronie klienta (lub platforma) może zwiększać lub zmniejszać ułatwienia dostępu w witrynie. Możesz użyć zewnętrznej biblioteki JavaScript, która dodaje do strony suwak obrazów. Jeśli suwak obrazów nie uwzględnia dostępności stron internetowych, jako deweloper stron internetowych możesz przeoczyć tak ważną funkcję i opublikować produkt, który nie zawiera kluczowych funkcji, takich jak możliwość sterowania suwakiem za pomocą klawiatury.

  • Czy wtyczka do typografii RWD 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 umożliwia korzystanie tylko z klawiatury?
  • Czy biblioteka odtwarzacza audio działa prawidłowo w przypadku czytników ekranu?

Rozsądnie jest oczekiwać, że Ty jako twórca stron internetowych będziesz musiał w pewnym stopniu zaangażować się w spełnianie tych wymagań dotyczących dostępności. Na przykład:

  • W przypadku brakujących funkcji możesz je zaimplementować w kodeksie źródłowym, nawet jeśli nadal używasz danej biblioteki.
  • Możesz z pomocą pracodawcy przekazać taką brakującą funkcję do biblioteki, o ile tylko jej autor wyrazi na to zgodę.
  • Możesz rozpocząć rozmowę z autorem biblioteki. Czy na przykład masz w planach udostępnienie tych ułatwień dostępu? Czy zgadzasz się, że należą do biblioteki?
  • W przypadku popularnych zastosowań możesz zapoznać się z alternatywnymi opcjami biblioteki, które są bardziej dostępne. Mogą one istnieć, ale są trudniejsze do znalezienia.
  • W skrajnym przypadku może być konieczne całkowite odinstalowanie biblioteki i wdrożenie funkcji od podstaw. Może się tak zdarzyć, gdy biblioteka lub framework ma ograniczone możliwości ułatwień dostępu podczas pierwszego użycia i musisz cofnąć wiele z tych funkcji, które rzekomo są dostępne bezpłatnie.

Kongresy

Z biblioteki oprogramowania, która korzysta ze ściśle określonych konwencji kodowania, łatwiej jest korzystać. Jeśli w bibliotece stosowana jest konwencja kodowania, o której nie słyszycie, może to utrudniać pracę Tobie i Twojemu zespołowi.

Jeśli biblioteka nie przestrzega zwykłych konwencji kodowania (np. wspólnego poradnika stylu), nie ma możliwości natychmiastowego rozwiązania problemu. Nadal masz kilka opcji:

  • Pamiętaj, aby odróżniać kod źródłowy biblioteki od interfejsu API udostępnionego 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ą się komunikujesz) używa znanych konwencji, nie musisz się martwić.
  • Jeśli interfejs API biblioteki nie jest zgodny z popularnymi konwencjami kodowania, możesz użyć wzorca projektowego JavaScriptu, takiego jak wzorzec serwera proxy, aby zapakować wszystkie interakcje z biblioteką w pojedynczy plik w bazie kodu. Proxy może wtedy oferować bardziej intuicyjny interfejs API dla innych części kodu w Twojej bazie kodu.

Konwencje odgrywają dużą rolę w łatwości obsługi. Biblioteka, która zawiera intuicyjny interfejs API, może zaoszczędzić wiele godzin, a nawet dni, w porównaniu z nieintuicyjnym interfejsem API, który wymaga wielu eksperymentów.

Aktualizacje

Na przykład w przypadku w pełni działającej biblioteki, która wykonuje kilka obliczeń matematycznych, aktualizacje mogą być potrzebne bardzo rzadko. Biblioteka z pełną funkcjonalnością to rzadkie znalezisko w stale zmieniającym się świecie programowania. Czasami jednak chcesz, aby autor biblioteki był dostępny i chętny do wprowadzania zmian. Nowe badania i odkrycia mogą ujawnić lepsze sposoby wykonywania zadań, dlatego techniki używane w bibliotekach i ramach są zawsze podatne na zmiany.

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

  • Czy biblioteka ma sensowny harmonogram publikacji? Na przykład aktualizacje repozytorium kodu źródłowego mogą być częste, ale jeśli nie są „opublikowane” lub „wydane”, ich pobranie może być trudne.
  • Czy biblioteka jest aktualizowana zgodnie z rozsądnym schematem wersji oprogramowania? Biblioteka pomoże Ci zaoszczędzić czas. Jeśli kod musisz zmieniać za każdym razem, gdy aktualizujesz wersję biblioteki, może to zniweczyć cel jej użycia. Czasami nie da się uniknąć zmian powodujących przerwanie działania, ale w idealnym świecie zmiany są rzadkie i nie są narzucane użytkownikom bibliotek.
  • Czy biblioteka inwestuje w zgodność wsteczną? Czasami aktualizacje oprogramowania mogą nie wiązać się ze zmianami, które mogą niekorzystnie wpłynąć na działanie usługi, ale zapewniają też warstwę zgodności wstecznej. Dzięki temu użytkownik biblioteki może korzystać z jej najnowszej wersji z minimalnymi zmianami w kodzie.

Licencjonowanie

Licencjonowanie oprogramowania jest ważnym aspektem korzystania z bibliotek oprogramowania innych firm. Autor biblioteki może przypisać licencję do swojej biblioteki. Jeśli rozważasz użycie biblioteki, wybrana przez nią licencja może mieć na Ciebie wpływ.

Na przykład biblioteka JavaScript może mieć licencję, która zezwala na jej używanie w środowisku niekomercyjnym. Może to być doskonały wybór w przypadku projektów hobbystycznych. Jeśli Twój projekt zawiera elementy komercyjne, warto rozważyć licencję dla firm.

W razie wątpliwości skonsultuj się z prawnikami lub z działem prawnym w swojej firmie.

Społeczność

Biblioteka lub framework z dużą społecznością użytkowników/współtwórców może być przydatna, ale nie jest to gwarancja. Ogólnie rzecz biorąc, im więcej użytkowników ma dana biblioteka lub platforma, tym większa jest szansa, że przyniesie ona korzyści. Zastanów się nad poniższymi zaletami i wadami udziału w społeczności programistów:

Zalety:

  • Duża liczba użytkowników może oznaczać większe szanse na wczesne i częste wykrywanie 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ększą pomoc na forach i witrynach 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 frameworku. Dzięki nim możesz wprowadzić funkcje, których autor nie mógłby w przyszłości uwzględnić.
  • Jeśli biblioteka lub framework jest popularna w danej społeczności, istnieje większe prawdopodobieństwo, że Twoi koledzy i koleżanki słyszeli o niej lub nawet ją znają.

Wady:

  • Projekt z dużą i zróżnicowaną bazą użytkowników może stać się zbyt obszerny z powodu ciągłego dodawania funkcji. Rozbudowane biblioteki mogą obniżać wydajność sieci.
  • Projekt z aktywnymi i zaangażowanymi użytkownikami może być stresujący dla autorów i konserwatorów oraz wymagać intensywnego moderowania.
  • Projekt, który rozwija się szybko, 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 mogą poczuć się nieprzyjęci w określonej społeczności z powodu reżimu.

Dokumentacja

Niezależnie od tego, czy dana biblioteka lub framework JavaScript jest prosta czy złożona, dokumentacja oprogramowania zawsze może pomóc. Nawet bardzo doświadczeni deweloperzy korzystają z dokumentacji, zamiast samodzielnie analizować kod. Dokumentacja zawiera informacje o tym, którego interfejsu API należy używać i jak z niego korzystać.

Dokumentacja może zawierać przykładowy kod, który ułatwi Ci szybkie rozpoczęcie pracy. Podczas oceny biblioteki lub platformy możesz zadać te pytania:

  • Czy biblioteka zawiera dokumentację? Jeśli nie, musisz samodzielnie dowiedzieć się, jak to zrobić.
  • Czy dokumentacja jest przejrzysta, zrozumiała i nie budzi wątpliwości? 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 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? Dbanie o dokumentację czasem traktuje się priorytetowo. Jeśli biblioteka jest zaktualizowana, ale dokumentacja nie jest, może to prowadzić do straty czasu przy tworzeniu aplikacji.
  • Czy dokumentacja jest obszerna i dostępna w różnych formatach? Przewodniki użytkownika, przykładowy kod, dokumentacja referencyjna, prezentacje na żywo i samouczki to cenne formaty dokumentacji, które mogą pomóc w skutecznym korzystaniu z biblioteki lub platformy.

Dokumentacja nie zawsze jest kompletna i to normalne. Musisz ocenić potrzeby organizacji, wymagania projektu i złożoność oprogramowania, a następnie na tej podstawie określić poziom dokumentacji, jakiej potrzebujesz.

Podsumowanie

Podczas wybierania biblioteki lub frameworku po raz pierwszy możesz czuć się przytłoczony. Im więcej się uczysz i ćwiczysz, tym lepiej Ci idzie. Gdy następnym razem będziesz wybierać bibliotekę lub framework, warto wrócić do tego artykułu. Możesz używać nagłówków w tym poście jako listy kontrolnej. Na przykład: czy ta biblioteka jest wydajna? Czy ta biblioteka spełnia standardy firmy dotyczące ułatwień dostępu w internecie?

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

  • Możliwość rozszerzenia: jak łatwo można rozszerzyć bibliotekę o niestandardową logikę lub zachowanie?
  • Narzędzia: czy biblioteka zawiera narzędzia, takie jak wtyczki edytora kodu, narzędzia do debugowania i wtyczki 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 pokazują, że zestaw testów jest zgodny z najnowszą wersją?
  • Zgodność: czy biblioteka działa dobrze z innymi bibliotekami lub frameworkami, z których obecnie korzystasz?
  • Koszt: jaki jest koszt ramowego rozwiązania? Czy jest to oprogramowanie open source, czy można je kupić?
  • Wskaźniki próżnego rodzaju: powinny być na samym dole listy kryteriów lub całkowicie pominięte, ale warto wziąć pod uwagę „głosy” w projekcie, konta mediów społecznościowych reprezentujące projekt lub liczbę otwartych błędów/problemów na stronie projektu.