Post on 23-Feb-2017
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
{=>}perspective Web la nivel de client
ES6 – o prezentare generală
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“A programming language is low level when its programs require attention to the irrelevant.”
Alan J. Perlis
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
ECMAScript 2015 (ES6)
noua specificație standardizată (ediția VI, iunie 2015)
http://www.ecma-international.org/ecma-262/6.0/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
ECMAScript 2015 (ES6)
noua specificație standardizată (ediția VI, iunie 2015)
lista facilităților:https://github.com/lukehoban/es6features
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
ECMAScript 2015 (ES6)
noua specificație standardizată (ediția VI, iunie 2015)
detalii + exemplificări:http://es6-features.org/
https://jsfeatures.in/#ES6
https://ponyfoo.com/articles/tagged/es6-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Definirea de clase(perspectiva paradigmei obiectuale)
“simple sugar over the prototype-based OO pattern”
https://ponyfoo.com/articles/es6-classes-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
const DIST = 7, MAXPOWER = 33;class Robot {
constructor (distance = 0) {this.power = 0;this.distance = distance;
}move () {if (this.power < 1) {
throw new RangeError('N-am energie');}this.power--;this.distance += DIST;
}addPower () {if (this.power >= MAXPOWER) {
throw new RangeError('Bateria e plina');}this.power++;
}}
un robot poate fi mutat, parcurgând o distanță
prestabilită și consumând o unitate energică
suplimentar, poate fi alimentat cu energie
în ES6 se pot declaraparametri cu valori implicite
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
const DIST = 7, MAXPOWER = 33;class Robot {
constructor (distance = 0) {this.power = 0;this.distance = distance;
}move () {if (this.power < 1) {
throw new RangeError('N-am energie');}this.power--;this.distance += DIST;
}addPower () {if (this.power >= MAXPOWER) {
throw new RangeError('Bateria e plină');}this.power++;
}}
// instanțiem un robot
// distanța ia valoarea implicită
let robot = new Robot();
console.log (robot.distance);
try {
robot.addPower();
robot.move();
robot.move();
} catch (e) {
console.error (e.message);
} finally {
console.log ('M-am deplasat cu '
+ robot.distance +
' metri, iar energia actuală este '
+ robot.power);
}
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
const DIST = 7, MAXPOWER = 33;class Robot {
constructor (distance = 0) {this.power = 0;this.distance = distance;
}move () {if (this.power < 1) {
throw new RangeError('N-am energie');}this.power--;this.distance += DIST;
}addPower () {if (this.power >= MAXPOWER) {
throw new RangeError('Bateria e plină');}this.power++;
}}
// instanțiem un robot
// distanța ia valoarea implicită
let robot = new Robot();
console.log (robot.distance);
try {
robot.addPower();
robot.move();
robot.move();
} catch (e) {
console.error (e.message);
} finally {
console.log ('M-am deplasat cu '
+ robot.distance +
' metri, iar energia actuală este '
+ robot.power);
}
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
class R2D2 extends Robot {constructor (distance) {super(distance * 2);
}move () {super.move();this.power++; // R2D2 nu consumă energie ;)
}}
mai sunt permise:
extinderi de clasă via extends
acces – cu super – la membrii din clasa de bazămetode de tip get și set
metode statice specificate cu prefixul static (similar C++)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noi declarații de variabile
const – valori constante vizibile la nivel de bloc
let – alternativă la var, cu vizibilitate la nivel de bloc(mărginirea domeniului de vizibilitate – scope)
ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
function TestareLet() {
let x = 33;
if (true) {
// variabilă diferită!
let x = 74;
console.log(x); // 74
}
console.log(x); // 33
}
function TestareVar() {
var x = 33;
if (true) {
// aceeași variabilă
var x = 74;
console.log(x); // 74
}
console.log(x); // 74
}
developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Parametrii unei funcții pot fi multipli (rest parameters)
function concateneaza (...cuvinte) {
return cuvinte.join(' ');
}
var sir = concateneaza ('ES6', 'e', 'super!');
console.log(sir); // "ES6 e super!"
https://ponyfoo.com/articles/es6-spread-and-butter-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Destructurare în ES6 (destructuring)
“binds properties to as many variables as you need and it works with both arrays and objects”
https://ponyfoo.com/articles/es6-destructuring-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// selectarea elementelor dorite dintr-o listă (tablou)
let [ primul, , ultimul ] = [ 'Radu', 'Ana', Date.now() ];
console.log (primul); // "Radu"
console.log (ultimul); // data curentă în secunde
// oferă coordonatele geografice pentru Iași
function furnizeazaCoordonate () {
return { lat: 47.16667, long: 27.6 };
}
var { lat, long } = furnizeazaCoordonate ();
console.log (lat);
// furnizează un număr natural generat aleatoriu dintr-un anumit interval
function aleator ({ min = 1, max = 300 } = { }) {
return Math.floor(Math.random() * (max - min)) + min;
}
console.log (aleator());
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Machete privind substituția de valorile de bază (template literals)
machetă = orice șir de caractere delimitat de simbolul `(inclusiv specificat pe mai multe linii de text – multiline)
o machetă poate include expresii JavaScript specificate cu ${…} ce vor fi înlocuite cu valoarea evaluată
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
var article = { // un obiect JS oferind date despre un articoltitle: 'Un exemplu de machete ES6',teaser: 'facilitati oferite de machete de substituție de valori',body: 'Generare HTML cu noul JavaScript',tags: [ 'ES6', 'JavaScript', 'HTML5' ]
};var { title, teaser, body, tags } = article; // destructurarevar html = `<article>
<header><h1>${title}</h1></header><section><h2>Articol referitor la ${teaser}</h2><p class='slogan'>${body}</p>
</section><footer>
<ul>${tags.map(tag => `<li>${tag}</li>`).join('\n ')}</ul></footer>
</article>`;
console.log (html);
fiecărui element din tabloul tags îi corespunde o machetă a cărei valoare va fi un marcaj HTML
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
alte detalii sunt furnizate dehttps://ponyfoo.com/articles/es6-template-strings-in-depth
http://es6-features.org/#StringInterpolation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Arrow functions
declarare succintă a unei funcții anonimeparametri => valoareOferită
nu posedă propriile valori pentru this, arguments, super
https://ponyfoo.com/articles/es6-arrow-functions-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// funcție anonimă cu un singur argument de intrare
// se întoarce valoarea unei expresii JS
console.log ( [2, 3, 5].map (numar => numar * 7) ); // [14, 21, 35]
// în JavaScript clasic (ES5):
console.log ( [2, 3, 5].map (function (numar) {
return numar * 7;
}) );
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// definirea unei funcții recursive în ES6; aici, factorialul
let factorial = (numar) => {
return numar === 0 ? 1 : numar * factorial (numar - 1);
};
console.log ( factorial (5) ); // 120
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// prelucrarea facilă a tablourilor: filtrare, asociere de valori,…
var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15];
// suma tuturor valorilor: 311
var suma = numere.reduce ((a, b) => a + b);
// doar numerele impare: [1, 7, 9, 85, 51, 7, 15]
var impare = numere.filter (val => val % 2 === 1);
// valorile pătratelor
var patrate = numere.map (val => Math.pow(val, 2));
developer.mozilla.org/Web/JavaScript/Reference/Functions/Arrow_functions
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Iteratori
iterarea valorilor se poate realiza asupra oricărui obiect
se pot genera secvențe de valori (finite ori infinite) prelucrabile via noua construcție for…of
https://ponyfoo.com/articles/es6-iterators-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Iteratori
remarcă:un singur element al secvenței poate fi accesat
la un moment dat (lasy in nature)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Generatori
generator = tip special de iterator ce returnează gobiecte de tip generator care ulterior pot fi iterate cu
Array.from(g), […g] sau for valoare of g
https://ponyfoo.com/articles/es6-generators-in-depth
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Generatori
oprirea temporară și apoi continuarea execuției unui generator se realizează via yield
https://developer.mozilla.org/Web/JavaScript/Reference/Operators/yield
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// declararea unui generator de identificatori numerici
function* idMaker() {
var index = 0;
while (index < 3)
yield index++;
}
var gen = idMaker();
console.log (gen.next().value); // 0
console.log (gen.next().value); // 1
console.log (gen.next().value); // 2
console.log (gen.next().value); // undefined
aspecte avansate la http://www.2ality.com/2015/03/es6-generators.html
https://www.promisejs.org/generators/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Promises
a promise represents the eventual result of an asynchronous operation
represents an operation that hasn’t completed yet, but is expected in the future
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Promise
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Promises
fiecare obiect de tip Promise
se poate afla în una dintre stările:
pending – stare inițială, operația nu s-a terminat sau a fost anulată
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Promises
fiecare obiect de tip Promise
se poate afla în una dintre stările:
fulfilled – operația s-a terminat cu succes, oferind un rezultat
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Promises
fiecare obiect de tip Promise
se poate afla în una dintre stările:
rejected – operația a eșuat, oferindu-se un motiv (eroarea survenită)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// implementarea unui obiect Promise
var promise = new Promise (function(resolve, reject) {
// realizarea unor operații (eventual, în mod asincron)
// apoi, în funcție de ceea ce s-a întâmplat…
if (/* totul e în regulă */) {
resolve ("A mers!");
}
else {
reject (Error("S-a stricat"));
}
});
specificația pentru implementarea standardizată: https://promisesaplus.com/
biblioteci JS: https://promisesaplus.com/implementations
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// implementarea unui obiect Promise
var promise = new Promise (function(resolve, reject) {
// realizarea unor operații (eventual, în mod asincron)
// apoi, în funcție de ceea ce s-a întâmplat…
if (/* totul e în regulă */) {
resolve ("A mers!");
}
else {
reject (Error("S-a stricat"));
}
});// utilizarea ulterioară
promise.then (function(result) {
console.log (result); // "A mers!"
}, function(err) {
console.log (err); // Error: "S-a stricat"
});
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
metodele then() și catch() pot fi înlănțuite
un tutorial, oferind exemple pragmatice:www.html5rocks.com/en/tutorials/es6/promises/
a se studia și github.com/wbinnssmith/awesome-promises
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noi tipuri de date ES6
SymbolMapSet
WeakMapWeakSet
ProxyReflection
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Extinderea unor tipuri existente
Number – exprimarea de valori binare și octale
String – suport mai bun pentru Unicode
RegExp – operatorul y (sticky matching)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Module
// --json.js--
function preiaJSON (url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback (this.responseText)
};
xhr.open ("GET", url, true);
xhr.send ();
}
export function oferaContinut (url, callback) {
preiaJSON (url, date => callback(JSON.parse(date)));
}
specificarea unui modul ce oferă (exportă) funcționalități
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Module
// --json.js--
function preiaJSON (url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback (this.responseText)
};
xhr.open ("GET", url, true);
xhr.send ();
}
export function oferaContinut (url, callback) {
preiaJSON (url, date => callback(JSON.parse(date)));
}
aspecte avansate: exploringjs.com/es6/ch_modules.html
ponyfoo.com/articles/es6-modules-in-depth
// --main.js-- (utilizarea modulului)
import { oferaContinut } from "json.js";
oferaContinut ("http://undeva.info ",
date => { proceseaza (date); });
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente ES6
în principal, convertire ES6ES5
Babel – https://babeljs.io/
Traceur – https://github.com/google/traceur-compiler
de consultat https://github.com/addyosmani/es6-tools
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
compararea facilităților oferite în prezenthttp://kangax.github.io/compat-table/es6/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte resurse de studiat
Nicholas C. Zakas, Understanding ECMAScript 6 (2015)https://leanpub.com/understandinges6/read
Axel Rauschmayer, Exploring ES6 (2016)http://exploringjs.com/
Wolfram Kriesing, ES6 Katas (2016)http://es6katas.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Viitor: ECMAScript 2016 (ES7)
în mod incremental, propunerea și – eventual –aprobarea spre standardizare
a unor construcții + facilități de interes
starea actuală e disponibilă la https://github.com/tc39/ecma262
diverse exemplificări: https://jsfeatures.in/#ES7
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care dintre facilitățile ES6 nou introduse ar putea fi considerate cele mai importante
din punctul de vedere al dezvoltatorului de aplicații Web la nivel de client?
test scris #5 (T5)