Jarosław Zabiełło - BLOG: Tag prototype

Jester: czy to jeszcze Javascript? ;)

Jarosław Zabiełło — Tue, 03 Apr 2007 12:08:00 +0200

Rails jest inspiracją do powstawania coraz bardziej niesamowitych bibliotek. Takim przykładem jest biblioteka Jester która na bazie Prototype umożliwia za pomocą JavaScript komunikację z serwerem (AJAX) w stylu prawie identycznym do Rubiego i modułu ActiveResource używanego w Railsach. Jester używa do tego najnowszej implementacji REST która jest wbudowana i silnie promowana w RoR.

Prototype - oficjalne API i dokumentacja

Jarosław Zabiełło — Fri, 19 Jan 2007 16:53:00 +0100

Znana biblioteka Prototype doczekała się własnej dokumentacji, API oraz bloga: http://prototypejs.org. Prototype zapewnia lekkie, eleganckie API o składni wzorowanej na języku Ruby. Ta składnia jest tak ładna, że niektórzy nawet nie widzą potrzeby tworzenia dodatkowych helperów. W tej chwili to, moim zdaniem, najlepsza biblioteka do JavaScript i AJAX. Rails postawił zdecydowanie na dobrego konia. Pylons – niejako “z rozpędu”, bo skopiowali railsowe helpery – też. :)

Rozmawiałem niedawno na IRC’u (irc.freenode#pylons) z developerami Pylonsów. Mają rozszerzyć swoje helpery o dodatkowe funkcje, ale nie zaimplementują pętli które są w Prototype i railsowych RJS (szablonach generujących JavaScript w jęz. Ruby) Ograniczeniem jest tu składnia Pythona. Tzn. można by się pokusić o taką implementację, ale byłaby mało “pythonic”, tj. zgodna z filozofią i czytelnością języka Python. Więc raczej na RJS dla Pythona nie ma co liczyć.

Wg mnie te wszystkie helpery jakie ma RoR (i RJS w szczególności) to jedna z lepszych cech Railsów której brak u konkurencji. Nie zgodzę się tu z tymi, co uważają że lepiej w ogóle nie używać żadnych helperów i pisać w czystym JavaScript. Mimo ładnej składni Prototype, railsowe helpery i RJS dają znacznie większy komfort pracy. Np. weźmy taką konstrukcję w pliku RJS:

page.replace_html :my_id, :partial => 'podszablon'

Co robi powyższa metoda? Buduje kod JavaScript który podmienia zawartość (innerHTML) dla tagu o id =’my_id’ zawartością szablonu RHTML (oczywiście jego zawartość jest automatycznie “escape’owana”, aby kod JS się nie wysypał). Trzeba się nieźle napracować aby uzyskać podobny efekt poza Railsami.

Trochę się dziwię, że Django myśli o dodaniu Dojo zamiast Prototype. Mamy w pracy raczej złe doświadczenie z Dojo. Jest ciężkie, zamotane, trudne do debugowania, modyfikacji. To po części efekt podejścia nastawionego na używanie złożonych komponentów (naśladują .NET?) Takie podejście (używanie zbyt wysokopoziomowych, złożonych komponentów) generalnie spotyka się z krytyką wielu programistów. Prościej operować elastycznym i przejrzystym kodem (takim jak w Prototype) niż gotowymi, zamkniętymi i trudnymi do debugowania komponentami Dojo.

JavaScript idzie w dobrym kierunku

Jarosław Zabiełło — Mon, 13 Nov 2006 17:56:00 +0100

Muszę przyznać, że od czasu grzebania w bibliotece Prototype spojrzałem w trochę świeży sposób na język JavaScript. Prototype jest przykładem tego, jak bardzo elegancki, dynamiczny i obiektowy kodu można pisać w tym języku. Pozwala też na pisanie bardzo eleganckiego kodu mocno przypominającego język Ruby

Np. poniższy kod wyświetla cztery razy okienko alertu. (Odpowiednikiem bloku kodu (ang. closure) w Ruby jest tu anonimowa funkcja).

(4).times(function() {
  alert("JavaScript is cool")
});

Co ciekawe, w JavaScript (podobnie jak Ruby) można przeciążać wszystkie obiekty. Np. poniżej do klasy Array dodano metodę inArray.

Array.prototype.inArray = function(needle) {
  for(var key in this) {
    if (this[key] === needle) {
      return true
    }
  }
  return false
}

JavaScript posiada też wbudowany operator do wyrażeń regularnych. Np. poniższy kod sprawdza poprawność pola w formularzu:

<script type="text/javascript">
//<![CDATA[
var MyForm = {
  validateEmail: function() {
    if ($F('email_id').match(/^.+?@([\w\d\.-]+?\.\w{2,5})\s*$/)) {
      $('email_error').innerHTML = '';
      return true;
    } else {    
      $('email_error').innerHTML = 'Wrong email format!';
      return false;
    }
  },
  validateForm: function() {
    return this.validateEmail() ? true: false;
  }
};
//]]>
</script>
<form action="" method="post" onsubmit="return MyForm.validateForm()">
  <table border="0" id="container">
    <tr>
      <th><label for="email_id">Email Adddress:</label></th>
      <td>
        <input type="text" id="email_id" onchange="MyForm.validateEmail()" />
        <span id="email_error"></span>
      </td>
    </tr>
    <tr>
      <td colspan="2"><input id="submit" type="submit" /></td>
    </tr>
  </table>
</form>

Jakby tego było mało, JavaScript w nadchodzącej wersji 1.7 przejmuje trochę wygodnej składni Pythona!

Szkoda, że taki popularny PHP wzoruje się na brzydkiej składni Perla, C++ i Javy. JavaScript wybrał sobie znacznie bardziej eleganckie wzorce.