mloc.js 2014 – JS ninjas about upcoming JavaScript & Browser features?

A mloc.js második előadását Daniel Steigerwald tartotta. Elsősorban az ES6 volt a téma, de sok más érdekes dolog is előkerült. Így elsőre nekem az ES6 (ECMAScript 6) kevésbé tetszik. Nagyjából a CoffeScript pár finomságát vette át, viszont — ahogyan Daniel is említette — sokkal nagyobb teret ad nekünk, hogy csúnya kódot tudjuk írni. Amitől beszélt az tulajdonképpen a JavaScript idénre várható dolgai. Számomta ez volt az egyik legfurább eddig az egész mloc.js konferencián.

ECMA vs. JavaScript

Az egész ott kezdődött, hogy nem ment a prezentáció 🙂 De aztán megjavult. Fontos kezdés volt és sokan nem igazán tudják a hátteret, de a JavaScript az tulajdonképpen csak egy implementáció. A Mozilla, Chrome és a Microsoft is megcsinálta a saját JavaScript-jét. Ami előkerült annó elsőként az Internet Explorer-ben nem más volt mint az ES3. Legyünk őszinték, nem volt túl sok mindenre használható. Az ES5 követte, ami csak pár hibát és hiányosságot javított. Persze csodás és mára már szinte nem is weboldal, ami nem futtat valami finom JavaScript kódot. Legalább egy XHR kérést nem indít vagy nem animál be valamit. Ahol nem írtak a fejlesztők saját maguk ott is többnyire bent van a modernizr, de a legtöbb oldalban még a jQuery is. A Facebook, Google+ gombjai meg már ciki, ha nincsenek kint.

Az ES6 ezzel szemben egységesebbé szeretné tenni a rendszert, sokmindent megkapott így a JavaScript, ami eddig nem volt. Osztályokat, alapértelmezett paraméter-értékeket, többszörös értékadás vagy mondjuk a block szintű scope.

Block szintű Scope

A this jelentése sok kezdő JavaScript-es számára idegen. Ezután sem lesz máshogy, viszont sok más dolog is módosul. Bekerült a let és a const a var mellé. Daniel ajánlása arra, hogy miként használjuk őket:

Használj minden var helyett let-et.

De mit jelent ez? Miben más ez így most? Sokban, legfőképpen, hogy melyik változó mikor látszódik. Elfogadott tény egy változó használata esetén, hogy ha létre van hozva, akkor létezik. Eddig működött az alábbi kód:

for (var i = 0; i < 5; i++) {
  var j = 4;
}
console.log(j);  // kiírja, hogy 4

Viszont az új logika alapján már nem. Mármint, ha nem a var-t hanem a let-et használjuk.

for (let i = 0; i < 5; i++) {
  let j = 4;
}
console.log(j);  // kiírja, hogy nincs j változó

Jól látható a különbség. Innentől kezdve sokkal fontosabb lesz figyelni, hogy mit hol hozunk létre.

Tömeges értékadás

Ez nagy könnyedség tud lenni. Lényegében össze tudjuk tömöríteni a kódunkat.

let [a, b, c] = [1, 2, 3];

Ez ugyan az, mintha most azt írnánk, hogy:

var a = 1,
    b = 2,
    c = 3;

Ugyan ez igaz objektumokra is és talán ez a hasznosabb:

var robot = {
  name: "Bender",
  surname: "Rodríguez"
};

// ES3 && ES5
var name = robot.name;
var surname = robot.surname;

// ES6
var {name, surname} = robot;

Ez megmondja, hogy az x értéke legyen a, y értéke pedig b. Nah itt jön a csúnyaság is, mert bár lehetőségünk van rá, nem igazán kellene és ezt többször el is mondta Daniel.

function foo() {
  return [1, 2, 3];
}
let [a, b, c] = foo();

Szerintem logikus mit csinál, de ha valami függvény több értékkel tér vissza, akkor inkább adjuk át objektumként és adjunk neki nevet. Ne nehezítsük meg senki dolgát.

Kényelmes függvények az ES6-ban

Egy szép rövidített függvényhívást kapunk, ami nagyon jó lehetőség arra, hogy szépen össze lehessen csúfítani a kódbázist és már-már olvashatatlanná tenni azt.

// ES5
var squares = [1, 2, 3].map(function (x) {
 return x * x;
});

// ES6
var squares = [1, 2, 3].map(x => x * x);

Nah ez az ami például, ha nem egysoros függvényhez használja valaki, akkor olvashatatlan lesz a kód. Ami viszont kimondottan hiányzott és nagyon sok plusz sortól ment meg mindenkit, lehet alapértelmezett értéket adni változónak vagy akár tömbösíteni a paramétereket értelmesen.

function foo(x, y=0) {...}
function foo(...args) {...}
function foo({force}) {...}
function foo({force=false}) {...}

Osztáyok?

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

Interface nincs, de van már most is egy csomó megoldás, ha valakinek nagyon kell 🙂

Sok más dolog is szóba került és nagyjából mindent leszólt, amit valaha valaki csinált és neki nem volt köze hozzá. Internet Explorer, Angular.js, Internet Explorer, jQuery, Internet Explorer. A nekem leginkább tetsző megfogalmazása a 28. dián volt látható, ahol azt fogalmazta meg, hogy milyen problémák lehetnek és mihez vezethetnek.

Ez alapján a képzetlen (és nem csak előképzettség nélkülire kell gondolni, hanem nem képzik folyamatosan a cégek a fejlesztőket) munkaerő és a nem jó fejlesztési folyamat / környezet SDD fejlesztéshez vezet.

SDD (stress driven development)

A dia itt elérhető

További cikkek a mloc.js 2014-ről

mloc.js 2014 – Release the Kraken

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these