Few things

Bleskurychlé webové aplikace

2016-01-11T06:11:00.000+01:00

Výpisek z mé přednášky na ČVUT:FIT 16.12. 2015 v Dejvicích. Na chyby mě prosím upozorněte v komentářích.

Jak vnímá uživatel rychlost aplikace

Rychlost Aplikace

Aplikace je bolestivě pomalá, uživatel jí opustí
Aplikace je snesitelná, uživatel používá
Aplikace je plynulá, uživatel má radost

“Jakmile má uživatel opravdu radost, už se nevyplatí investovat do zrychlení.”

A nebo z druhé strany:

“Investujte do zrychlení, dokud nemá uživatel opravdu radost.”

Prodleva	Reakce uživatele
0 - 100ms	Okamžitá reakce
100 - 300ms	Malá vnímatelná prodleva
300 - 1000ms	Stále v kontextu jednoho úkolu, vnímá prodlevu
1000+ ms	Mysl utíká k jinému problému (context switch)
10 000+ ms	Je to rozbité / přijdu později

60 FPS => 16ms (1/60)

RAIL Model

Model, který definuje časy pro svižnou aplikaci v různých typech interakce - k těmto hodnotám se pokoušíme přiblížit.

Reaction Time < 100ms Uživatel pociťuje okamžitou odezvu. Např. po kliknutí na tlačítko. Cokoliv delší a akce-reakce je rozbitá.
Animation Time = 16ms Změny jsou plynulé. Např. scrollování. Jakákoliv změna plynulosti otravuje.
Idle Time “Na prázdno” = 50ms Uživatel nic aktivně nedělá, takže aplikace má čas udělat práci. Musíme jí ale omezit na 50ms, aby aplikace mohla zareagovat na uživatele.
Load Time < 1s První zobrazení. Aby uživatel neztratil kontext, aby nezačal přemýšlet o něčem jiném.

Bojujeme proti fyzikálním zákonům a rychlost světla je protivně pomalá

Žádnou informaci nejsme schopni přenést po povrchu země z mého bytu do Dejvic rychleji, než za 31.2ms. A to je ideální případ ve vakuu, kdy na cestě nejsou žádné jiné “zpomalovače”, jako switche a routery. Realita bude mnohem horší (např. mobil nejprve musí navázat připojení k věži operátora).

Pokud 31.2ms porovnáme s čísly, které jsme si definovali pro RAIL, tak vidíme, že zde soupeříme s fyzikálními zákony a musíme k problému přistupovat chytře (trh a váš šéf většinou na fyzikální a matematické limity nedbá).

Poznatek: “Rychlost světla je protivně pomalá”

Jaké jsou rozdíly mezi nativními a webovými aplikacemi

Webové aplikace	Nativní aplikace (Android, iOS...)
Vždy aktualizované	Jednotný proces instalace (app store)
Fungují na všech platformách	Fungují offline
Jeden zdrojový kód	Rychlé + Přístup k GPU a periferiím
Nejsou blokovány pravidly app storů	Přístup k funkcím OS
Nejasný způsob instalace	Aktualizace nejsou pod kontrolou
Potřebují připojení k internetu	Každá platforma má odlišné schopnosti
Nemají přímý přístup k funkcím OS	Limitované pravidly app storů
Načítají se pomalu	Dražší na vývoj

Jak postupovat, když je aplikace pomalá?

Měříme přesně a opakovatelně, jaké interakce v aplikaci trvají jak dlouho

Analyzujeme, uděláme seznam problémů, seřadíme podle toho jak jsou pomalé a důležité

Ze seznamu vezmeme první problém a vyřešíme/zlepšíme

GOTO 1

Analýza: Jak funguje prohlížeč

Při hledání problému se zaměříme na tři hlavní situace, které mohou a často způsobují “pomalost”:

Prohlížeč stáhne data stránky
Prohlížeč vykreslí data na obrazovku
Prohlížeč reaguje na pokyny uživatele

Jak funguje prohlížeč: Stažení dat potřebných pro zobrazení

