17. 04. 2018
Mezi zásadní a už několik let hodně skloňované trendy při vývoji webových aplikací patří CSS preprocesory a postprocesory. Víte, jak urychlují tvorbu webů?
Vývojáři webových aplikací nesmí nikdy usnout na vavřínech. Neustále se vyvíjejí, objevují a zase zanikají trendy, které musí ke své práci znát, orientovat se v nich a hlavně je umět využívat. Díky tomu odhalují nové možnosti, jak zjednodušit a zefektivnit svou práci.
Hlavním prostředkem, pomyslnou alfou, je z pohledu vývojáře webových aplikací jazyk HTML. Pomocí něj tvoří základ – kostru každých stránek. Pokud bychom si stavbu webu představili jako opravdové stavební práce, HTML by byl nosným skeletem. Druhým důležitým jazykem, který se při vývoji webů používá, pomyslnou omegou, je jazyk CSS. Ten se stará o to, jak přesně bude web vypadat. Denní práce webového vývojáře často obnáší stovky a stovky řádků kódu napsaných v těchto dvou jazycích. Nás nyní budou zajímat specifické nástroje pro druhý z jmenovaných.
Vývojářskými jazyky mluví Modrý duch plynně. Chcete pomoct se stavbou webu nebo aplikace?
V souvislosti s jazykem CSS bylo dlouhou dobu hodně slyšet o tzv. preprocesorech. Ty umožňovaly vývojářům použít věci, které sám jazyk CSS přirozeně neumí. Pomocí nových funkcí se najednou webové stránky daly vyvíjet efektivněji, rychleji a jejich tvůrcům se výrazně zjednodušil život. Co však preprocesor je a jak funguje?
Preprocesor umožňuje zapsat CSS kód novým způsobem, čímž mu nabízí větší možnosti jako využívání proměnných, funkcí atd. Hotový kód pak preprocesor zpracuje, tj. udělá z něj standardní kód jazyka CSS, se kterým umí pracovat váš webový prohlížeč (Internet Explorer, Chrome, Firefox). Samotnému preprocesorovému zápisu by totiž prohlížeč jinak nerozuměl.
Preprocesory mají však i svou odvrácenou stranu. Jejich nevýhodou je, že každý má svůj vlastní zápis kódu, tedy ne dle univerzálních standardů. Další slabou stránkou, která se v praxi nezřídka projevuje, je paradoxně jejich síla. Umožnují psát silný, abstraktní kód, takže lze s jejich pomocí vytvořit i hůře čitelné a spravovatelné zdrojové kódy webových stránek.
Doba však pokročila a mnoho věcí, na které se používaly preprocesory, bylo nahrazeno novějšími technologiemi. V poslední době začaly hrát čím dál větší roli postprocesory, jejichž výrazným přínosem je zachování pozitiv svých předchůdců a zároveň odstranění jejich záporných či nadbytečných vlastností.
Obdobně jako preprocesory umožňují při kódování využívat postupy, které jazyk CSS běžně neumí. Nicméně využívají k tomu standardizovaného či pravděpodobného budoucího standardizovaného zápisu. Jednodušeji řečeno, vývojáři odpadá nutnost učit se nestandardní způsob zápisu kódu. Další výhodou je větší rychlost, než tomu bylo u jejich předchůdců. Samotné nasazení nějakého z postprocesorů do pracovního procesu je pro vývojáře velmi snadné.
V souvislosti s nástupem postprocesorů získal na oblibě nástroj PostCSS. Jedná se o komplexního pomocníka pro práci s jazykem CSS, který se skládá ze samostatných částí (modulů). Sám vývojář si zvolí, jaké moduly chce používat a jak je chce mít nastavené. Není tedy nucen využívat nástroj v celé šíři, ale jen ty moduly, které opravdu potřebuje. Dokonce si může napsat své vlastní. Za jeden z nejzajímavějších modulů lze ale oprávněné považovat next-css, který umožňuje použití budoucích vlastností jazyka css.
Preprocesory byly svého času vývojářům webových aplikací skvělým pomocníkem, který posunul možnosti jazyka CSS o značný kus dále. Zjednodušily práci, umožnily s tímto jazykem pracovat způsobem, který dříve nebyl možný, a vyplnily tak hned několik mezer. Jejich význam však nyní tváří tvář postprocesorům klesá. Vývoj je zase o kus dále a při vývoji každého on-line projektu stojí za zvážení uplatnění třeba právě nástroje PostCSS.
Praktický
Inspirující
Zábavný
Nic moc
