Javascript - czy jestem zmuszeni, by z niego korzystać?

Wpis ten jest drugą częścią wpisu powstałego na łamach tej strony.

Skąd przychodzimy?

A no z wpisu poświęconego paskudności i niedoskonałości JS. W tym wpisie pokażę kilka rozwiązań, pseudorozwiązań i rzeczy, które rozwiązaniami być nie powinny. A więc od początku. Zacznijmy od rozwiązań.

Rozwiążmy problem. Problem gwoździa i młotka

JS jest dość paskudny, urodziwość to nie jest zaleta tego języka. Co jednak, nie znaczy, że nie należy się go uczyć. Język niemiecki urodą nie grzeszy, ale uczyć się go trzeba. Co zrobić, by bylo nam lepiej, wygodniej i przyjemniej? M. in. lepiej organizować kod i zamiast makaronu i funkcji o wiele mówiących nazwach "Funkcja1", gdzie nie nikt normalny ( z autorem włącznie) odczytać nie może. Po to są komentarze, by ich używać. Inna sprawa to minimalizacja naszych skryptów i zbijanie ich w jeden ogromny ciasny blok o czytelności parsera html zbudowanego z użyciem regexpów w Perlu. Wtedy brak komentarzy jest dozwolony. By jednak pomóc innym warto mieć czasem zakładkę dalej (każdy normalny edytor taby obsługuje*) prosty plik napisany z użyciem Markdown. I taki prosty plik zawierający opisy funkcji dodać. Jeśli to nam nie pasuje, czy tak trudno stworzyć namiastkę tego w jakimś języku skryptowym, który przeleci nam przez plik i skopiuje to co pomiędzy znakami

@      komentarz      @
@ Ta funkcja robi to @

Już wymieniony Perl, czy chociażby dodatki w Vimie pozwalają na coś takiego. Nie bójmy się komentować. Czym jest (pod)tytułowy problem "gwoździa i młotka". Mamy jeden gwóźdź i jeden młotek. zy, aby zbić parę desek potrzeba nam nowego narzędzia, gdy stare jeszcze daje (z trudem to fakt), ale radę. Jeśli tyle ci wystarczy skończ tutaj. Niżej pokażę kilka młotków, które mogą się przydać. Choć w sumie trochę strach dawać programiście młotek. Jak to mówią, gdyby programiści budowali domy, te były by pełne dziur. A więc ta da dam.

CoffeScript

Dalej po prostu CS. Ten język pozwala pisać mniej i mieć więcej. Nie możliwe! A jednak. Pozwolę sobie zacząć od przykład

var Animal, Horse, Snake, sam, tom,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Animal = (function() {
  function Animal(name) {
    this.name = name;
  }
  Animal.prototype.move = function(meters) {
    return alert(this.name + (" moved " + meters + "m."));
  };
  return Animal;
})();
Snake = (function(_super) {
  __extends(Snake, _super);
  function Snake() {
    return Snake.__super__.constructor.apply(this, arguments);
  }
  Snake.prototype.move = function() {
    alert("Slithering...");
    return Snake.__super__.move.call(this, 5);
  };
  return Snake;
})(Animal);
Horse = (function(_super) {
  __extends(Horse, _super);
  function Horse() {
    return Horse.__super__.constructor.apply(this, arguments);
  }
  Horse.prototype.move = function() {
    alert("Galloping...");
    return Horse.__super__.move.call(this, 45);
  };
  return Horse;
})(Animal);
sam = new Snake("Sammy the Python");
tom = new Horse("Tommy the Palomino");
sam.move();
tom.move();

Sporo kodu. No cóż fakt. No i dość mało zrozumiałego kodu A teraz coffescript

class Animal
  constructor: (@name) ->
  move: (meters) ->
    alert @name + " moved #{meters}m."
class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5
class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()

Teraz może zagramy w znajdź różnicę, Co daje nam CoffeeScript?

Otrzymujemy na starcie masę nowości. No i może nie nowości, ale wspomagaczy. Znika słówka var i mało urodziwy znak === od teraz zastąpiony regularnym ==. Dochodzą nowe słówka kluczowe. Kod jest ładniejszy. Naszego c++ fora w stylu (zmienna;warunek;iteracja) zastępuję "for zmienna in zakres". Jest czytelniej, przynajmniej dla mnie, zielonego. Ponadto dostajemy pięknie źródło informacji. Dziesiątki dodatkowych elementów. A co z bibliotekami? Jako, że CS jest tłumaczony do JS - działają. I to jak, a jQuery zyskuje nieco na urodzie i traci posmak makaroniarstwa.

formValues = (elem.value for elem in $('.input'))

Tak wygląda CS, a jak JS robiący to samo

var elem, formValues;
formValues = (function() {
  var _i, _len, _ref, _results;
  _ref = $('.input');
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    elem = _ref[_i];
    _results.push(elem.value);
  }
  return _results;
})();

