Wybierz bibliotekę lub platformę JavaScript

Z tego artykułu dowiesz się, jak wybrać bibliotekę lub platformę do użycia w aplikacji internetowej. Pomoże Ci to rozważyć zalety i wady biblioteki lub platformy JavaScript, która jest odpowiednia do rozwiązania Twojego problemu biznesowego. Aby wybrać spośród wielu dostępnych bibliotek JavaScript, należy wiedzieć, jakie zalety i wady mają zastosowanie w różnych sytuacjach.

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 frameworka kod aplikacji jest wywoływany przez framework.

Poniższe praktyczne przykłady pokazują różnice między tymi funkcjami.

Przykład wywołania 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

Gdy metoda lodash.capitalize jest wykonywana, wywołuje wcześniej napisany kod JavaScript, który zamienia pierwszą literę ciągu na wielką literę.

Przykład użycia platformy JavaScript

Framework JavaScript to wstępnie zdefiniowany szablon kodu, w ramach którego tworzysz działanie aplikacji. Oznacza to, że gdy używasz platformy, to ona kontroluje przepływ danych w aplikacji. Aby użyć platformy, musisz napisać niestandardowy kod aplikacji, a platforma będzie go wywoływać.

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

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 Twoim kodem, a w niektórych przypadkach nawet decyduje, kiedy go wykonać.

Dlaczego warto używać biblioteki?

Korzystanie z biblioteki JavaScript może pomóc w unikaniu niepotrzebnego powtarzania kodu. Biblioteki mogą abstrahować złożoną logikę, taką jak manipulowanie datami czy obliczenia finansowe. Biblioteka może też pomóc w wypuszczeniu pierwszego produktu, zamiast pisać cały kod od zera, co może zająć sporo czasu.

Niektóre biblioteki JavaScript po stronie klienta pomagają w uproszczaniu dziwactw platformy internetowej. Biblioteka może też służyć jako narzędzie do nauki. Jeśli na przykład nie znasz funkcji łagodnego przejścia animacji, kod źródłowy biblioteki może Ci pomóc w zapoznaniu się z ich działaniem.

Niektóre biblioteki są obsługiwane przez duże firmy, które inwestują czas i pieniądze w utrzymywanie ich aktualności i bezpieczeństwa. 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 zwracać uwagę na 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 utrzymywana wewnętrznie, a nie przez zewnętrzną firmę.
  • Biblioteka może mieć określone licencje prawne, które czynią ją odpowiednią lub nieodpowiednią do Twojej aplikacji internetowej.
  • Biblioteka może być nieaktualna lub nieutrzymywana.
  • Biblioteka może uprościć wykonywanie skomplikowanych 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 zapewne się domyślasz, różne cechy mogą wpływać na Twoją aplikację internetową na różne sposoby. Czasami decyzja nie jest tak trudna i w każdej chwili możesz zmienić bibliotekę. 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ć działanie strony. Pamiętaj, że milisekundy liczą się w miliony.

Weź pod uwagę 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. Takie zasoby JavaScriptu 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 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'. Pamiętaj, aby połączyć to podejście z tree shakingiem, dzięki czemu minimalny ładunek JavaScripta zostanie utworzony i wysłany do użytkowników.
  • 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 sprawdzania wczytywania strony przeprowadź profilowanie zachowania strony internetowej, które wywołuje kod z konkretnej biblioteki. Czas 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 najpierw musisz skontaktować się z pracodawcą.
  • Użyj automatycznego narzędzia do śledzenia pakietów, takiego jak bundlesize, aby sprawdzać nieoczekiwanie 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 zawiera już selektor kolorów, dzięki czemu nie trzeba używać zewnętrznej biblioteki JavaScriptu do implementowania tej samej funkcji.

Bezpieczeństwo

