Umbrella JS to bardzo lekka biblioteka JavaScript, która może stanowić alternatywę dla jQuery.  W tym artykule dowiesz się jak z niej korzystać.

Główne plusy Umbrella JS:

  • składnia jest mocno inspirowana jQuery. Jeśli korzystałeś z niej wcześniej, to w ciągu kilku minut odnajdziesz się w Umbrella
  • w porównaniu do jQuery jest bardzo lekka – tylko 3kb po kompresji
  • posiada wszystkie niezbędne funkcje – obsługę wydarzeń i AJAX oraz manipulację DOM

Instalacja biblioteki

Instalacja Umbrella JS ogranicza się do pobrania pliku .js i podpięcia go do strony.

<script src="umbrella.min.js"></script>

Korzystanie z Umbrella

Jeśli korzystałeś wcześniej z jQuery, to szybko przestawisz się na Umbrella. Składnia tych bibliotek jest bardzo podobna.

Obsługa eventów

Obsługa wydarzeń jest w Umbrella prawie identyczna jak w jQuery. Korzystamy z funkcjo on. Wygląda to następująco:

u("p").on('click', function(){
   console.log(u(this).text());
});

Jak widzisz jedyną różnicą jest użycie u zamiast $. Po kliknięciu na paragraf w konsoli wyświetli się jego zawartość.

W ten sam sposób możemy korzystać z innych eventów:

u("p").on('mouseenter mouseleave', function(){
   console.log(u(this).text());
});
u("form").on('submit', function(e){
   e.preventDefault();
});

I tak dalej.

Pętla

Podobnie jak w jQuery mamy tutaj możliwość użycia funkcji each.

u('a').each(function(node, i){
  u(node).attr({ target: '_blank' });
});

Powyższy kod doda target=”_blank” do wszystkich linków.

Ajax

Obsługa Ajax jest również bardzo prosta.  Korzystamy z funkcji ajax.

u('.kontakt').ajax(function(err){
  if (err) return alert("Error");
  alert("Dziękujemy za wiadomość!");
});

Dodawanie/usuwanie klas i atrybutów

Co tu dużo pisać – praktycznie wszystko odbywa się w identyczny sposób jak w jQuery.

u(".menu").addClass("active"); // dodanie klasy
u(".menu").removeClass("active"); // usunięcie klasy

u("input").attr('name'); // pobranie atrybutu
u("input").attr('name', 'devcorner'); // ustawienie atrybutu

Scrolluj do elementu

Możemy w prosty sposób przewinąć stronę do elementu, używając funkcji scroll.

u('.scroll').on('click', function(e){
  e.preventDefault();
  u('section').scroll();
});

Pełną listę dostępnych funkcji możesz znaleźć w oficjalnej dokumentacji.

Umbrella JS jako alternatywa dla jQuery?

Moim zdaniem w większości projektów ta biblioteka sprawdzi się jako alternatywa dla jQuery. Zawiera większość przydatnych funkcji, a przy tym jest bardzo lekka.

Oczywiście Umbrella nie sprawdzi się, jeśli będziesz chciał użyć pluginów jQuery. Nie skorzystamy również z animacji (funkcja animate nie istnieje w Umbrella JS) i kilku mniej przydatnych funkcji.

Tak czy inaczej, zdecydowanie warto ją sprawdzić 🙂