Cóż za paskudztwo. Kolejne plusy CS to m.in.

• Wygodne testy - wraz z Mochą
• Ci którzy spojrzą na nasz kod za powiedzmy kilka miesiecy nie będą krzyczeć
• CS może zostać w pełni zintegrowany z Node.js to kolejny plus

A minusy. Ciężko powiedzieć. CS to dość jeszcze młody projekt. Także osiągi są nie rzadko słabsze. Kolejna sprawa to białe znaki, które coś znaczą. Dla fanów C/C++/JS to źle. Dla Pythonowego światka i browser śpiewa Alleluja. Polecam zerknąć Tutaj - to przydatne fragmenty kodu i Strona, która może nie jednemu devowi się przydać.

Syrup - początek czegoś ciekawego.

Lisp. Kto wie co to jest, ręka w górę. Kto lubi ten język? No cóż, raczej po tym pytaniu lasu rąk nie uświadczymy. Są jednak takie dziwne typki, które lubią sobie życie komplikować. Syrup to nic innego, jak parser. Kolejna nakładka, oparta na CoffeScript. Ma to jakieś plusy. Co raz bardziej Lispowa składnia. W planach jest współpraca z Node.js i przepisanie kompilatora / parsera. Czy to jakaś alternatywa? Może, choć nie teraz. Na razie warto się tym pobawić. To nie boli. Przy okazji pozwolę sobie na 2 rzeczy. Po pierwsze przykład

fib = fn: [n]
	calc-fib = fn: [n a b]
		print: "Fib:", n a b
		if: (n == 0)
			a 
			calc-fib: (n - 1) b (a + b)
	calc-fib: n 0 1

print: fib: 10

Ten krótki kod liczy kolejne liczby w ciągu Fibonacciego. Druga sprawa: jeśli naprawdę lubicie Lispową składnię, i tryliardy nawiasów to Syrup może nie być lekiem na wasze bóle. Są lepsze i gorsze opcję. Polecam zapoznanie się z Clojurescriptem, ParentScriptem LispyScriptem. A jeśli na prawdę chcecie się zapoznać z Lispowym wersjami JS polecam ten post na jesdnym z akregatorów treści --> HackerNews. Nie będę się nad tym tu rozwodzić. Te kompilatory mogą być fajną zabawką, lub ciekawą alternatywą. Ale idźmy dalej. Oto....

Coś co alternatywą może być...

Mowa tu o dość mało znanym, acz w/g mnie bardzo ciekawym kawałku zupełnie darmowego kodu, który sporo może. Nazwa jego brzmi - Haxe. Po mimo tej nazwy, to nie jest język Haker Friendly. Haxe jest całkiem przyjemny, ma własny język, można go kompilować do JS, na telefony z Androidem, do C/C++. Jest właściwie do wszystkiego, ale czy na pewno. Do wszystkiego, to jak znane porzekadło pszczół mówi, do niczego. Składniowo przypomina trochę ActionScript3 lub Javę/ C#. Dla fanów tych języków super. Dla reszty pewnie też. Warto go poznać. To kawałeczek kodu, zwykły alert znany wszystkim Zielonym Beretom JS, zawierający po kompilacji URL naszej strony.

class Test {
    static function main() {
        js.Lib.alert(js.Lib.window.location.href);
    }
}

Haxe zapewnia całkiem przyjemne tworzenie stron w technologii Flash. Czy może się wam przydać? Pewnie tak, ale jako ciekawostka, wstęp. Możliwości są spore, ale suport ze strony firm marny. Szukając czegoś z poparciem warto zerknąć też na inne języki. Może z nie tak różną składnią, ale nadal przydatne.

Googlowy Dart No-namowy Opa A co ja będę się tu wypisywał.

Długa i w miarę świeża lista języków kompilowanych do JS.

Link

Kończąc ten nudny i przydługi wpis

Pragnę podziękować tym, którzy przetrwali cały wpis. Pragnę też wyjaśnić skąd taki, a nie inny wybór. Wybierałem najciekawsze języki stworzone, by pomóc devom. Pominąłem przydatny GWT - gdyż to m.in. Java, która najładniejszym językiem nie jest również. Darta też nie opisałem, bo efekt kompilacji Dart do JS, nawet w wypadku Hello Worlda, to gigantyczny plik, jak poprawią go to go opiszę. Nie ma również Flasha, czy NaCl. Dlaczego, bo są ograniczone, stanowią raczej powrót do czasu Webu zamkniętego niż do otwartego webu przyszłości. Amber, Pyjamas i inne ominąłem. Może w przyszłości.

PS. Wszelki flejm mile widziany (oczywiście ten konstruktywny, poparty argumentami). Zapominam się, konstruktywny flejm to nie flejm.

PPS. Może wy kojarzyć coś ciekawego z takich kombinacji.

A na razie żegnam i dziękuje za uwagę.

* Nazwanie Notepada edytorem dla programisty, to jak nazwanie Painta namiastką Photoshopa.