Vanillia Bootstrap vs NgBootstrap

Jeżeli tworzysz aplikacje przy użyciu frameworka angular, tworząc interfejs graficzny nadchodzi chwila w której chcemy skorzystać z biblioteki CSS. Przeszukując stronę npmjs w celu znalezienia odpowiedniej paczki natkniemy się na jedną z najpopularniejszych biblotek jaką jest bootstrap. Robiąc to pierwszy raz możemy być nieco zdziwieni ponieważ naszym oczą ukażą się dwie paczki o podobnej nazwie bootstrap oraz ng-bootstrap. Jaka jest różnica między nimi, po co została stworzona ta druga i kiedy jej używać ? Na twoje pytania postaram się odpowiedzieć w dalszej części tego wpisu.

Pierwsza paczka dostępna jest po linkiem

https://www.npmjs.com/package/bootstrap

Opis drugiej paczki znajdziemy tutaj

https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap
Vanilla Bootstrap

Tyle wstępu tak więc przejdźmy do tego co nas interesuje. Pierwsza z nich czyli wersja vanilla jest biblioteką znajomą ci nie od wczoraj, jeżeli tworzysz frontend na co dzień. Na pewno używaliście jej dosyć często tworząc proste strony lub bardziej rozbudowane aplikacje webowe.

Pod adresem powyżej znajdziemy ją jako paczka, którą możemy wgrać jako zależność do naszego projektu. W celu korzystania z jej funkcjonalności jako wymagane musimy zainstalować również dodatkową bibliotekę z której korzysta jQuery. Jeżeli w swojej aplikacji będziemy chcieli korzystać wyłącznie z gotowych rozwiązań oferowanych przez bibliotekę typu stylizacja tekstów, formularzy, wykresów, nawigacji oraz innych elementów wyświetlanych na stronie nie wymagających zaawansowanej manipulacji modelem danych.

Z czasem jednak może nadejść chwila w której będziemy chcieli odnieść się do właściwości Bootstrap, która nie jest kontrolowana przez klasę CSS, przez co przy użyciu vanilla bootstrap będziemy musieli wykonać operację, które nie są zgodne z podejściem Angularowym lecz bardziej z odniesieniem się do $(dom-id) poprzez użycie javascriptowej logiki z użyciem jquery na której opiera się ta wersja biblioteki. Wtedy z pomocą przychodzi nam … ng-boostrap.

Ng-Bootstrap

Został on stworzony specjalnie pod framework angular. Jest to zbiór angularowych komponentów oraz plików typescript zbudowanych na bazie styli Bootstrap 4 nie korzysta z biblioteki jquery oraz nie wymaga żadnych dodatkowych zależności javascript. W tym momencie gdziekolwiek odnosimy się, lub modyfikujemy właściwości elementu utworzonych z jego pomocą, mamy do nich odniesienie za pomocą wiązania. Takie rozwiązanie pozwala nam na ścisłą kontrolę nad elementem zgodnie z podejściem angularowym.

Lista dostępnych komponentów:
  • Accordion
  • Alert
  • Buttons
  • Carousel
  • Collapse
  • Datapicker
  • Dropdown
  • Modal
  • Nav
  • Paginacja
  • Popover
  • Progressbar
  • Rating
  • Table
  • Timepicker
  • Toast
  • Tooltip
  • TypeHead
Porównanie elementów na przykładzie componentu dropdown
bootstrap.js

Poniżej przykład kodu html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
  id="dropdownMenuButton" data-toggle="dropdown" 
  aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Aby zarządzać componentem dropdown przez JavaScript musimy na elemencie o atrybucie dropdown-toggle wywołać funkcję dropdown()

$('.dropdown-toggle').dropdown()

W celu konfiguracji uzyskamy dostęp do :
metod takich jak : toogle, show, hide , update, dispose
opcji: offset, flip, boundary, reference, display, popperConfig

ng-bootstrap
<div class="row">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" 
      ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

W tym przypadku do konfiguracji globalnej komponentu NgbDropdown posłuży nam serwis NgbDropdownConfig. Możemy go wstrzyknąć zazwyczaj w głównym komponencie po czym odpowiednio skonfigurować dla całej aplikacji.

Jeżeli natomiast chcemy skonfigurować go indywidualnie, musimy to zrobić przez oznaczenie elementu zmienna lokalną która będzie naszym odniesieniem w komponencie który go zawiera.

Zalety korzystania z ng-bootstrap
  • nie korzysta z jQuery
  • gotowość do korzystania z modułów es2015 oraz leniwe ładowanie modułów
  • użycie tree-shaking do zmniejszenia rozmiaru
  • możliwość użycia dowolnych elementów zawartości paczki
  • prekompilacja szablonów
Konkluzja

Podsumowując który lepiej wybrać ? Tutaj nie ma prostej odpowiedzi, wybór musi być dostosowany do tego czego oczekujemy od naszej aplikacji i jakie mamy potrzeby. Jeżeli piszemy prostą stronę typu SPA chcemy korzystać w większym stopniu elementów ułatwiających tworzenie naszego interfejsu graficznego dobrym wyborem będzie korzystanie tylko z boostrap.js natomiast jeżeli zależy nam z korzystaniu także z możliwości jakie oferuje nam Angular w połączeniu z elementami na wcześniej wymienionej biblioteki najlepszym rozwiązaniem będzie skorzystać jak najszybciej ng-boostrap. Pamiętajmy, także iż możemy korzystać z nich naprzemiennie w zależności od potrzeb.

Tagi:

Brak komentarzy

Dodaj komentarz