środa, 23 kwietnia 2014

Jak zacząć pracę z ES6



ES6 to szósta wersja standardu ECMAScript na której oparty jest JavaScript. ES6 jest następną generacją JavaScript.  

ES6 nie jest jeszcze standardem i dopiero trwają pracę aby przeglądarki wspierały wszystkie jego funkcje. ES6 to przyszłość (chociaż nie aż tak daleka), ale już dzisiaj możemy poznawać nowe funkcjonalności określane w wersji roboczej specyfikacji ES6.

Warto wspomnieć, że AngularJS 2.0 jest  właśnie oparty na ECMAScript 6.

ES6 możesz zacząć używać już dzisiaj z pomocą biblioteki Google Traceur lub bezpośrednio w przeglądarce używając es6fiddle, który poza możliwością pisania kodu w ES6 zawiera przykłady napisane w ES6.

Biblioteka Traceur kompiluje nam kod napisany w ES6 na standard ES5, wspierany przez większość dzisiejszych przeglądarek, dzięki czemu, możemy zacząć używać funkcji z przyszłości dzisiaj.

Aby zacząć zabawę z biblioteką Traceur należy ją zainstalować, używając poniższej komendy (musimy mieć zainstalowanego node.js).

npm install -g traceur

następnie tworzymy plik javascriptowy appEs6.js  zawierający kod napisany w ES6 np.

let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;

console.log(square(5));
console.log(add(3, 4));
console.log(pi());

Po napisaniu kodu wykonujemy poniższe polecenie

traceur --sourcemap --out out/appToday.js appES6.js --experimental

Powyższa komenda utworzy nam w podfolderze out plik appToday.js z kodem js który możemy uruchomić w przeglądarce. Dla dociekliwych, wynikowy kod wygląda tak
System.register("../appES6", [], function() {
  "use strict";
  var __moduleName = "../appES6";
  var square = (function(x) {
    return x * x;
  });
  var add = (function(a, b) {
    return a + b;
  });
  var pi = (function() {
    return 3.1415;
  });
  console.log(square(5));
  console.log(add(3, 4));
  console.log(pi());
  return {};
});
System.get("../appES6" + '');

//# sourceMappingURL=appES6.map

Teraz możemy stworzyć plik index.html który użyje wygenerowany plik js.
<!DOCTYPE html>
<html>
<head lang="en">
    <script src="node_modules/traceur/bin/traceur-runtime.js"></script>
    <script src="out/appToday.js"></script>
</head>
<body>

</body>
</html>

Żeby przeglądarka mogła poprawnie użyć wygenerowany plik appToday.js należy wcześniej dodać skrypt tracer-runtime.js. Po tych operacjach odpalamy nasz plik  index.html w przeglądarce i oglądamy wyniki w konsoli . Od tej pory możemy się bawić z ES6.

Do stworzenia wersji ES5 możemy  również użyć narzędzia  WebStorm  (ja akurat używam  wersji 8.0.1) które wspiera ES6 i może nam kompilować pliki ES6 do ES5 w locie, aby to zrobić należy utworzyć sobie pusty projekt następnie wybieramy File -> Settings -> Javascript i ustawiamy JavaScript language version na ECMAScript 6.



 Następnie tworzymy plik appES6.js. Po otworzeniu zakładki z nowo utworzonym plikiem dostajemy informację o możliwości dodania mechanizmu śledzenia (file watcher) dla naszego pliku który będzie kompilował kod ES6 do ES5, aby to zrobić wybieramy opcję Add watcher dostępną z prawej strony.


Zanim przystąpimy do pisania kodu musimy dodać mała modyfikację w konfiguracji mechanizmu śledzenia. Wybieramy File -> Settings -> File Watchers -> Traceour compiler i wybieramy edit. W sekcji Arguments dodajemy na końcu argument --experimental, dzięki czemu większość funkcji ES6 zostanie obsłużona.


Teraz można już pisać kod ES6 i po zapisaniu zmian, w naszym projekcie zostanie stworzony podkatalog out oraz plik javascriptowy w wersji ES5.



