O víkendu proběhlo WebExpo 2015

O víkendu proběhl již 8. ročník webové konference WebExpo. Letošní WebExpo se konalo opět v centru Prahy – jednotlivé přednáškové místnosti byly rozprostřeny v Lucerně a poblíž paláce Lucerna, kousek od Václavského náměstí.
Nálepky:
Přednášky se odehrávaly souběžně na čtyřech místech:
- Kino Lucerna
- Lucerna Music bar
- Divadlo ABC
- Kino Světozor
Jednotlivá vystoupení potom byla rozdělena do kategorií: Development, Business, Design a ostatní. Tématické rozdělení nesouviselo s umístěním přednášky, takže pokud člověk preferoval jeden z typů přednášek, musel se přesouvat.
Na přesun bylo většinou dost času a vzdálenost minimální, takže s tím nebyl problém.
Délka přednášek 20, 40 a výjimečně 60 minut umožňovala u většiny přednášejících udržet pozornost. Po skončení vystoupení nenásledoval klasický prostor pro dotazy, ale bylo možné se přednášejícího zajít na cokoliv zeptat do vyhrazeného prostoru mimo hlavní sál.
Vzhledem k tomu, že se za sobotu a neděli konalo 80 přednášek na čtyřech místech zároveň, výsledný dojem se může snadno lišit v závislosti na zvoleném programu.
Nyní k samotným přednáškám, které mě zaujaly:
Flexibility and rigidity in frontend architecture
Johnny Rodgers (@johnnyrodgersis) je spoluzakladatel služby Slack, která slouží pro týmovou komunikaci.
Přednáška popisovala rozdíly v pracovním procesu při několikačlenném týmu, kdy každý člen věděl o aplikaci všechno, až po současný stav, kdy na projektu pracuje kolem 20 lidí, a nikdo už všechno znát nemůže.
Slack používá celkem standardní věci jako PHP, jQuery a Smarty/Handlebars šablony.
Trochu netradiční byl Johnnyho názor na používání frameworků a cizích knihoven, které ve Slacku postupně nahrazují vlastním řešením.
Frameworky se podle jeho názoru hodí hlavně v začátcích pro vytváření proof of concept, ale později je složité frameworky ohýbat pro aktuální potřeby.
Enhance!
Závěrečnou přednášku WebExpa měl na svědomí Jeremy Keith (@adactio) a velmi poutavě zmiňoval specifika HTML a CSS ve své toleranci k chybám. Kdy si s neznámou značkou, CSS selektorem nebo vlastností prohlížeč poradí.
Tolerance k chybám naopak neplatí u JavaScriptu, kdy selhání může znefunkčnit celý web. Z tohoto důvodu je rozumné dělat weby funkční bez JS. Ne primárně pro lidi, kteří ho mají vypnutý, ale pro případ, že náhodou selže.
Jako analogii k tomu uvedl výtah a jezdící schody při výpadku elektřiny. Zatímco výtah je při výpadku nepoužitelný, jezdící schody jsou alespoň schody.
Jeremy dále zmínil výhodu mobilních webových aplikací oproti nativním aplikacím – nativní aplikace sice může být na daném zařízení lepší, mobilní web je univerzální a (nějak) funkční na širokém spektru zařízení.
HTML má tak stabilní základy, že i 20 let stará stránka dnes normálně funguje. Stejně tak rozumně navržená stránka funguje i ve 20 let starém prohlížeči.
Taktéž je HTML samo o sobě responsivní, takže jde o to výsledek webu při rozšiřování funkčnosti nepokazit.
Závěrečná myšlenka byla, že web nemusí vypadat stejně ve všech prohlížečích, ale měl by být nějak dostupný.
Service Worker: nejdůležitější webová inovace od dob hyperlinku
Filip Hráček (@filiphracek) živě demonstroval zaslání a zobrazení notifikace z mobilní webové aplikace na telefonu s vypnutým prohlížečem.
Service Worker je technologie umožňující vytvořit mobilní webovou aplikaci, která se chová mnohem více jako nativní. Service Worker je prostředník mezi prohlížečem a operačním systémem, který může zajistit notifikace, offline fungování webové aplikace a podobně.
Podpora je přibližně 50 % (prakticky všechna zařízení s Androidem a aktuálním prohlížečem).
Filip na úvod zmínil, že ačkoliv studie ukazují, že kolem 80 % času tráví uživatelé v aplikacích oproti prohlížeči, neznamená to, že webová aplikace nemá smysl.
Značná část z aplikací je hraní her. Dále potom cca 80 % času strávených v aplikacích patří 5 nejrozšířenějším, jako je Facebook, Twitter, Mapy a podobně.
Uživatelé tak nemusí být ochotni méně významnou nativní aplikaci stahovat nebo ji potom používat.
Základy webové bezpečnosti pro PR a markeťáky
Michal Špaček (@spazef0rze) připravil návod, jak (ne)odpovídat na dotazy ohledně zabezpečení, ilustrovaný řadou konkrétních příkladů z Twitteru.
Stručně:
- Heslo je soukromý údaj, takže by mělo putovat pouze po HTTPS.
- Pravidelné nucení ke změně hesla snižuje bezpečnost. Uživatel si zvolí slabší heslo, protože ví, že si co nevidět bude muset zapamatovat něco jiného. Dále to vede k heslům typu:
Heslo2014
,Heslo2015
a podobně. - Blokování správce hesel nezvyšuje bezpečnost. Uživatel si kvůli tomu zvolí jednoduší a předvídatelné heslo, aby si ho zapamatoval, místo náhodně vygenerovaného, které by uložil do password manageru.
- Není důvod omezovat maximální délku hesla nebo zakázat znaky s diakritikou. Zbytečně to snižuje sílu hesla.
- Bezpečnostní otázky typu „Jméno matky za svobodna“ snižují bezpečnost, protože jsou často snadno dohledatelné/zjistitelné. Pokud je stránka vyžaduje, doporučuje v nich Michal lhát.
Designování webů v prohlížeči
Martin Michálek (@machal) popsal postup, kterým navrhuje a vytváří uživatelské rozhraní webů – nejprve tužkou na papír a potom přímo v prohlížeči bez používání Photoshopu nebo jiného grafického programu.
Tento postup vyžaduje zkušené/rychlé kodéry, pro které není problém prvky rozhraní rychle prototypovat a zkoušet.
Díky tvorbě HTML/CSS prototypů si jde stránku rychle osahat na různých zařízení a přijít na záludnosti už v počátcích výrobního procesu.
Tento postup ilustroval na redesignu webu VašeČočky.cz.
Martin používá přístup mobile-first, o kterém jsme před časem spolu trochu polemizovali:
Automatické nástroje pro kvalitní CSS
Robin Pokorný (@robinpokorny) zmínil techniky, jaké nástroje pro psaní CSS používat, pro snížení šance vytvořit chyby.
Od prostého zvýrazňování syntaxe, které snadno odhalí překlep v názvu vlastnosti, po nástroje znázorňující změny na screenshotech před a po změně. Tento postup je problematický, protože vždy musí někdo určit, že teď je to správně. Navíc se výsledek mění při změně HTML.
Dále zmíněný postup používající porovnání na základě výsledné hodnoty stylu pomocí JS metody getComputedStyle
zase naráží na to, že značně duplikuje původní CSS.
Na závěr byl představen návrh CSS pravidla @should
, které by mohlo sloužit pro automatické testování, zda struktura HTML odpovídá CSS:
.foo {
@should match ".boo";
color: green;
}
Architecting resilient front-ends
Návrh odolného frontendu od Andyho Huma (@andyhume) se zabýval tím, jak zajistit zobrazení webu na mobilu do 1 vteřiny.
Andy dělí stahovaný obsah na 3 části:
- Základní obsah, po jehož načtení už může návštěvník alespoň něco číst – tedy HTML kód a kritické CSS.
- Vylepšení – typicky různé JavaScripty, obrázky a další prvky zpříjemňující uživatelský dojem.
- Zbytky (leftovers) – reklamní a měřicí skripty, o které návštěvník nestojí.
Jako hlavní překážky zdržující načítání byly zmíněny přesměrovávání, blokující CSS a JavaScripty a nakonec blokující webová písma.
Universal web apps for the best developer experience
Daniel Steigerwald (@steida) přejmenoval isomorfní aplikace na universální. Spolu s ním vystoupil Mike Grabowski (@grabbou), který se s Danielem významně podílí na tvorbě vývojářského balíku Este.js.
V přednášce byly zmíněny hlavní výhody, jako:
- Projevení změn v aplikaci po uložení souboru bez nutností obnovit stránku včetně zachování původního stavu.
- Možnost ukládání stavu pro následné jeho načtení a debugování.
- Možnost tvorby nativních mobilních aplikací pro iOS a Android v JavaScriptu.
- Upgrade JS kódu programu bez nutnosti schválení AppStore.
From callbacks to promises
Italský řečník Vincenzo Chianese (@D3DVincent) představil programování v JavaScriptu pomocí tzv. promises. Což je způsob, jak tvořit elegantnější kód bez callbacků.
O příslibech napsal před rokem výborný článek v češtině Lukáš Havrlant: Přísliby v JavaScriptu
Nová syntaxe v JavaScriptu ES6 a ES7
Tomáš Holas (@tomaash) popsal novinky v JavaScriptu – třeba používání tříd, dekorátorů.
Ačkoliv doba, kdy novinky z ES6/7 budou prohlížeče dobře podporovat, nastane za mnoho a mnoho let, díky nástrojům pro převod do kompatibilního JavaScriptu lze hezčí zápisy používat už dnes.
Continuous Integration & Delivery v Avastu
Michal Augustýn (@AugiCZ) popisoval způsob nasazování kódu s novými funkcemi v Avastu.
Průběžná integrace spočívá ve velmi rychlém nasazování nových funkcí na testovací a později produkční servery.
Podmínkou je rozdělení práce na jednotlivých úkolech na krátké úseky, kdy se v ideálním případě mohou nové vlastnosti aplikovat několikrát denně.
Dále je nutné mít automatizované testy a dokázat nasadit novou verzi stisknutím jednoho tlačítka.
Nová aplikace se v ideálním případě může nejprve spustit pro omezenou skupinu lidí pro otestování náročnosti na hardware.
Design for change
Vojta Roček (@VojtaRocek) popisoval svou činnost business intelligence directora jako člověka, který lidem vytahuje hlavy z prdelí a snaží se nastartovat změny v jejich chování.
- Řada zaběhlých firem neví, proč jsou dobří a bojí se změn.
- Správný datový analytik vždy dokáže najít nějaký rostoucí graf.
- Řada firem má spousty dat, ale nedokáže z nich dostat nic zajímavého.
Banka v cloudu
Ondrej Gálik (@ondrejgalik) popsal, jak Česká spořitelna začíná používat cloud a novější webové technologie.
Pro komunikaci v České spořitelně se tak začaly používat cloudové služby Googlu jako Google Docs, Google Plus a podobně.
- S využitím API si jde napsat vlastní internetové bankovnictví.
- S použitím cloudu má banka jisté legislativní problémy, protože na to zákony nejsou stavěny.