Když prohlížeč stahuje data pro jQuery, tak pouze 1/10 času je stráveno samotným přenosem dat, zbytek je navazování šifrovaného připojení k serveru.

Každou sekci v tomto obrázku ukazujícím časovou osu pro stažení jQuery lze zkrátit, či úplně odebrat. A když ne pro první načtení, tak alespoň pro všechny další načtení.

Poznatek: “první odpověď od serveru (HTML) definuje řádek po řádku, jaké další soubory se mají načíst”

Jak funguje prohlížeč: Vykreslení na obrazovku

Parse HTML Krok po kroku přečte HTML kód a vytvoří DOM (Data Object Model).

JavaScript Zpracuje data a vynutí změnu, kterou je potřeba zobrazit na stránce.

Style Calculations Najde pro elementy jejich příslušně CSS styly (barvu, pozici, atd.).

Layout Spočítá, kam na stránce umístit všechny elementy a jak jsou veliké.

Paint Vykreslí jednotlivé pixely: fonty, barvy, obrázky, stíny.

Composite Sloučí vrstvy dohromady a vykreslí ve správném pořadí.

Jak funguje prohlížeč: Reakce na pokyny uživatele

JavaScript je jednovláknový. Když běží JavaScript, stránka je zaseklá a nedovolí žádné další interakce, ani např. scrollování.

Prohlížeč přepíná mezi dvěmi stavy - buď pouští JavaScript, nebo vykonává “svoje věci” (většinou napsané v C++), např. zobrazení elementů, reakce na scrollování a pod. viz předchozí sekce Vykreslení na obrazovku.

K tomu prohlížeč používa event-loop, nebo-li frontu s úkoly:

Pokud je ve frontě nějaký úkol, prohlížeč (JavaScript engine) ho začne zpracovávat
Když je jeden úkol v JS dokončen, tak prohlížeč přepne do stavu “svoje věci” a aktualizuje to co zobrazuje, vykreslí data, atd.
Po malé chvilce zas prohlížeč zkontroluje, jestli je něco ve frontě a pokračuje bodem (a)

Body (a) až (c) se prohlížeč snaží vykonat do 16ms tak, aby stránka reagovala plynule.

(Zdroj: 2ality)

Jak na rychlou aplikaci

Je více různých možností a taktik, jak vytvořit rychlou aplikaci, ale my se v následujícím textu zaměříme na tyto 4 body:

Progresivní načítání

Jak neblokovat prohlížeč

Resource Hints

Přednačítání pomocí nových HTML APIs

Web Worker

Provádění výpočtů ve Web Workers, neboli JS vícevláknově

Service Worker

Uložení aplikace offline pomocí nového API pro psaní vlastní proxy v prohlížeči

Progresivní načítání

Nečekáme až se načtou veškeré zdroje (data, obrázky, JavaScript), ale zobrazujeme uživateli informace, jakmile dorazí. Podívejme se na následující vizualizaci:

(Zdroj a více informací: Google Developers: Critical rendering path)

Nic se ale nesmí přehánět - nechceme, aby uživateli obsah poskakoval na stránce a stránka blikala a měnila se pod ukazatelem. Proto je dobré rozdělit stránku na sekci, kterou uživatel uvidí hned po načtení (“above the fold”) a na sekci, ke které teprve musí doscrollovat.

(Zdroj: WordStream)

Toho docílíme tím, že rozdělíme zdroje (JS, data...) podle toho kdy by měly být načteny a řídíme kdy se data načítají.

Pravidlo: “Zdroje by měly být přednačteny co nejdříve a načteny co nejpozději”

Pokud toto pravidlo splníme, tak se

zdroje načtou velmi rychle
ale vytíží CPU, až když jsou potřeba

Jedním z přístupů je použít takzvaný “Application Shell”, tedy rozdělit aplikaci na data (html, layout, js), která se nikdy nemění (tzv. shell = ulita) a zbytek dat stáhnout až poté v zvláštním dotazu serveru:

