ś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.

Brak komentarzy:

Prześlij komentarz