Mobile friendly web

Transcript

1. mobile friendly web
   @alesroubicek
   

   View Slide

2. Když píšeme weby, které mají běžet v mobilních zařízeních,
   většinou to je tak, že uděláme úpravy stránky, aby se
   nerozpadala na nižších rozlišeních a když už máme dost malý
   prostor nahodíme hambáče. A máme hotovo!
   

   View Slide

3. Jenže to není mobile friendly.
   To je maximálně tak mobile aware.
   Mobile friendly web není jen o rozlišení displeje a patřičnému
   rozložení stránky. I když je to také často zanedbávaný aspekt.
   

   View Slide

4. ?
   Co myslíte, jaký mobilní počítač používám nejčastěji?
   

   View Slide

5. Ano právě se na něj díváte.
   

   View Slide

6. Pod kapotou má 16GB paměti, čtyřjádrové i7 a baterii,
   která má vydržet 9 hodin provozu na Wifi.
   

   View Slide

7. Ale nevydrží!
   

   View Slide

8. Proč? Protože autoři webů většinou nepočítají s tím, že…
   

   View Slide

9. … sedíte v lese, připojený přes 3G/LTE
   a nejbližší zásuvka je od vás kilometr daleko.
   

   View Slide

10. I tento talk jsem připravoval na lavičce
    v jednom Barcelonském parku.
    

    View Slide

11. Když se koukám pod kapotu běžných stránek, vidím megabajty
    JavaScriptů a podobně nabobtnalé stylopisy.
    A to je běžný jev i na obyčejných obsahovkách a microsajtách.
    

    View Slide

12. • Přenášíme spoustu dat, kterou nepotřebujeme
    • Používáme neefektivní techniky, které zvyšují požadavky
    na spotřebu energie
    • Testujeme v neadekvátním prostředí
    • Myslíme si, že obecné pravdy, které fungují na
    desktopu fungují i na mobilních zařízeních
    Pojďme si projít pár nejčastějších chyb a třeba i pár řešení.
    

    View Slide

13. Plýtvání přenosovým pásmem je nejčastějším problémem.
    9 z 10 webdesignerů vám poví, že ho trápí jeho FUP, ale jen
    1 ze 100 optimalizuje své výtvory,
    aby byly skutečně efektivní v množství přenášených dat.
    

    View Slide

14. Minifikace JS může být celkem účinná,
    u CSS a HTML už zas tak moc ne.
    gzip pomáhá hodně.
    

    View Slide

15. View Slide

16. Browser musí všechny skripty a styly naparsovat a vyhodnotit.
    Když máte ve stránce stylopis, kde se 87 % pravidel nepoužije,
    je to velice neefektivní.
    

    View Slide

17. Obzvláště vypečené jsou selektory, které vypadnou z
    šestiúrovňového zanoření v Lesse/Sassu. Browser
    vyhodnocuje každý selektor a to od konce a i když má
    spolehlivý match už v půlce selektoru, stejně musí
    dojet až do konce.
    

    View Slide

18. *  {  
       margin:0;  
       padding:0;  
    }
    Pak tu máme resety a úpa nejvíc je ten hvězdičkový.
    Nedělejte to!
    

    View Slide

19. Místo preprocessorů, které generují spoustu neefektivního
    bordelu, používejte postprocessory, které vám dokáží CSS
    zoptimalizovat a dovolí vám používat syntaxi, která ještě
    není v browserech implementovaná (mj. proměnné).
    

    View Slide

20. Neefektivní techniky ovšem nepotkáte jen v CSS,
    ale také v JavaScriptu.
    Je běžné, že všechny jQuery funkce máte v jednom souboru,
    kde se skripty aplikují pomocí selektorů, podobně jako v CSS.
    Stejný problém.
    

    View Slide

21. Případně máte obsahovou stránku napsanou v Angularu, kde
    se nejprve čeká na natažení a inicializaci zbytečného scriptu a
    pak se čeká na asynchronní natažení obsahu a pak se čeká na
    brutální mutaci DOMu.
    Nedělejte to.
    

    View Slide

22. Co můžete udělat na serveru, tak udělejte.
    Má mnohem větší výkon
    a mobilnímu uživateli ušetří spoustu potřebné energie.
    

    View Slide

23. var  els  =  document.getElementsByTagName('*');  
    for  (var  i  =  0;  i  <  els.length;  i++)  {  
       els[i].addEventListener('click',  e  =>  {  
       /*  do  something  */  
    },  false);  
    }
    Další věc je paměť. Obrovským jedlíkem paměti, jsou
    všudypřítomné ovladače událostí
    s uzávěry přes globální sdílený stav.
    

    View Slide

24. Obzvláště, když je zapomínáte odhlašovat.
    

    View Slide

25. View Slide

26. Když testujeme jak stránky vypadají na mobilních zařízeních,
    použijeme emulaci v browseru, případně emulátor mobilního
    OS. To nám ušetří spoustu nákladů na testovací zařízení.
    

    View Slide

27. Ale nezapomínejte na šířku pásma! Mobilní připojení se chová
    úplně jinak než váš broadband v kanclu nebo UPC doma.
    

    View Slide

28. A stejně testujte i na fyzických mobilních zařízeních,
    emulace nefunguje přesně
    a spousta důležitých detailů vám uteče.
    

    View Slide

29. $  npm  install  -­‐-­‐global  psi
    Důležitým pomocníkem je taky Page Speed Insight od Googlu.
    Dokonce existuje jako npm balíček,
    který byste si měli přidat do buildu.
    

    View Slide

30. JavaScriptové VM jsou velice rychlé a díky JITu mají výkon
    srovnatelný s Javou/CLR.
    Jenže to platí pro superoptimalizovanou platformu x86.
    

    View Slide

31. V mobilních zařízeních máme procesory ARM, které mají
    redukovanou instrukční sadu a JIT nemůže využít chytrých
    optimalizací, musí fungovat jinak. Procesory jsou navíc
    mnohem pomalejší, aby ušetřily energii.
    

    View Slide

32. Paměť nám pro změnu v JS řeší Garbage Collector. Mobilní
    zařízení mají většinou velmi málo dostupné paměti. GC funguje
    dobře jen, když máte paměti nadbytek. Když máte paměti jen
    4x víc než ji potřebujete, začínáte mít problém…
    

    View Slide

33. Problém, který roste exponenciálně s poklesem dostupné
    paměti. Tím problémem jsou GC pauzy.
    Ve výsledku se pak browser začne sekat a přestane odpovídat
    na vaše požadavky.
    

    View Slide

34. View Slide