Pro detaily doporučuji tento velmi pěkný článek: Getting Started with Progressive Web Apps, který vznikl až po mé původní prezentaci (inspiroval se Addy? :) ).

Pěkná ukázka takové aplikace je voice-memos.appspot.com (článek, zdrojáky).

Neblokujte prohlížeč v jeho práci

Jak jsme již zmínili, v první odpovědi posílá server prohlížeči index.html soubor. Tento soubor definuje další odkazy na soubory, které stránka potřebuje. Např.:

<!DOCTYPE html>
<html>
<head>
<script src="webcomponents-lite.min.js"></script> ← Blokuje!

Zjednodušeně: Prohlížeč zpracovává soubor index.html řádek po řádce a jednotlivé řádky mohou blokovat další zpracování, dokud odkazovaný soubor není stažen a spuštěn.

Pravidlo: “Žádný řádek v index.html by neměl blokovat další zpracování dotazem na server”

Následující kód ukazuje lepší způsob - po pár změnách již html neblokuje prohlížeč ani jedním řádkem:

<!DOCTYPE html>

<html>

<head>

</head>
<body>

<main class="main"></main> ← Application Shell

<aside class="toast-view"></aside> ← Application Shell

<app-element></app-element>

</body>

</html>

Podívejme se např na “async” atribut u JavaScript souboru, který slouží k asynchronnímu (neblokujícímu) načtení:

Jak doporučit prohlížeči co by měl přednačíst (Resource Hints)

Pokud víme, jakou akci uživatel typicky udělá hned poté co se stránka načte (např. ze stránky košíku jde uživatel na stránku objednávky), můžeme toho využít a říct prohlížeči, jaká bude další akce:

preconnect: DNS lookup, TCP handshake and TLS

další variant je rel=”dns-prefetch”, který pouze udělá DNS lookup

prefetch: přednačte zdroje

nová lepší varianta je “preload”, který zruší request při navigaci

prerender: přednačte celé stránky

Co když je JavaScript pomalý?

Co dělat, když naše výpočty v JavaScriptu trvají déle, než 16ms tak aby se vešly do jednoho snímku (60FPS)?
Naivní řešení je použít při výpočtu funkci setTimeout(fn, 10);, která zajistí že funkce fn bude prohlížečem zavolána až za 10ms a do té doby může prohlížeč provádět “svoje věci”.
Tato hodnota ale bohužel není synchronizována s tím, jak prohlížeč vykresluje snímky na obrazovku. Lehce se nám tak může stát následující situace, kdy zpracování JavaScriptu přesáhne do dalšího rámce (snímek se tím pádem nevykreslí, a stránka se chová “trhaně”):

Pravidlo: “Nepoužívejte setTimeout, nebo setInterval pro vizuální změny; vždy používejte requestAnimationFrame (a nově requestIdleCallback)”.

JavaScript, který musí bežet déle, než 16ms přesuňte do Web Worker.

Web Worker - JavaScript vícevláknově

Jednou z nových “API” definovaných pro HTML je Web Worker. Web Worker umožňuje běh JavaScriptu ve vlákně na pozadí a práce s ním je snadná:

// Zaregistrujeme nový WebWorker.

var dataSortWorker = new Worker("sort-worker.js");

// Pošleme workeru data na seřazení.
dataSortWorker.postMesssage(dataToSort);

// Hlavní vlákno může teď dělat libovolné akce.

// Ještě musíme poslouchat na odpověď od workeru.
dataSortWorker.addEventListener('message', function(evt) {
var sortedData = evt.data;
// Odpověď přišla, data jsou seřazená, můžeme zobrazit na stránce.
});

Model na posílání dat je pak velmi jednoduchý:

Jak na Offline

Service Worker je JS script, který běží na pozadí v prohlížeči odděleně od webové stránky. Umožňuje programátorovi napsat libovolný kód na zpracování všech dotazů mezi aplikací a serverem.

Jedním z využití je pak způsob jak uložit aplikace v prohlížeči pro použití bez připojení k internetu.

