Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v šablonách

Vývoj frontendu na redakčním systému?

aneb jak udržet pořádek v šablonách

Martin Pešout / @martinpesout / martinpesout.cz

Dosavadní zkušenosti

Redakční systémy

Tvorba šablon od základu

Dosavadní zkušenosti

Šablony

Dosavadní zkušenosti

Šablony

• Kvalita šablon není vždy 100%

• Klient chce většinou víc než daná šablona nabízí

• Nemáte pod kontrolou základní rozvržení

Začátky bývají o hledání vlastní cesty

• Chybama se člověk učí

• Každý dobrý frontend vývojář se musel nejprve spálit a potom se na dalším projektu poučit z vlastních chyb

Proč vzniká tolik problémů?

• Nezvládnutí složitých požadavků

• S přibývajícíma definicema, se zhoršuje i orientace v kaskádových stylech

• Špatné strukturování dat

• Zmatky při práci v týmu

Jak předcházet problémům?

• Velké problémy rozložit na menší úkoly

• Ze složitých elementů na webu si vybereme drobnější nezávislé komponenty - znovupoužitelnost

• Pomůže nám to zvládnout složité úkoly

Ukládejte data do samostatných souborů

• Lépe tak tvoříme nezávislé komponenty

• Kvůli rychlosti načítání stránky je potřeba načítat co nejméně zdrojů

• Soubory sloužící pro vývoj ve finále spojíme do společných souborů

Dostaneme veliké množství souborů

Ale co dále?

Správná struktura adresářů

• Co můžu rozdělit na menší části?

• Kaskádové styly

• Soubory šablony

• Javascript

Kaskádové styly• Kaskádové styly rozmístíme do jednotlivých

souborů

• Využijeme preprocesorů

http://cssguidelin.es/

Co mně pomohlo?

• Metodika BEM pro rozdělení kaskádových stylů a přehledné psaní tříd

• Nešetřit komentáři

• Bohaté oddělování pomocí mezer

Správná struktura adresářů

• Co můžu rozdělit na menší části?

• Kaskádové styly

• Soubory šablony

• Javascript

Automatizace

• Oddělené soubory ve finále zkompilujeme do jednoho finálního souboru

• Tento proces probíhá na pozadí

• Nástroje pro automatizaci:

Grunt vs. Gulp

Co za mě Grunt udělá?• Zkompiluje SCSS do výsledného finálního CSS

• Nemusím se starat o prefixy při zápisu SCSS

• Minifikace obrázků

• Validace Javascriptu a spojení do finálních souborů

• Obnovení všech otevřených oken

• Mnohem víc…

• http://demo.martinpesout.cz/gruntfiles.zip

Redakční systémy

Každý redakční systém je specifický

Wordpress Drupal

Redakční systémy

Oddělená struktura pro samotnou šablonu

Wordpress Drupal

Situace, které mohou nastat a nastávají

• Práce v týmu

• Potřeba verzování kódu a sdílení změn mezi týmem

• Udržitelnost kódu a s tím související dostatečné oddělení souborů frontendu od backendu

Verzovací systém

• V dnešní době převládá Git

• Otázkou je, co přesně zahrnout do repozitáře a které soubory ignorovat?

• Pokud nevíte, použijte dostupné generátory https://www.gitignore.io/

Co do společného repozitáře nepatří

• Konfigurační soubory

• Soubory nahrané uživatelem - můžou obsahovat veliké množství dat

• Dočasné cache soubory redakčního systému

.gitignore pro Wordpress### WordPress ###

*.log

.htaccess

sitemap.xml

sitemap.xml.gz

wp-config.php

wp-content/advanced-cache.php

wp-content/backup-db/

wp-content/backups/

wp-content/blogs.dir/

wp-content/cache/

wp-content/upgrade/

wp-content/uploads/

Má být samotná šablona také součástí repozitáře?

• Setkal jsem se s těmito možnými přístupy:

• Do repozitáře zahrneme pouze šablonu

• Oddělené repozitáře - jeden pro samotný Wordpress a druhý, který je vnořený, je pro šablonu

• Celý projekt je jeden repozitář

Tipy

• Pokud se chcete posouvat dál, tak volte raději práci na více menších projektech

• Snažte se na každém novém projektu vyzkoušet něco nového

Děkuji za pozornost

Martin Pešout / @martinpesout / martinpesout.cz