React jest na ten moment najpopularniejszym frameworkiem JS. Wykorzystywany jest zarówno na froncie do budowania interaktywnych komponentów jak i na backendzie do budowania kompletnych aplikacji internetowych. Stworzony przez Facebooka w 2013, jako prosta biblioteka do renderowania komponentów szybko ewoluował tworząc wokół siebie ogromny ekosystem.

Zasada działania tej biblioteki opiera się na idei wirtualnego DOMu. Dzięki temu React.js jest w stanie bardzo wydajnie wyświetlać zmiany w interfejsie.

Charakterystyka

Prototype to jeden z pierwszych frameworków napisanych w języku JavaScript, często kojarzony z nurtem Web 2.0. Zanim przejdziemy do dokładnego omówienia Prototype, przyjrzyjmy się genezie jego powstania.

Programiści w trakcie budowania w JavaScript coraz bardziej skomplikowanych aplikacji, musieli radzić sobie z problemem niejednolitego API przeglądarek. Proste manipulowanie elementami DOM, wysyłanie zapytania ajaksowego, czy też obsługa zdarzeń, wymagały odmiennej implementacji niemal dla każdej z liczących się na rynku przeglądarek. Powodowało to (oprócz większej ilości kodu do napisania) problemy z utrzymaniem aplikacji. Aby ułatwić sobie codzienną pracę programiści tworzyli specjalne wrappery, które umożliwiały pisanie jednolitego kodu niezależnego od szczegółów API udostępnianych przez przeglądarki. Początkowo były to małe kawałki kodu, używane przez front-end developerów w każdym nowym projekcie. Wraz z upływem czasu te małe kawałki kodu, rozrosły się do dosyć dużych bibliotek. Tak właśnie narodził się framework Prototype.

Twórca Prototype Sam Stephenson postawił sobie za zadanie upodobnienie JavaScriptu do innych języków obiektowych (w szczególności do Rubiego). Dziedziczenie oparte na klasach – zamiast na prototypach, wzbogacenie natywnych klas o nowe metody, dodanie obiektów typu Hash i Range miały służyć właśnie temu celowi.

Robienie z JavaScriptu języka czysto obiektowego ma zarówno zwolenników jak i przeciwników. Programiści mający doświadczenie w programowaniu obiektowym (choćby w Javie) preferują Prototype. Okazjonalnie kodujący webdesignerzy wybierają zazwyczaj jQuery. Możemy tutaj zaobserwować dwa podejścia podczas ustalania odpowiedzialności frameworka:

• Prototype – dołączony system klas, brak funkcji odpowiedzialnych za efekty wizualne.
• jQuery – brak wbudowanego systemu klas, obecność najważniejszych efektów wizualnych.

Tak więc w Prototype efekty wizualne są możliwe dopiero po załączeniu dodatkowej biblioteki (np: Script.aculo.us). Natomiast w jQuery zrezygnowano z dodatkowego sytemu klas uznając, że JavaScript tego typu rozwiązań nie potrzebuje.

Przykład kodu

Definiowanie klas

var Task = Class.create({

  initialize: function(name, time, dueTo, priority, goal){
     this.name = name;
     this.time = time;
     this.dueTo = dueTo;
     this.priority = (!!priority)?priority:1
     this.goal = goal;
 }
});

Objekt Ajax

var url = "http://www.example.com/path/server_script";
var myAjax = new Ajax.Request(url, {
   parameters: {
     value1: $F("id_1"),
     value2: $F("id_2")
   },
   onSuccess: showResponse,
   onFailure: showError
});

Zalety

• Elegancka, oparta na klasach składnia.
• Spora liczba metod dodanych do obiektów natywnych.
• Rozszerzalne API.

Wady

• Mniejsza (w porównaniu z jQuery) ekspresywność.
• Rozwlekła manipulacja elementami DOM.
• Brak dobrej jakości kontrolek.

Na koniec:

Ciekawe zestawienie

Dojrzałość – 2006
Popularność – #1
Wydajność – #2

Charakterystyka

Dziś niewątpliwie najpopularniejsza biblioteka JavaScript, została stworzona w roku 2006 przez Johna Resiga. jQuery jest lekkim frameworkiem ułatwiającym między innymi: cross-browserowe manipulowanie elementami DOM, wysyłanie żądań Ajaxowych oraz obsługę zdarzeń.

Najważniejsze funkcjonalności

• Selektory – bogata, zgodna z CSS3 składnia umożliwia dostęp do dowolnego elementu DOM.
• Atrybuty – manipulacja atrybutami została uproszczona dzięki metodzie attr().
• Obsługa zdarzeń – ujednolicenie interfejsu za pomocą takich metod jak click, select itp…
• Efekty – najważniejsze funkcje animujące: fadeIn, toggle, slideDown nie wymagają instalacji dodatkowych pluginów.
• Ajax – przyjazny developerowi interfejs

Filozofia

• chaining – tam gdzie jest to możliwe, funkcje zwracają obiekt typu jQuery. Umożliwia to łączenie metod w łańcuch:

  $("div.test").add("p.quote").addClass("blue").slideDown("slow");
  

• przeciążanie metod – w zależności od rodzaju parametrów funkcje zachowują się inaczej. Dobrym przykładem jest funkcja jQuery, która w zależności od przekazanych parametrów może: wyszukiwać elementy, tworzyć nowe elementy lub być prostym callbackiem zdarzenia onload.

  jQuery( selector, [ context ] )
  jQuery( selector, [context] )
  jQuery( element )
  jQuery( elementArray )
  jQuery( jQuery object )
  jQuery()
  jQuery( html, [ ownerDocument ] )
  jQuery( html, [ownerDocument] )
  jQuery( html,props )
  jQuery( callback )
  jQuery( callback )
  

• własna przestrzeń nazw – W przeciwieństwie do Prototype jQuery nie rozszerza natywnych klas. Co więcej, metody oferowane przez jQuery nie zaśmiecają globalnej przestrzeni nazw, co niewątpliwie mnimalizuje prawdopodobieństwo wystąpienia konfliktów.
• pluginy – świetny system pluginów pozwala rozszerzać framework o dowolne funkcjonalności.

Przykłady użycia

Wykonanie kodu po załadowaniu strony:

jQuery(document).ready(function() {
//do stuff
});

Wyszukiwanie elementów

var myElement = jQuery('#myElement');
var divs = jQuery('div');

Tworzenie nowego elementu.

jQuery('<div id="myElement">This is a new element</div>').appendTo('body');

Wady i zalety

Zalety

• Szybki i zgodny z CSS3 system selektorów.
• Zoptymalizowana manipulacja elementami DOM.
• Method chaining.
• Pojedyńcza przestrzeń nazw.

Wady

• Brak systemu klas.
• Raczej DOM oriented niż JavaScript Oriented.