(Zdroj a detailní možnosti: https://jakearchibald.com/2014/offline-cookbook/)

// Zaregistrujeme nový Service Worker
navigator.serviceWorker.register('/sw.js');

// Ve workeru (sw.js) načteme soubory

// a přidáme do ‘caches’ ...

// Ve workeru (sw.js) pak posloucháme

// na dotazy prohlížeče

self.addEventListener('fetch', function(event) {
event.respondWith(
   caches.match(event.request).then(function(response) {
     return response || fetch(event.request);       // Worker si může dělat s dotazem co chce
   })
);
});

Pro inspiraci se pak můžeme podívat na následující aplikace (zdrojové soubory jsou vždy k dispozici):

https://voice-memos.appspot.com

https://guitar-tuner.appspot.com

https://www.pokedex.org

https://jakearchibald.github.io/jank-invaders/

Fun with JavaScript Arrays

2013-06-12T08:18:00.000+02:00

The first thing I usually run into when trying new programming languages are some weird corner case behaviors, so I decided to run into those on purpose and write one of my first blog posts about that.

Couple of notes before we begin:

I've tried all those examples in Google Chrome Console - command+option+I on Mac and hopefully similar keys on Win/Linux
When reading this article you might need to stop and think. Stop and Think!
Also keep in mind that sometimes I'm playing stupid, but sometimes I'm actually stupid.

// Let's say we have an array with three elements, this can't hurt
> var a = [1, 2, 3];
> a
[1, 2, 3]

// Ok, looks good
// Let's add something interesting
> a[-1] = 4;
// Has this array changed?
> a
[1, 2, 3]

// No?
// What about that element
> a[-1]
4

// Hmm, it's there
// So what happens when we try something crazy
> a[NaN] = 5;
> a
[1, 2, 3]

// Whoaaa

// Let's try couple of others
> a[-Infinity] = "P";
> a[-Infinity+3] = "NP";
// No error yet, so let's do a little check
> a[-Infinity] === a[-Infinity+3]
true

// Did I just prove that P=NP? Never-mind, we shouldn't get distracted
// by unimportant problems. So how could I see what's inside a? console.log!
> console.log(a);
[1, 2, 3, -1: 4, NaN: 5, -Infinity: "NP"]

// Hmm, this kinda looks like it's messed up array with object
// So let's check
> typeof a
"object"

// Type of array is object? Really?
> typeof []
"object"

// Indeed it is, I almost forgot about this ~'Good Part'
// Now that I have entertained myself... inverting string bitwise, heh...
// Actually, what is the result?
> ~'Good Part'
-1

// Yea...
// But let's get back to adding wrong things to array
> a[function]='err';
SyntaxError: Unexpected token ]

// Ok, that is actually wrong, so something else
> a[typeof console.log] = "duh";
> a['~'] = '<';
> a[a[typeof a]='huh', void a] = 'puh';
> a[{do: 'break'}] = 'thanks';
> a.continue = ["-",+"you"+"","+"][3,2,1][2];
> a.return = function(p){ return p;};

// I'm starting to feel bad about abusing this little array a so much.
// Are you ok little fella?
> a
[1, 2, 3]

// Like nothing had happened
// So what about operators?
> a[a|a] = 3;
> a[-~a&-~a] = 2;
> a[-~-~!a] = 1;
> a
[3, 2, 1]

// Good, good, nicely reversed
> a['!'-1]
5

// Whoaa? Dude?
> '!'-1
NaN

// Oh yeah, I forgot about that I already have NaN in there
// console.log will reveal other interesting things for sure
> console.log(a);
[
  -Infinity: "NP",
  0: 3,
  1: 2,
  2: 1,
  -1: 4,
  NaN: 5,
  [object Object]: "thanks",
  continue: "N",
  function: "duh",
  length: 3,
  object: "huh",
  return: function (p){ return p;},
  undefined: "puh",
  ~: "<"
]

// Hmm, there are couple of nice ones
> a.length = 2;
> a
[3, 2]

