Bleskurychlé webové aplikace

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

1. Aplikace je bolestivě pomalá, uživatel jí opustí
2. Aplikace je snesitelná, uživatel používá
3. 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á”

Fun with JavaScript Arrays

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

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

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

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

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!");
}