CLIW 2015-2016 (13/13) Perspective Web la nivel de client. Limbajul ES6

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


co

“A programming language is low level when its programs require attention to the irrelevant.”

Alan J. Perlis

Dr.

Sab

in B

ura

ga


co

Care este prezentul și viitorullimbajului JavaScript?

Dr.

Sab

in B

ura

ga


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


co



lista facilităților:https://github.com/lukehoban/es6features

Dr.

Sab

in B

ura

ga


co



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


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


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


co






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


co






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


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


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


co

function TestareLet() {

let x = 33;

if (true) {

// variabilă diferită!

let x = 74;

console.log(x); // 74

}


}

function TestareVar() {

var x = 33;

if (true) {

// aceeași variabilă

var x = 74;


}


}

developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


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


co

Dr.

Sab

in B

ura

ga


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


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


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


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


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


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


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


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


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


co

Dr.

Sab

in B

ura

ga


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


co

secvența fiind infinită, trebuie să ieșim cu break

Dr.

Sab

in B

ura

ga


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


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


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


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); // undefined

aspecte avansate la http://www.2ality.com/2015/03/es6-generators.html

https://www.promisejs.org/generators/

Dr.

Sab

in B

ura

ga


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


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


co

Promises



fulfilled – operația s-a terminat cu succes, oferind un rezultat

Dr.

Sab

in B

ura

ga


co

Promises



rejected – operația a eșuat, oferindu-se un motiv (eroarea survenită)

Dr.

Sab

in B

ura

ga


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


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


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


co

Noi tipuri de date ES6

SymbolMapSet

WeakMapWeakSet

ProxyReflection

Dr.

Sab

in B

ura

ga


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


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


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


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


co

compararea facilităților oferite în prezenthttp://kangax.github.io/compat-table/es6/

Dr.

Sab

in B

ura

ga


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


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


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)

Dr.

Sab

in B

ura

ga


co

episodul viitor: evaluarea proiectului (P)

Dr.

Sab

in B

ura

ga


co

Mult succes!

Date post:	23-Feb-2017
Category:	Software
Upload:	sabin-buraga
View:	863 times
Download:	2 times

CLIW 2015-2016 (13/13) Perspective Web la nivel de client. Limbajul ES6

Software