12 nej­za­jí­ma­věj­ších fron­ten­do­vých tech­no­lo­gií roku 2018

S pomocí vás, čtenářů, jsem se pokusil vybrat technologické trendy, které stojí za naučení nebo minimálně sledování.

1) CSS Grid

Gridem nemůžu nezačít. Letos totiž díky Autoprefixeru udělal značný posun co se týká možností použití v Internet Exploreru 11. Pravděpodobnost jeho úspěšného nasazení i na běžných projektech je teď o dost vyšší. Ještě jste mu nedali šanci? Můžete to zkusit třeba na mém školení webové kodéřiny.

2) Vue.js

Podle výsledků State of JS není Vue tak rozšířené jako React, ale zájem o něj velmi roste a lidé na tomhle javascriptovém frameworku oceňují zejména příjemný tvar křivky učení a dobrou dokumentaci. Z toho odhaduji, že Vue dále poroste. Možná na rozdíl od Angularu. Tomu v anketě vyšel pozoruhodný podíl uživatelů, kteří jej už dále používat nechtějí.

3) font-display

Relativně nová CSS vlastnost, která ošetřuje způsob vykreslování stránky v prohlížečích při načítání webfontů. Díky velmi dobré podpoře v prohlížečích je už možné ji využít zcela na úkor FontFaceObserver a dalších javascriptových knihoven. Jak na WebExpo říkal Tim Kadlec: Nejsnadnější optimalizace rychlosti webu zní font-display: fallback. Více o font-display.

4) HTTP/2 kejkle

V praxi rychlostního poradce mě velmi baví legrace, které je možné dělat na webech s nasazeným HTTP/2: Hrátky s rozdělením CSS na menší kousky a nastavením extra dlouhé doby kešování (viz A List Apart) nebo nové možnosti vkládání CSS přímo ke komponentám (viz Jake Archibald).

5) Gatsby

Na zařazení Gatsbyho jsem dostal tip právě na sociálních sítích, tentokrát od Borka Bernarda. A vlastně je to dobrý nápad: Jde o zástupce nástrojů z kategorie „JAM stack“, které umožňují vytvářet weby bez potřeby vlastního backendu a jsou v poslední době velmi populární. Gatsby je generátor statických webů, který si rozumí s GraphQL a Reactem.

6) PWA

Já vím, progresivní webové aplikace nejsou nic extra nového. Ale letos jsme mohli sledovat další posilování tohodle trendu. Jak už jsem psal v textu Weby versus aplikace: PWA kombinují to nejlepší z obou světů, takže jako webaři máme o co stát. Nedávno o tématu vyšla například knížka Jasona Grigsbyho.

7) GraphQL

Tenhle přírůstek do javascriptového světa jde sice mimo mou „céeseskovou“ specializaci, ale v tomto přehledu jej opomenout ani náhodou nemůžu. Průzkum State of JS říká, že o téhle technologii slyšelo a chce se jit naučit skoro 90 % vývojářů a vývojářek. Základy můžete načerpat třeba z přednášky Romana Schejbala pro letošní WebExpo.

8) VS Code

Editor z dílny Microsoftu je od letoška světově nejpopulárnější. A já se nedivím: Oslovuje jak uživatele „velkých“ IDE jako je Visual Code, tak nás, kteří jsme přešli z lehkých nástrojů typu Sublime Text.

9) Bootstrap 4

Po třech a půl letech vývoje v lednu vyšla nová verze nejpopulárnějšího frameworku pro tvorbu uživatelských rozhraní. Můžeme k němu být kritičtí, hlavně z pohledu chybějící dokumentace pro designéry, ale pořád jde o skvělého pomocníka. Jako vývojář na něj nedám dopustit. Jednou ze staronových inovací, které se mu povedlo zpopularizovat, jsou utility třídy v CSS.

10) AMP

Další z plíživých trendů, které nelze minout. AMP sleduji opravdu bedlivě a stále víc si myslím, že jde o skvělou věc, která může změnit způsob vytváření velké části obsahových webů. Od letoška na AMP narazíte kromě Google, LinkedIn nebo Twitteru také ve vyhledavači Bing. Děláte nový obsahový web nebo e-shop? Na AMP se rozhodně podívejte, třeba skrze můj seriál na Lupě.

11) Adobe XD (ale taky Figma a Invision Studio)

Pokračuje hromadná (a oprávněná) migrace webových designérů pryč od Photoshopu. Loni hlavně ke Sketchi. Nyní také k novým hráčům: Adobe XD, Figmě nebo InVision Studiu. Zatím nemáme data, v jakém poměru si designéři tyhle nástroje rozebrali, ale trend je jasný. A letos to myslím díky příchodu nových nástrojů byla malá revoluce. Frontend kodéři ji zažili už dříve: Díky nástrojům jako je Avocode nebo Zeplin. Pokud ještě pracujete s Photoshopem, možná jsou Vánoce ten správný čas na vyzkoušení alternativ. Mrk, mrk.

12) WebP

Relativně nový formát obrázků, který vám oproti JPEG či PNG dokáže ušetřit 20 - 30 % dat. Nepodporují jej zatím všechny prohlížeče (i když to už také není daleko). Navíc – nasazení z pohledu frontendisty není nijak složité. Přečtěte si můj text na Vzhůru dolů nebo se o něm přijďte pobavit na workshop rychlosti načítání.

Související:

• Podcast: Technologie roku 2018
• Rok 2017 ve webdesignu