Korzystanie z modułu zewnętrznego wiąże się z niektórymi nieodłącznymi zagrożeniami dla bezpieczeństwa. Złośliwy pakiet w kodzie źródłowym aplikacji internetowej może zagrozić bezpieczeństwu zarówno zespołu deweloperów, jak i użytkowników.

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

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.
  • Zastanów się nad skorzystaniem z usług audytowania kodu. Zespół inżynierów może ręcznie sprawdzić kod zewnętrzny, którego używasz.
  • Zdecyduj, czy zablokować zależności do określonej wersji, czy zatwierdzić kod innej firmy w ramach kontroli wersji. Pomoże Ci to zablokować zależność od jednej konkretnej wersji, która jest uznawana za bezpieczną. Co dziwne, może to mieć odwrotny skutek w zakresie bezpieczeństwa, ponieważ możesz przeoczyć ważne aktualizacje biblioteki.
  • Skanowanie strony głównej projektu lub strony 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 zewnętrznego, może stanowić większe zagrożenie niż biblioteka bez 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 w internecie, jako twórca witryny możesz nie zauważyć tej ważnej funkcji 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 obsługuje 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 kodze źródłowym, nawet jeśli nadal używasz danej biblioteki.
  • Za zgodą pracodawcy możesz dodać do biblioteki brakujące funkcje, jeśli autor biblioteki zezwoli na to.
  • 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 te pliki powinny znajdować się w bibliotece?
  • W przypadku popularnych zastosowań możesz sprawdzić alternatywne opcje biblioteki, które są bardziej dostępne. Mogą one istnieć, ale są trudniejsze do znalezienia.
  • W skrajnym przypadku może być konieczne całkowite odrzucenie 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

Łatwiej jest pracować z biblioteką oprogramowania, która korzysta ze ściśle określonych konwencji kodowania. Jeśli biblioteka używa nieznanej konwencji kodowania, może być trudno Tobie i Twojemu zespołowi pracować z taką biblioteką.

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 ze wspólnymi konwencjami kodowania, możesz użyć wzorca projektowania JavaScript, takiego jak wzorzec zastępczy, aby opakować i obejmuje wszystkie interakcje z biblioteką w jednym pliku 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 z intuicyjnym interfejsem API może zaoszczędzić wiele godzin, a nawet dni pracy, w porównaniu z 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. W ciągle zmieniającym się świecie programowania stron internetowych trudno znaleźć bibliotekę z pełną funkcjonalnością. 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. Pamiętaj, że takie decyzje mogą mieć wpływ na:

  • 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 powinna oszczędzać Twój 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 angażuje się w zgodność wsteczną? Czasami aktualizacje oprogramowania mogą zawierać zmiany, które powodują przerwanie działania, ale jednocześnie zapewniają zgodność wsteczną. 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ć do niej licencję. 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ć świetne rozwiązanie w przypadku projektu hobbystycznego. Jeśli Twój projekt ma element komercyjny, rozważ zakup licencji 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ększe prawdopodobieństwo, że przyniesie ona korzyści. Zastanów się nad zaletami i wadami uczestnictwa w społeczności programistów:

Zalety:

  • Duża liczba 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ększą pomoc na forach i witrynach z pytaniami i odpowiedziami, co zwiększa prawdopodobieństwo uzyskania odpowiedzi na pytania.
  • Zaangażowana społeczność może oznaczać więcej zewnętrznych współtwórców biblioteki lub frameworku. Mogą pomóc w wdrożeniu funkcji, które nie są uwzględnione w planie autora.
  • 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łodzi deweloperzy mogą czuć się niemile widziani w pewnej społeczności z powodu gatekeepingu.

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 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 sprawa drugorzędna. Jeśli biblioteka jest zaktualizowana, ale dokumentacja nie, może to spowodować zmarnowanie czasu na programowanie.
  • 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, której potrzebujesz.

Podsumowanie

Podczas wybierania biblioteki lub frameworku po raz pierwszy możesz czuć się przytłoczony. Podobnie jak w przypadku innych czynności, 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 do 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 zawiera 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 nawet całkowicie zignorowane, ale warto wziąć pod uwagę „głosy” dotyczące projektu, konta w mediach społecznościowych reprezentujące projekt lub liczbę otwartych błędów/problemów na stronie projektu.