javascript / ecmascript

Vít Jouda,
Dev Center Hradec Králové,

Česká Pojišťovna

O DCHK

vývojové centrum ČP v HK (od r. cca 2003)

vývoj interních aplikací, webů, zahraniční projekty

nový framework založený na moderních technologiích

Java 8, Spring Boot, Gradle, React, Redux, Webpack, Babel, Ramda...

SOAP a REST WS, Webové aplikace, portál pro sjednání pojištění, systém správy pohledávek...

mladý kolektiv programátorů se zaměřením na adaptaci nových technologií a metodiky vývoje

Webová aplikace

Definice

Technologie

Evoluce webových aplikací

(z pohledu DCHK)

Stavební bloky moderní spa

Package manager (NPM, Yarn, ...)

Transpiler (Babel, ...)

Module bundler (Webpack, Browserify, Rollup, ...)

Application FW / view layer (React, AngularJS, Vue, Ember, ...)

Model management (Redux, Flux, RxJS, ...)

CSS management (JSS, CSS modules, Sass...)

Test FW (Jest, Jasmine, Mocha, ...)

Základní charakteristiky ES

dynamicky typovaný

imperativní s deklarativními prvky

multi-paradigm

(skoro) vše je objekt

single-thread (event loop)

asynchronní (callback, Promise)

pass by value

prototypální, funkcionální, OOP

časté omyly

JS je pouze FE záležitost

JS je pomalý

s JS se nesetkám při vývoji BE aplikací

JS není modulární

Testování JS kódu

Test-Driven Development   

Behaviour-Driven development

metodika vývoje SW iterační metodou     založená na neprocházejících testech

metodika testování založená na specifikaci chování aplikačního kódu

Jest - BDD framework pro JS (Jasmine)

může zastávat dokumentaci

Základní konstrukce jazyka

//variable declaration
var a;
//variable definition
var b = 10;
//variable definitions can be chained
var myStr = 'abc', myNumber = 1;

//object creation
var car = new Object();
car.speed = 180;
car.color = 'blue';

//with object literal
var secondCar = {
    speed: 200,
    color: 'red'
};

//object properties have descriptors
Object.defineProperty(secondCar , 'type', {
    enumerable: false,
    get: function() {
        return this._type;
    },
    set: function(value) {
        console.log(value);
        this._type = value;
    }
});

secondCar.type = 'roadster';

//funtion statement, evaluated when VM resolves file
function add(a, b){
    return a + b;
}

//function expression, evaluated at runtime
var add = function(a, b){
    return a + b;
};

//functions are ALSO objects with operator()
add.param = 'some parameter';

//function cannot have overloaded parameters
function add(a, b){};
//ERROR - redefinition
function add(a, b, c){};

//function has implicit arguments[] parameter
function add(){
    return arguments[0] + arguments[1];
};

//function can return another function
function curriedAdd(a){
    return function(b) {
        return a + b;
    };
}

//function can also be passed as a parameter
function callMyName(getMyName){
    alert(getMyName());
}

callMyName(function(){
    return 'Mr. Mock';
})

//any variable can hold function
var car = {
    vendor: 'Audi',
    makeSound: function(){
        alert('sound');
    }
}
car.makeSound();

https://developer.mozilla.org/cs/docs/Web/JavaScript/Equality_comparisons_and_sameness

porovnání hodnot v js

Speciální operátory

typeof - vrací základní typ proměnné

https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Operators/typeof

instanceof - testuje přítomnost konstruktoru v prototypálním řetězci proměnné

https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Operators/instanceof

logické hodnoty a operátory

rozlišujeme tzv. truthy a falsy hodnoty

hodnota proměnné v booleanovském kontextu (podmínky, kontruktor new Boolean(), logické operátory)

https://developer.mozilla.org/en-US/docs/Glossary/Truthy

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

logické operátory || a && mají návratovou hodnotu

var falsyValue = 0, truthyValue = 'truthy';
var truthy = falsyValue || truthyValue;
var falsy = falsyValue && truthyValu;

lze použít pro defaultování hodnot (use with caution)

trik pro převod mezi truthy a falsy hodnotami na boolean

var falsyValue = '';

var booleanValue = !!falsyValue;

alert(typeof booleanValue);

pole a deklarativní prvky

//define array
var arrayObject = new Array();
var arrayLiteral = [];

//add to the end of an array
arrayLiteral.push('value');
//remove from the end of an array
var lastElement = arrayLiteral.pop();

//add to the beginning of an array
arrayLiteral.unshift('value');
//remove from the beginning of an array
var firstElement = arrayLiteral.shift();

