Měníme svůj web a musíme se vypořádat se stávajícím kódem. Jaké technologie budeme nově používat a jak zabráníme tomu, abychom se v novém kódu neztratili? Doporučujeme nejen všem webovým vývojářům!
Aktuální web
Začněme back-end částí, ta je postavená na Padrinu. Front-end část je značně složitější. Celý web nyní běží na frameworku Foundation, pro stylování se využívá framework Compass a pro JavaScript se používá částečně Grunt. Pracuje se také hodně s jQuery, které využívá i Foundation, a jQuery UI.
Web budeme upravovat postupně, a proto si současného kódu (CSS, JS) nebudeme všímat. Každou upravenou část obalíme do třídy, kterou budeme využívat v nových stylech a JavaScriptu. To vše si můžeme dovolit, protože měníme celé workflow pro CSS i JavaScript.
Které technologie využijeme
Doba jQuery již končí, proto jej a jiné JavaScriptové frameworky úspěšně opouštíme. Nově budeme psát v čistém JavaScriptu a zpětnou kompatibilitu nám zajistí Babel, který pouštíme pomocí Gulpu.
CSS frameworky jsou také stále mohutnější a vzhledem k preciznosti a citu pro detail nebudeme využívat ani grid, který by nám mohl práci částečně ulehčit. Místo Compassu a psaní CSS v Sassu se posouváme do doby post-processingu, a proto volíme PostCSS, které nám zajistí zpětnou kompatibilitu. I zde využíváme Gulp skript.
Jak se v tom všem vyznat
Abychom se v našem novém kódu neztratili, volíme dvě jednoduché věci, které nám kód zpřehlední. Veškeré HTML třídy budeme zapisovat pomocí BEMu, díky kterému víme, co upravujeme, i když koukáme jen do CSS. Komponenty navíc můžeme používat kdekoliv jinde.
Abychom měli přehled i o jednotlivých vlastnostech v CSS, budeme využívat PostCSS Sorting plugin do SublimeText. To nám zajistí, že se po každé úpravě všechny vlastnosti seřadí do stejné posloupnosti.
Málem bychom zapomněli zmínit SVG (Scalable Vector Graphics). Rastrová grafika v době velmi jemných displejů logicky ztrácí význam, navíc její velikost je nezanedbatelná. Proto všechny nové grafické prvky budou v SVG.
