Vývojářské ohlednutí

Před koncem roku se množí různá shrnutí uplynulého roku, ale já bych to chtěl vzít za trochu jiný konec. Všimli jste si, jak hrozně jednoduchý je dnes vývoj?

Neřeším teď, že v dřevních dobách se programovalo v assembleru. Myslím teď skutečně poslední zhruba dva roky, kdy najednou zmizela z vývoje spousta nesmyslů. Názorně předvedu na pár jednoduchý příkladech.

Stahování souboru

Pokud jste chtěli dát návštěvníkovi webu soubor ke stažení, vypadal PHP kód nějak takhle:

if(ini_get('zlib.output_compression')) { ini_set('zlib.output_compression', 'Off');    }
header('Pragma: public');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Cache-Control: private',false);
header('Content-Type: application/octet-stream';
header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: '.filesize($file_name));
header('Connection: close');
readfile($file_name);
exit();

Tím bylo zaručeno, že různé prohlížeče soubor skutečně nabídnou ke stažení, místo aby se ho snažily otevřít. Jak se to řeší dnes?

<a href="abc.php?atribut=1" download="invoice.pdf">invoice.pdf</a>

Prostě prohlížeči řeknete, že má nabídnout soubor ke stažení. Hotovo.

Javascript

Pamatujete, když byl javascript šílený jazyk, kde bylo nutné používat různé hacky pro prohlížeče nebo hromadu knihoven? Dneska je z něj jednoduchý jazyk, který se používá i na serveru. Když jste ještě relativně nedávno chtěli přidat třídu yyy všem odstavcům s třídou xxx, řešilo se to nějak takhle:

var elements = document.getElementsByTagName('p');
var classIdentifier = document.all ? 'class' : 'className';
for (var i = 0; i < elements.length; i++) {
    if ((' ' + elements[i][classIdentifier] + ' ').replace(/[\n\t]/g, ' ').indexOf(' xxx ') > -1) {
        elements[i][classIdentifier] += ' yyy';
    }
}

Pokud ale už nemusíme řešit dinosaury, tak najednou máme skript mnohem jednodušší. Kdybychom navíc chtěli složitější selektor, tak předchozí skript bude na stránku, zatímco nový je univerzální.

[].forEach.call(document.querySelectorAll('p.xxx'), function(p) {
    p.classList.add('yyy');
});

AJAX

A co třeba odeslání požadavku jednoduchého na server? Po staru:

try {
    x = new (XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
    x.open('POST', '/ajax', 1);
    x.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    x.onreadystatechange = function () {
        if (x.readyState > 3) {
            alert(x.responseText);
        }
    };
    x.send('abc=4564654&xyz=4564')
} catch (e) {
    window.console && console.log(e);
}

A nebo nově přes Fetch API. Nově navíc nemusíme skladádat a escapovat data - prostě pošleme celý formulář.

fetch('/ajax', {
    method: 'POST',
    body: new FormData(document.getElementById('form'))
})
.then(function(response){
    alert(response);
});

CSS

Podobné to je třeba i u CSS. Například zaoblení rohů elementu vyžadovalo zápis pro každý prohlížeč zvlášť. Dnes už se to sjednoducuje, ale hlavně už je naprostým standardem používat při práci s CSS post-processing. Problémy s vendor prefixy tak padají na automat a při vývoji nám můžou být ukradené.

Nemluvě o tom, že pro skutečnou podporu bylo nutné ještě přidávat javascript, který zprovoznil zaoblení v historických prohlížečích.

border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;

Když se spolehneme na post-processing:

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 2px;

Nástroje

Samostatnou kapitolou pak jsou nástroje. Všechny stíny, ohraničení a podobně z grafického návrhu můžeme už krásně exportovat a nepíšeme se s nimi ručně. Kompatibilitu upraveného javascriptu hravě zkontrolujeme napříč platformami automatickým testem. Vývojové prostředí nám všechno napovídá a rovnou upozorňuje na porušení best practice...

Mimochodem - jak velké sci-fi ještě před pár lety bylo, že by šlo HTML/CSS měnit ve všech prohlížečích živě? Pamatuje ty časy, kdy bylo nutné udělat změnu v CSS, uložit, uploadovat, reloadnout stránku, zkontrolovat změnu a opakovat? Dnes kliknu na element, změním margin a hned vidím. Magie!

Zrychlujeme

Proč o tom píšu? Občas je potřeba se zastavit a podívat se, jak strašně se nám zjednodušila práce. Dnes si můžete sednout a za den vyrobit aplikaci na platformě, kterou jste nikdy ani neměli v ruce. Všechno je nesrovnatelně jednodušší a existuje spousta inteligentních nástrojů.

Vyrábět weby by tak měla být hračka, ale stejně to tak není. Proč? Práce se nám sice zjednodušila, ale na druhé straně ji zase spousta přibyla. Dřív jsme ladili pro osm prohlížečů a dnes místo toho ladíme pro třicet různých rozlišení displeje. Dřív jsme byli omezeni technologiemi a dnes nás zase omezuje velikost mobilního displeje a rychlost připojení.

Zkrátka si nevyberete. Přesto jsem ale z vývoje v našem oboru v tomto roce nadšený. Nejen že technologie jde dopředu neskutečným tempem, ale i koncoví uživatelé takový vývoj vyžadují. V příštím roce se to určitě bude jen zrychlovat, takže se máme na co těšit - pilně studujte!