ES6 wniesie sporo nowych i fajnych funkcjonalności do języka JavaScript, trochę czasu jednak minie zanim wszystkie przeglądarki będą korzystały w pełni z możliwości jakie oferuje. Juriy Zaytsev  wykonał użyteczną tabelę kompatybilności dla głównych przeglądarek http://kangax.github.io/es5-compat-table/es6/(póki co FireFox ma zaimplementowanych najwięcej funkcjonalności).

Uważam, że warto już teraz zacząć się interesować ES6, żeby później kiedy stanie się standardem być w stanie w pełni skorzystać z możliwości jakie oferuje.

wtorek, 22 kwietnia 2014

Ach ten Javascript



Być może rzadko widać w ofertach pracy aby wymagano bezpośrednio znajomości  języka Javascript, tylko zamiast tego wypisane są oczekiwania odnośnie znajomości framework-ów Javascript  typu Angularjs,  Backbone, Ember.js, ale czy to oznacza, że nie należy się go uczyć?  

Posługując się grafem ze strony indeed.com, widać jak zmieniają się tendencje w ofertach pracy dla języka Javascript oraz opartych na nim rozwiązaniach.



Można zauważyć, że sam Javascript jest prawie niewidoczny na tym grafie,  króluje AnugularJs i Node.Js mimo to nie wyobrażam sobie, żeby pisać w jakiejkolwiek z tych bibliotek/framework-ów dobry kod bez porządnej znajomości języka Javascript. Owszem język Javascript ma to do siebie, ze można w nim zacząć pisać bez wnikania w mechanizmy działania samego języka, napisany kod może działać, nie mówię nie, ale kiedy tego kodu przybędzie, i zaczną pojawiać się błędy i zaczniemy debugować, może się okazać, że nie mamy pojęcia dlaczego coś nie działa i najczęściej obwiniamy za ten stan sam język a nie brak własnej wiedzy.

Nie ukrywam były lata kiedy nie lubiłem pisać w javascriptcie, na studiach traktowałem to jako zło konieczne, bo ciągle się frustrowałem że coś nie działa. Później pojawiło się jQuery i bam .. no teraz to ja umiem pisać w javascriptcie sobie myślałem.... (co oczywiście było moim pochlebnym marzeniem), owszem umiałem pisać  ale w jQuery a o javascriptcie ciągle wiedziałem nie wiele i wychodziło to przy prawie każdym błędzie który musiałem poprawiać...

Poniżej podaje dwa proste przykłady które pokazują, że bez znajomości javascriptu można spędzić bardzo dużo czasu analizując dlaczego nasz kod nie działa.

 
1. przykład
for (var i = 0; i < 5; i++)
{
    setTimeout( function(){ console.log(i)},0); 
}; 

2. przykład
var obj = ( function(){ 

    return 
    { 
        name:'Łukasz' 
    }; 

}()); 

console.log(obj.name);

Jak widać kod jest bardzo prosty. 

W pierwszym przypadku można by oczekiwać, że napisany kod zwróci nam na konsoli cyfry 0, 1, 2, 3, 4, zatem wprowadźmy ten kod np. do konsoli w Chromie i sprawdźmy wynik....


Wynik pokazuje zupełnie coś innego, nie tego się spodziewaliśmy (w prezentowanym wyniku ignorujemy liczbę 87, która jest identyfikatorem timera zwróconym przez funkcję setTimeOut, fakt wyświetlenie tej wartości wynika ze sposobu obsługi konsoli w przeglądarce Chrome). W wyniku otrzymaliśmy cyfrę 5 powtórzoną 5 razy o czym świadczy cyfra pięć w kółeczku z lewej strony. Aby zrozumieć dlaczego otrzymaliśmy taki wynik, należy zrozumieć następujące fakty:
  • Dysponujemy tylko jedną zmienną i zadeklarowaną w globalnym zakresie (ang. scope) widoczności zmiennych w języku JavaScript (lub w zakresie najbliższej funkcji, jeżeli ten kod umieścilibyśmy w funkcji), każda iteracja pętli nie tworzy nam nowej kopii zmiennej i zamkniętej w zakresie pętli (co sugeruje użyty kod), ponieważ nie tak działa zakres w Javascript (ale o tym przy innej okazji..)
  • Po zakończeniu pętli zmienna i === 5, ponieważ jest to warunek przerywający pętle i < 5
  • Każda z pięciu stworzonych funkcji obsługujących timer zostanie wywołana po zakończeniu pętli for, ponieważ funkcje obsługujące zdarzenia (ang. event handlers) są kolejkowane i zostaną obsłużone  kiedy aktualnie wykonywany kod Javascript zostanie zakończony
