From some time (2+ years) we can observe a huge explosion of different Javascript frameworks. These frameworks divide mainly into two categories
In this post I would like to focus on the latter. Every time is see a new framework of this type popping on the news I tend to ask myself the same question – why ? Why one does write all does frameworks, why people so much need classes in Javascript ?
After some thinking I’ve got to a conclusion, that people need them mainly because they are used to the concept of the „class” and to a typical type system like this found in Java, PHP or „name your favorite mainstream programming language here”. This is understandable, as naturally human beings are resistive to change. Also, some people tend to „not get” what’s going on in the prototypical type system. We cannot also blame them here because it has some quirks and well, no one teaches it in schools ( ;P ).
One may ask himself – do we have an other choices to write clean, readable and understandable code other than using JS frameworks ? I think the answer for this question would be affirmative.
But before we come up for a solution. We must think for a second and summarize what we are trying to achieve. I think that are needs wrap in:
The thing that some one will miss would be inheritance. Should it be on the list ? I don’t think so. The reason for the lack of inheritance is simple – inheritance has two purposes:
we could achieve code reuse by other means in Javascript and as JS has no type checking we don’t need inheritance at all.
For our „no framework JS framework” we will use mainly such features of JS as first class functions and JSON. So behold, some common patterns for our daily JS programming:
//persons modulepersons = (function(){ //private Person object constructor var Person = function(firstName, lastName, birthDate){ var foo = "bar"; var name = function(){ return firstName + " " + lastName; } var age = function(){ var currentYear = (new Date()).getYear() var birthDayYear = birthDate.getYear() return currentYear - birthDayYear } var saySomething = function(){ return foo; } //the methods that will be public return { "name": name, "age": age, "saySomething": saySomething } } //private FitnessAddict object constructor var FitnessAddict = function(firstName, lastName, birthDate, weight, height){ var person = Person(firstName, lastName, birthDate); var bmi = function(){ return weight / (height*height); } var isWeightNormal = function(){ var currentBmi = bmi() if(currentBmi > 25){ return false } if(currentBmi < 18.5){ return false } return true } //we make isWeightNormal method public person.isWeightNormal = isWeightNormal; return person; } //we make the fitnessAddict object constructor public return { "fitnessAddict": FitnessAddict }})()view raw noFrameworkJsFramework.js This Gist brought to you by GitHub.
Usage of the example:
var fa = persons.fitnessAddict( "Bar", "Baz", new Date(1990,5,5), 80, 1.8) fa.isWeightNormal() // truefa.saySomething() // "bar"fa.name() // "Bar Baz"view raw noFrameworkJsFramework2.js This Gist brought to you by GitHub.
The first example proves, that we can achieve all of our goals through simple Javascript, without the need for frameworks. The additional benefit is that, because all is private by default, we improve the „cleanliness” of our API.
Dewelopment w Javie fundamentalnie różni się od flow do którego jesteśmy przyzwyczajeni w przypadku aplikacji Pehapowych. Wynika to przede wszystkim z samej „natury” obu platform – PHP jest językiem interpretowanym, natomiast Java kompilowanym. Wobec tego, tworzenie, czy zmiana kodu wygląda zupełnie inaczej.
Jeżeli bym miał podsumować jednym słowem tworzenie kodu w PHP, to tym słowem było by „var_dump”. Pisząc jakiś kod, jesteśmy przyzwyczajeni do tego, że możemy go w każdej chwili zmodyfikować a potem sprawdzić efekty jego działania przy pomocy przywołanej wcześniej metody. Oczywiście są osoby, które w tym celu używają debuggera, jednakże jak wszyscy wiemy, są problemy z jego integracją z różnorakimi IDE i generalnie „var_dump” wydaje się być dość uniwersalnym narzędziem.
Pisząc w Javie, var_dump jest pierwszym z naszych pehapowych przyzwyczajeń, które powinniśmy schować do szuflady. Po pierwsze dlatego, że nie ma odpowiednika takiej funkcji w Javie, a po drugie dlatego, że var_dump driven development nie ma tam żadnych sensownych racji bytu. Dzieje się tak ze względu na czas jaki zajmuje deployment kodu – każda zmiana, jaką wprowadzimy w kodzie Javowym wymaga rekompilacji zmienionych klas i restartu serwera, co może trwać dość długo (np. w moim projekcie taka operacja trwa mniej więcej około 5 minut). Powstały oczywiście pewne solucje by temu zaradzić, takie jak np. podmienianie klas w trakcie działania serwera (Hot Swap), jednakże nie działają one we wszystkich przypadkach (jak dodanie, bądź usunięcie metody jakieś klasy).
Jak więc sobie radzić w takich warunkach ? Po pierwsze, musimy się zaprzyjaźnić z debuggerem. Wkrótce stanie się on naszym najlepszym przyjacielem, na którym będziemy polegać w każdej sytuacji. Debugger jest standardowo wbudowany w każde Javowe IDE, więc nie będziemy mieli żadnych problemów w korzystaniu z niego. Możliwości debuggera są naprawdę potężne i zaczynają się od przechodzenia kodu krok po kroku i podglądania wartości zmiennych, aż po zmianę ich wartości w locie oraz „cofanie się wstecz” w wykonaniu kodu.
Debuggera oczywiście najczęściej będziemy używać przy okazji poprawiania błędów. Jak natomiast sprawa się ma przy tworzeniu nowego kodu ? Tutaj z pomocą przychodzi nam dobrze znana, również z świata PHP technika Test Driven Development. Stosując TDD w kombinacji z debuggerem możemy dość skutecznie i szybko rozwijać nasz kod. Przy czym generalnie obowiązuje zasada, by raczej napisać jak najwięcej kodu przed jego testowaniem – nawet kompilacja testu, mimo, że jest to bardzo mała ilość kodu w porównaniu do całej aplikacji, którą depoloyujemy na serwerze nie jest natychmiastowa i chwilkę trwa. Jeżeli w tej chwili wyobraziliście sobie, że kompilujecie test tylko po to, żeby okazało się, że z jakiś głupich powodów nie działa, to mam dla Was dobrą informacje – dzięki statycznej naturze Javy, wszystkie „głupie” błędy zwykle podkreśli Wam na czerwono Wasz edytor, albo ostatecznie kompilator w momencie kompilacji.
Na koniec jeszcze taka mała uwaga odnośnie plików Javascriptowych. Zwykle bywa tak, że pliki źródłowe JS są częścią naszego Javowego projektu, w konsekwencji one również deployowane są na serwer wraz ze skompilowanymi klasamy Javy. W rezultacie, każda zmiana plików JS wymaga ponownego deployu projektu oraz restartu serwera co jak już wiemy – trwa dość długo. Na szczęście jak zwykle są na to sposoby 
. Po pierwsze, jeżeli tylko chcemy zmienić coś w JS do celów testowych, to wieść gminna niesie, że narzędzia deweloperskie Chrome’a pozwalają zmieniać Javascript „w locie”. Po drugie, w przypadku InteliJ Idea, istnieje opcja „update resources”, która podmienia tylko obrazki, js i inne tego typu pliki dość szybko, bez potrzeby restartu serwera.
Tym radosnym akcentem kończę ten artykuł i ogłaszam, że jest to już ostatni wpis z serii „Kierunek Babilon”, oczywiście dalej zamierzam pisać o PHP i Javie, ale już w trochę innym kontekście.
W dniu 12 października miałem przyjemność wygłosić krótki wykład i poprowadzić sesję livecodingu w ramach inicjatywy meetjs. Poniżej załączam linka do prezentacji na SlideShare, w formie PDFa oraz do repozytorium z kodem powstałym podczas livecodingu.
meet.js – QooXDoo View more presentations from singlesplPDF do pobrania: meet.js QooXDoo – prezentacja Kod: GitHub
Nie tak dawno temu pojawiła się informacja jakoby Google pracował nad nowym językiem programowania, dedykowanym dla www. Jedyne co było znane, to nazwa – Dart. Wczoraj rano na jednym z blogów Google’a można było przeczytać, iż Dart został wypuszczony na świat jako wersja preview, celem zdobycia informacji zwrotnych od programistów.
Czym jest Dart? Jest to język bazujący na klasach, z możliwością statycznego typowania. Według informacji zawartej na blogu, dowiadujemy się że Dart:
Ponadto Dart ma działać zarówno w przeglądarce (kompilowany przez silnik przeglądarki do postaci JavaScript) jak również na natywnej maszynie wirtualnej. Tyle obietnice, a jak to wygląda od środka?
Dart jest “językiem klamrowo-średnikowym”, co na pewno wielu ucieszy. Składnia przypomina JavaScript/ActionScript z domieszką PHP/C#. Innymi słowy jest podobny do większości popularnych języków, co z pewnością przełoży się na szybkość uczenia. Mimo iż jak mantrę powtarza się structured web programming, Dart klasami stoi. To przy ich pomocy tworzy się API, to one służą do tworzenia kodu wielokrotnego użytku. Podobnie jak w większości języków, klasa może dziedziczyć tylko po jednej klasie (wyjątkiem jest tutaj klasa Object, która nie dziedziczy po żadnej klasie). Klasa składa się z konstruktora oraz składników instancji i składników statycznych (raczej nie trzeba wyjaśniać czym to się różni). W obu przypadkach składnikami klasy są metody, gettery, settery oraz zmienne. Jeśli dodamy do tego klasy abstrakcyjne oraz interfejsy, poczujemy się jak w domu (zwłaszcza programiści PHP).
Kolejną wyróżniającą cechą języka są konstruktory. Obok dobrze znanego z PHP 4 (lub C#) konstruktora, pojawiły się dwa kolejne – fabryka oraz konstruktor nazwany. Fabryka nie wymaga specjalnych wyjaśnień – jest to natywna implementacja wzorca o tej samej nazwie. Znacznie ciekawszy jest konstruktor nazwany, pozwalający przeciążyć konstruktor, dając tym samym możliwość utworzenia obiektu na kilka sposobów.
Czymś niespotykanym w PHP i JavaScript jest przeciążanie operatorów, które podobnie jak np. w C# są metodami. Dlaczego jest to interesujące? Ponieważ pozwala nadpisać większość operatorów i dopasować je do naszych potrzeb. Oznacza to, że możemy od nowa zdefiniować operator sumowania i sprawić, by np. “dodawał” do siebie dwa obiekty.
Warty wspomnienia jest operator porównania, występujący w dwóch postaciach. Tak samo jak w JavaScript i PHP możemy porównywać dwie wartości przy pomocy == (!=) oraz === (!==). Zasadniczą różnicą jest to, że pierwsza postać działa tak jak powinna, czyli nie dokonuje konwersji typu. Drugi rodzaj służy do sprawdzenia tożsamości. Mówiąc wprost, sprawdza on czy obiekt a i obiekt b to ten sam obiekt w pamięci.
Wspomniałem na początku, że Dart jest językiem umożliwiającym statyczne typowanie. Sprowadza się to do wskazania typu zmiennej, argumentu funkcji lub zwracanej przez nią wartości. Jeśli zależy nam na elastyczności możemy z tego zrezygnować i skorzystać z dynamicznego typowania. Poza “typowym typowaniem”, Dart został uzbrojony w coś, czego nie ma ani w PHP, ani w JavaScript – typy generyczne. W skrócie, typy generyczne pozwalają na tworzenie aplikacji bez wcześniejszej znajomości typów danych, którymi aplikacja będzie operować. W przypadku C# typy generyczne znacząco podnoszą wydajność kodu operującego na kolekcjach oraz uodporniają kod na błędy wykonywania (runtime errors).
Wymienione wyżej elementy języka są tylko niewielkim fragmentem Darta. Obok nich w języku znajdziemy między innymi bloki, które mimo podobieństwa w nazwie mają niewiele wspólnego z blokami znanymi z Ruby. Jeśli miałbym je do czegoś porównać, to byłyby to tuple z Pythona. W Dart, wykonanie bloku oznacza wykonanie każdego elementu kolekcji znajdującego się w bloku.
Na pewno interesująco prezentuje się współbieżność, zbudowana w oparciu o isolates (nie znam polskiego odpowiednika tego słowa). Ponieważ Dart jest językiem jednowątkowym, aby móc skorzystać z przetwarzania współbieżnego, musimy użyć wspomnianych isolates, gdzie każdy isolate to osobny wątek (istnieje możliwość utworzenia isolate w tym samym wątku). Isolates nie współdzielą między sobą żadnych danych, a jedyny sposób komunikacji między nimi, to przesyłanie wiadomości (message passing), działające podobnie jak przesyłanie wiadomości między skryptami w rozszerzeniach Google.
Dzisiaj Google zaprezentował na blogu chromium pierwsze informacje na temat swojego nowego języka „Dart”. Dart prezentowany jest przez firmę z Mountain View jako język do „strukturalnego programowanie webowego”, mający docelowo zastąpić Javascript w roli głównego narzędzia do pisania aplikacji webowych po stronie przeglądarki. Postanowiłem przyjrzeć się szybko jak język ten wygląda i podzielić się pierwszymi wrażeniami jakie mi przyszły do głowy. W dalszej części artykułu, będę się opierał na jednym z artykułów, który jest mini tutorialem do Darta i przedstawia dość obszernie kod, który zwykle jest używany przez programistów jak i różne Dartowe smaczki.
Na pierwszy rzut oka Dart wygląda na kolejny klon Javy / C# z większym podobieństwem do C#. Jak każdy w miarę nowoczesny język posiada funkcje anonimowe i domknięcia. Jest oparty na klasach więc większość osób łatwo się w nim odnajdzie. Jest to główna i fundamentalna różnica pomiędzy Dartem a Javascriptem, oprócz oczywiście składni. Poza tą różnicą Dart wspiera DSL (domain specific languages), dzięki temu, że podobnie jak w Scali, operatory są tak naprawdę zwykłymi metodami, czyli mamy możliwość wywoływania metod bez użycia kropki. Dart wspiera też opcjonalne typowanie – możemy zadeklarować typ zmiennej i będzie on sprawdzony w czasie kompilacji.
Jeżeli porównamy Darta do PHP, to oprócz wcześniej wymienionych ficzerów jedyną w zasadzie różnicą będzie obsługa funkcji akcesorowych znanych z C# (metod prefiksowanych przez get/set).
Dart posiada jeszcze kilka mniej znaczących smaczków, które są głównie lukrem składniowym i mogą być z łatwością odtworzone przy użyciu innych konstrukcji językowych. Pierwszym z takich smaczków są nazwane konstruktory – czyli googlowy sposób na przeciążanie konstruktora w języku dynamicznie typowanym nieobsługującym przeciążania metod. Drugi sposób to metody fabryczne, czyli metody klasy poprzedzone słowem kluczowym „factory”, ich zastosowanie jest dla mnie generalnie mało zrozumiałe. Ostatnim „ficzerem” jaki zauważyłem są „krótkie konstruktory, które oszczędzają nam trochę pisania – zamiast pisać:
Kanał ATOM
class Point {
num x, y;
Point(num x, num y) {
this.x = x;
this.y = y;
}
}
Można napisać tak:
class Point {
num x, y;
Point(this.x, this.y);
}
Podsumowując – szału nie ma. Co jak co, ale po Google spodziewałem się więcej. Czego mi brakuje ?
Jestem ciekaw jaka jest Wasza opinia ?