// Sorry for that
> a[{}];
"thanks"
> a['[object Object]'] = "you're welcome";

// Also, where did that continue: "N" come from? Was that from example with N=NP?
// Not really... that actually reminds me of one episode from my famous
// "JavaScript sucks" series:
// You should try this one. Just put the following into your favorite JS console:
// Or are you afraid of JavaScript? :)
> (({}-1)+"")[2]+({}+[])[1]+" "+((~-1<~[0])+"")[1/(1/0)]+((/./>/^/)+"")[4]+(""+!!(3^3))[1]+(""+!!(_="$"))[1]+"!"
// ... result stripped ... I won't make it that easy for you.

// Let's reveal one of the sneaky ones

// (that has actually nothing to do with arrays):
> a[100] = "Never gonna \
give you up,";
> a[101] = "Never gonna \
let you down";
SyntaxError: Unexpected token ILLEGAL

// Wow ... I thing I have been just Rickrolled by Chrome interpreter
// and I thought he would never gonna run around and desert me
// Do you know how this happened? BroTip: Try to copypaste it into your console.

// Talking about Syntax Errors, let's say we need a function that performs

// this importing-like functionality for us. Let's call it import.
> function import() {}
SyntaxError: Unexpected token import

// One thing I haven't tried yet is doing a bit of recursion in array
> a.me = a;
> console.log(a);
[... me: Array[3] ...] // striped other previously messed up things

> console.log(a.me.me.me)
[... me: Array[3] ...]

// If you would run the same thing in Node.JS you would see more explanatory
> console.log(a.me.me.me)
[ me: [Circular] ]

// Let's run simple one liner to try to iterate through recursive object
> for(var i=0, c=a; c=c.me; console.log(i), i++);
0
1
...
26012391
...

// Ok, Node.JS is still running, no simple way to kill it.
// What about Chrome console?
> for(var i=0, c=a; c=c.me; console.log(i), i++);
0
1
...
314
...
2679
...

// Chrome died. Goodbye a. See you in Silicon Heaven.

// That reminds me of good old times when I tried to view 5MB XML without

// line breakings in Chrome, Opera, IE, Firefox...

// Let's start chrome console again with clean array
> var a = [];
> a.me = a;
// Hmm I need to add some elem to array, so I can just copypaste that loop again
> a[1] = 2
> a
[undefined × 1, 2]

// That's interesting - array is 'filled up' with undefineds and Chrome
// prints that out neatly
// Let's test how long this loop take
> console.time('evt'); for(var i=0, c=a; c=c.me, i < 10000; console.log(i), i++); console.timeEnd('evt');
evt: 1552.587ms

// Let's try the same thing with object to see if there's any difference
> var o = {};
> o.me = o;
> console.time('evt'); for(var i=0, c=o; c=c.me, i < 10000; console.log(i), i++); console.timeEnd('evt');
evt: 1610.678ms

// Not really - so what to take from this: Arrays are Objects, essentially.

// And yes, proving that by executing console.log multiple times is just

// plain stupid.

// One last interesting thing
> i
10000

There are not many languages where you can access index from for loop after the loop ends. JavaScript is one of them, since it uses function scopes rather than block scopes and variable declarations are hoisted to the top of a function, but about that later.

Let's stop making fun of languages that suck and let's continue with that next time. We will have a look at comparing things. Also note that I really enjoy programming in JavaScript, but that doesn't mean I cannot rant about it's bad parts. And it's good parts. And my job and everything.

Do you like what you have just read? Do you hate it? Leave me a comment!

PAR - Pohádka na dobrou noc - CBT do Qn

2012-01-30T23:06:00.000+01:00

