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 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 frameworku 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 zwraca 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 zmienia pierwszą literę ciągu na wielką.
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 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 Preact JavaScript:
import { createElement } from 'preact';
export default function App() {
return (
<p class="big">Hello World!</p>
)
}
W tym przykładzie zauważysz, że platforma 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?
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 pierwotnego 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 nauce ich działania.
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 złożonych zadań i zaoszczędzić Ci mnóstwo 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 aplikację internetową na różne sposoby. Czasami decyzja nie jest tak głęboka 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 działanie aplikacji internetowej po stronie klienta. Duża biblioteka JavaScript może zakłócać wczytywanie 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 przeanalizuj też zachowanie strony internetowej, które wywołuje kod z konkretnej biblioteki. Czas wczytywania strony nie mówi jeszcze 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ę ze swoim 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, przypadki szczególne i inne zmiany 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 takich sytuacjach warto polegać na automatyzacji.
- 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 programistó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.
- Rozważ skorzystanie z usług audytowania 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 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 zabezpieczeniami oraz czy wcześniejsze problemy z zabezpieczeniami 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 zewnętrznych. 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 JavaScript dostępność witryny ma duże znaczenie.
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 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 kodeksie ź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 funkcji ułatwień dostępu? Czy zgadzasz się, że te pliki powinny znajdować się w bibliotece?
- 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 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
Z biblioteki oprogramowania, która korzysta ze ściśle określonych konwencji kodowania, łatwiej jest korzystać. 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 tworzenia 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 zasięgnij porady prawnej lub skontaktuj się 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 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 dotyczące pomocy.
- 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 internetowi 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 go używać.
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, jakiej potrzebujesz.
Podsumowanie
Wybór biblioteki lub frameworku po raz pierwszy może być przytłaczający. 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 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 ramki? 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 pominięte, 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.