Přejít k navigační liště

Zdroják » JavaScript » O víkendu proběhlo WebExpo 2015

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í.

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.

Flexibility

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.

Detail přednášky

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ý.

Detail přednášky

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.

Detail přednášky

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.

Detail přednášky

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:

Detail přednášky

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;
}

Detail přednášky

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:

  1. 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.
  2. Vylepšení – typicky různé JavaScripty, obrázky a další prvky zpříjemňující uživatelský dojem.
  3. 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.

Detail přednášky

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.

Detail přednášky

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

Detail přednášky

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.

Detail přednášky

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.

Detail přednášky

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.

Detail přednášky

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ě.

Detail přednášky

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.