Byla jednou jedna malá hyperkrychlička se stupněm uzlu 3. Ráda si hrála se všemi ostatními malými sítěmi, společně vnořovaly, permutovaly, přepínaly červí díry a dělaly všemožné jiné vrtochy. Jednoho krásného kroku si ale malá Qn všimla, že na rohu, zcela mimo ortogonální, hyperkubické, i ty sobecké MIN, sedí malý CBT s hloubkou 2. Jelikož byla krychlička od srdce optimální, tak neváhala a nejprve po ose X, pak po ose Y a nakonec po ose Z doinvertovala k malému CBT. „Stromečku, co tu jsi tak sám? Nikdo si s tebou neprefixuje, ani neřadí?“ „Hm“, zašeptal malý CBT. Krychlička hned pokračovala: „Mohli bychom si spolu zavnořovat, co myslíš?“ Stromeček se smutně podrbal na listu: „Když já ale nevím jak. Maminka říkala, že maximálně jednu hranu můžu dilatovat na dvě.“ Krychlička se jen na chvilku zamyslela: „Myslím, že mé tři Kartézské součiny by ti mohly pomoci, jen jeden malý uzel ti přidáme,“ zajásala krychlička a pokračovala: „Vezmi si mou polovinu, tvé jedno rameno a podívej, jak krásně se celé vejde, když mu kořen zdvojíš.“ CBT ale stále nevěřil: „Ale to je jen jedno mé rameno, co kdybych se chtěl vnořit celý?“. I na to měla krychlička rychlou odpověď: „Ale stromečku, proč mi nevěříš, podívej, stoupni si před zrdcadlo isomorfismu, chyťte se společně za tři body.“ „Ale to utvoříme cykly,“ opáčil stromeček. Krychlička se ale nedala: „Kdybys mi neskákal do nejvyššího bitu, tak bych dořekla, že musíte své dvě hrany zahodit a indukčně poskočit. Tak co? Vidíš to?“ Stromeček se se svým odrazem chvilku oklepávali a překreslovali, ale pak mu to trklo: „Vždyť my jsme jeden strom vyšší dimenze! Děkuji ti krychličko, ty jsi mě zachránila. Takhle už budu vždycky vědět, že pro vnoření do o dimenzi větší krychle stačí protáhnout kořen, ukročit vpravo a vesele podgrafovat.“ A tak spolu permutovali, dokud je 12 bodů nerozdělilo.

Dobrou noc děti.

Jak jsem vařil

2011-03-28T09:32:00.003+02:00

Už jako malý jsem se motal v kuchyni a teď s tím nehodlám přestat a tak popíjím a popíjím a motám a motám. Ale k věci. Řekl jsem si, že by nebylo od věci kdybych se pokusil nějaký ten krutopřísný drsný monster massive turbo faster ultra master mega blaster gangsta nigga pyčo sáňky borový prsty v uchu kotel největší vožeh mazec mega power star-trek interceptor megamix ultrapárty... uvařit! Ženský to beztak dělaj v jednom kuse, tak na tom přeci nemuže bejt nic těžkýho. První pokus se mi bezpečně podařilo uhasit zadupáním do země. Při dalším pokusu stačilo jednoduše seškrábnout tu rozesmátou kaši ze stropu na talíř a uklidit střepy po rozbitém talíři. Toto prvotní zaváhání jsem jen přešel s povzdechem a řekl jsem si, že k problému přistoupím správně FELácky (a nově FIŤácky), leč (má krátké nohy) jsem byl nesmírně zklamán, neboť v kuchařkách na internetech nepíšou potřebné míry v cm², ale je to v nějakejch nestandardizovanejch miskách, hrníčcích a hrstích. Vytvořil jsem si proto jednoduchý vzorec pro přepočet z hrstí na sudy, ze sudů na kýble, z kýblů Kandely, z těch na Fahrady, odtud na Volty, na Jouly, na Bajty, na bity, na... sranej jsem z toho byl, ale nakonec jsem přeci jen začal vřít vodu v hrnci třeném ebonitovou tyčí.

The very first thing at my blog

2011-03-26T18:50:00.002+01:00

Look out! There's a giant anteater behind you!!

I hope this blog will be more

print("Ahoj světe")

than

public static void main(String args[]) {
 System.out.println("Hallo welt!");
}