Biblioteka Zepto.js

Zepto.js

Poziom średnio-zaawansowany

Ostatnio przyszło nam pracować nad rozwojem projektu, który korzystał z biblioteki Zepto.js po stronie frontend. Zaciekawiła mnie, więc postanowiłem napisać kilka słów na jej temat.

Zepto.js

Zepto.js jest lekkim frameworkiem JavaScript, który znakomicie spisuje się szczególnie w przeglądarkach opartych o WebKit. Posiada składnię w większości kompatybilną z jQuery. Zatem dla osób obeznanych z jQuery praca z Zepto.js nie będzie żadnym problemem.

Przykład:

$('#element').html("Hello!");

Czy można stosować Zepto.js zamiennie z jQuery?

Właściwie tak – są kompatybilne na poziomie core. Mimo wszystko nie polecał bym polegać na rozwiązaniu opracowanym w ten sposób, bez przeprowadzenia szczegółowych testów.

Poza typowymi funkcjonalnościami, jakich powinien dostarczać przyzwoity, współczesny framework JavaScript, Zepto.js posiada wsparcie typowych funkcji potrzebnych na wersjach stron dla urządzeń mobilnych (wykrywanie środowiska, touch events).

Kolejną zaletą jest niewielki rozmiar podstawowej biblioteki, dzięki czemu wczytuje się szybciej niż np. jQuery.

Zepto.js będzie zatem dobrym wyborem w przypadku tworzenia projektów z myślą o urządzeniach mobilnych. Również na polu tworzenia Native apps – świetnie współpracuje z rozwiązaniami takimi jak PhoneGap.

Zepto.js dostępne jest na licencji MIT. Strona domowa biblioteki: zeptojs.com, zawiera pełną dokumentację.

Użycie Zepto.js

Zepto ustawia globalnie metodę $ dla siebie w momencie gdy ta nie jest jeszcze zdefiniowana. Nie ma czegoś takiego jak Zepto.noConflict.

Przykłady:

// pobiera paragrafy z dokumentu
$('p');

// zmienia tekst / html w elemencie
$('p').html('Hello World');

// zmienia style
$('p').html('Hello World').css('background-color: blue');

// iteruje po elementach
$('div').each(function(element) {
  alert(element); 
  // ...
})

W taki sam sposób jak w jQuery wykonamy wiele innych zadań, na przykład obsługę AJAX.


Efekty wizualne również nie są problemem:


$("#element").animate({
  opacity: 0.25, left: '10px',
  color: '#aabbcc',
  rotateZ: '45deg', translate3d: '0,10px,0'
}, 500, 'ease-out')

Kolejną zaleta Zepto.js jest możliwość tworzenia plug-inów, podobnie jak w jQuery:


;(function($){
  $.extend($.fn, {
    foo: function(){
      // 'this' refers to the current Zepto collection

      return this.html('bar')
    }
  })
})(Zepto)

Na zakończenie polecam dodatkowo artykuł o Touch gestures z użyciem Zepto.js:

http://www.appliness.com/zepto-and-touch-gestures/

Podsumowanie

Jak widać z Zepto.js pracuje się podobnie jak w przypadku jQuery, choć biblioteki różnią się rozmiarami oraz budową.

Z rozwiązaniami takimi jak jQuery trudno konkurować. A jednak przykład Zepto.js pokazuje, że można nabierać na znaczeniu wśród tak silnych konkurentów.

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.