//shallow copy array
var shallowCopy = iterableArray.slice();
iterableArray.pop();
alert(shallowCopy.length);

//iterate over array
var iterableArray = [0, 1, 2];
for(var i = 0; i < iterableArray.length; i++){
    alert(iterableArray[i]);
}

//remove multiple elements from array
var toRemoveFrom = [0, 1, 2];
alert(toRemoveFrom.splice(1, 2));
alert(toRemoveFrom);

//iteration
var colors = ['red', 'green'];

colors.forEach(function(color){
    alert(color);
})

//filter
var filteredColors = colors.filter(function(color){
    return color === 'red';
})

//map
var mappedColors = colors.map(function(color){
    return {
        color: color
    };
})

//reduce
var allColors = colors.reduce(function(acc, next){
    return acc + next;
})

var numbers = [0, 1, 2, 3];
var oddNumbersSum = numbers
    .filter(function(number){
        return number % 2 === 1;
    })
    .reduce(function(acc, next){
        return acc + next;
    });
alert(oddNumbersSum);

Ne všechno je "pole"

existují array-like objekty

arguments[], DOM-method result

lze převést na Array

Array.prototype.slice.call(arguments);

Prototypální dědičnost

každý objekt má svůj prototype

prototype je obyčejný JS objekt

výchozí prototyp je Object.prototype

prototypy objektu tvoří tzv. "prototype chain"

při přístupu k atributu je tento řetězec prohledáván odspoda nahoru

v devtools viditelný jako '__proto__'

protypální řetezec je vytvořen pomocí

operátoru 'new' při volání konstruktoru

metody Object.create()

konstruktor

obyčejná JS funkce, dle kovnvence začíná velkým písmenem

volá se přes operátor 'new'

za předpokladu volání 'new Foo()' se provedou následující operace

1. vytvoří se prázdný objekt, jehož prototyp je nastaven na Foo.prototype
2. zavolá se funkce Foo s tímto objektem jako kontext ('this')
3. návratová hodnota této funkce je vrácena jako výsledek volání operátoru new (implicitně je vrácen objekt z bodu 1)

Object.create()

vytvoří nový objekt s prototypem nastaveným na první parametr

na rozdíl od 'new' nevolá žádný konstruktor

může vytvořit objekt bez prototypu - Object.create(null)

// samsungPhone
{
    systemVersion: '6.1',
    __proto__: phone
}

// phone
{
    displayType: 'AMOLED',
    cpu: {
        model: 'Snapdragon 821',
        cores: 8
    },
    __proto__: Object.prototype
}

// Object.prototype
{
    ...
}

var phone = {
    displayType: 'AMOLED',
    cpu: {
        model: 'Snapdragon 821',
        cores: 8
    }
};

function SamsungPhone(){
    this.systemVersion = '3.0';
}

SamsungPhone.prototype = phone;

var samsungPhone = new SamsungPhone();

OOP s využitím prototypální dědičnosti

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayYourName = function() {
    console.log(this.name);
}

//older approach
function Doge(name) {
    Animal.call(this, name);
}
Doge.prototype = new Animal();
Doge.constructor = Doge;

Doge.prototype.makeSound = function() {
    console.log('Bark!')
}

var rex = new Doge('Rex');

//newer approach using object.create()
function Cate(name) {
    Animal.call(this, name);
}
Cate.prototype = Object.create(Animal.prototype);
Cate.constructor = Cate;

Cate.prototype.makeSound = function() {
    console.log('Moew!')
}

var garfield = new Cate('Garfield');

rex.sayYourName();
rex.makeSound();
console.log('-------')
garfield.sayYourName();
garfield.makeSound();

Promise

ES2015 promise

callback hell

//example using fake API
function send(URL, data, onDone = function(responseData){}){};

send(calculateContract, formData, function(calculatedData ){
    send(saveToDB, calculatedData function(savedData){
            send(print, savedData, function(){
                console.log('Contract printed');
            });   
        });
});

//same example using ES2015 Promise
send(calculateContract, formData)
    .then(function(calculatedData ){
        return send(saveToDB, calculatedData );
    })
    .then(function(savedData){
        return send(print, savedData);
    })
    .then(function(){
        console.log('Contract printed');
    })
    .catch(function(err){
        //handle error
        console.log(err);
    });

//...and with arrow functions
send(calculateContract, formData)
    .then((calculatedData) => send(saveToDB, calculatedData))
    .then((savedData) => send(print, savedData))
    .then(() => console.log('Contract printed'))
    .catch((err) => console.log(err));