Mam nadzieję, że udało mi się to wyjaśnić ;), zatem jak możemy poprawić ten kod aby używając timera wypisać cyfry 0, 1, 2, 3, 4? Musimy w każdej iteracji pętli stworzyć nowy zakres z kopią wartości zmiennej i, jak to osiągnąć? Używając bardzo popularnej konstrukcji w javascriptcie o ładnym skrócie IIFE (Immediately-Invoked Function Expression), czyli funkcja która jest natychmiast wywoływana.

Tak prezentuje się poprawiony kod ..
  

for (var i = 0; i < 5; i++){ 

  (function( j ) {

    setTimeout( function(){ console.log(j)}, 0); 

   }(i));

};

a tak prezentuje się wynik działania poprawionego kodu


A teraz wracam do drugiego przykładu, który jest naprawdę prosty, tworzę sobie obiekt, który ma właściwość name z przypisaną do niej wartością. Następnie na konsoli chcę wypisać właściwość name dla nowo utworzonego obiektu, zobaczmy to w konsoli....


A co to?

Co się stało? Jak to zwykle bywa diabeł tkwi w szczegółach. Jedną z wbudowanych w język Javascript funkcjonalności jest automatyczne wstawianie średnika na końcu linii. Silnik Javascript chce być bardzo pomocny dla programisty. Jeżeli w kodzie występuje linia kodu bez średnika na końcu, to silnik Javascript analizuje czy wstawienie średnika nie spowoduje błędu składniowego analizując kolejną linię kodu, jeżeli stwierdzi, że błąd nie występuje, to śpieszy z pomocą i sam wstawia za programistę średnik na końcu linii. Czyli patrząc okiem silnika Javascript nasz kod wygląda tak.

var obj = ( function(){ 

    return; 
    { 
        name:'Łukasz' 
    }; 

}()); 


Fragment { name: 'Łukasz' }; nigdy nie zostanie wywołany. Szukanie tego typu błędów może być koszmarem. Rozwiązanie jest bardzo proste wystarczy otwierający nawias klamrowy pisać z prawej strony. Poniżej umieściłem wynik poprawionego kodu.



Javascript jest potężnym językiem, ale bez jego znajomości analiza pojawiających się błędów może być koszmarem, dlatego uważam, że warto poświęcić czas aby poznać ten język i jego mechanizmy, tym bardziej, jeżeli chcemy używać rozwiazań na nim opartych, typu AngularJs, Backobone.js, Sencha Touch i innych.

No moim blogu, w ramach własnego poznawania języka Javascript będę się starał umieszczać posty przybliżające innym ten język programowania.

środa, 16 kwietnia 2014

Witam wszystkich na moim blogu :)




Niniejszy blog powstał z potrzeby poszerzania mojego warsztatu wiedzy. Lubię poznawać coś nowego, uwielbiam wyzwania, jednym z nich jest właśnie ninijszy blog :)
Jestem entuzjastą JS i Springa , dlatego ten blog będzie poświęcony głównie tym dwóm technologiom.
Charakter publikowanych tu artykułów będzie najczęściej referencyjny, w formie skrótu jakiejś technologii, szybkiego przypomnienia.

Dziękuję wszystkim, którzy znajdą czas zajrzeć tutaj i mam nadzieję, że każdy znajdzie coś dla siebie.


Pozdrawiam
Łukasz