Každá webstránka je súborom vrstiev - má štruktúru, obsahuje dáta a množstvo funkcií. Front-end je ako pavučina - všetko so všetkým súvisí. Nie je to len prevod dizajnu na html kód. Ako na to? Za všetkým je premyslená front-end stratégia.

Front-end z pohľadu developera

Pri vývoji front-endu webovej stránky je dôležité zvoliť si stratégiu. Front-end je súčasťou webu, s ktorou je používateľ v priamej interakcii, preto je potrebné aby z funkčného hľadiska spĺňal jeho potreby. Ak sa naň pozeráme ako na html a css, hovoríme o štruktúre komponentov, blokov sekcií, o typografii a využívaní technológie less/sass.

komponenty front-end

Každý web je špecifický v závislosti od dizajnu a funkčnosti. Vlastný framework, ktorý v agentúre využívame nám dovoľuje robiť kvalitnejšie webstránky so štruktúrou prakticky bez limitov.

Analýza

Každému riešeniu predcháza dôkladná príprava. V prípade front-end stratégie je to jasné – čím zložitejší je web, tým hĺbkovejšiu analýzu budeme potrebovať. Prvým krokom je pre developera zoznámenie sa s dizajnom. Prečo? Komplexné riešenie webov pozostáva zo sekcií, ktoré môžu obsahovať rovnaké prvky – komponenty, ale aj typografiu a farby. Na základe identifikovania spoločných prvkov sme schopní pripraviť šablóny stránok

ako vyzera priprava front-end strategia developera

Front-end je ako pavučina – všetko so všetkým súvisí. Nejde len o prepis dizajnu na html kód. Cieľom je funkčne zabezpečiť napájanie na back-end a umožniť pohodlnú implementáciu zmien dizajnu. To je dôležité najmä pre budúce riešenia, ako napríklad doplnenie nových komponentov na stránku.

Nastavenie

Druhým krokom je nastavenie front-endu – aplikovanie analýzy do samotného frameworku. V tejto fáze nastavujeme veľkosť a vzhľad fontov, vytvárame mixiny, definujeme farebné odtiene a základné typografické prvky. Až potom je na rade vytvorenie samotných extendov – malých častí kódu, ktoré nám pomáhajú programovať jednotlivé kompomenty, časti stránok.

co vsetko tvori front-end webu?

Development

Keď máme hotovú analýzu a logicky vystavanú štruktúru, na rade je tá zábavná časť. Kódovanie jednotlivých komonentov a ich vkladanie do webstránok má vždy iný postup v závislosti od toho, aký je účel webu. Vo všeobecnosti však odporúčame nakódovať najprv wrappery stránok, potom sekcie a nakoniec samotné komponenty.

Vo fáze developmentu vkladáme predpripravené extendy a mixiny do jednotlivých stránok webu. Ak je nutné vykonať na webe určitú zmenu, vďaka extendom nemusíme zmeny implementovať po jednom. Stačí upraviť pôvodný extend, čím sa zmena zobrazí vo všetkých napojených komponentoch. Táto stratégia umožňuje developerovi udržať si prehľad o logickej štruktúre a nadväznosti jednotlivých komponentov.

faza developmentu front-endu

Pri front-endovej časť webu, je dôležité byť mysľou vždy o dva kroky vpred. Keďže v dnešnej dobe je potrebné, aby boli weby responzívne pre množstvo zariadení, nenechávajte si tento krok nakoniec. Hoci vždy vyvíjame mobilnú verziu ako prvú, zvykli sme si kódovať responzívnosť pre mobil i desktop súčasne s jednotlivými komponentmi.

Po návrhu logiky a štruktúry webstránky sme takmer hotoví. Teraz sú na rade už len detaily a estetické doladenia.

Rady na záver

  • Príprava hrá vo váš prospech – v prvej fáze analýzy sme spomínali dôkladné oboznámenie sa s časťami dizajnu. Dajte si záležať, aby ste si dopredu pripravili všetko, čo sa dá. Ak máte na timeri čas 00:00, je to posledný krát, čo ste mali dosť času.
  • Na dynamike webu záleží –  predpripravenými extendami dokážeme globálne meniť prvky webu bez toho, aby sme pracne aplikovali zmeny do každej sekcie individuálne
  • Premyslená štruktúra webu – čím dôkladnejšie pripravíte štruktúru stránky, tým je v budúcnosti jednoduchšie implementovať mnohé dizajnové zmeny len úpravou css. Vôbec nemusíte zasahovať do html kódu napojenom na front-end.
  • Využite silu technológií na maximum – naučili sme sa uľahčovať si život. Pre html jazyk používame jade a CSS zas zvládame cez less, ktorý oproti sass dokáže oveľa lepšie pracovať s extendami. Samotná štruktúra štýlov, ktoré less ponúka, umožňuje omnoho jednoduchšiu orientáciu v kóde. – rýchlejšie a dynamické upravovanie bez zásahu do html.
  • Nezabúdajte na súvislosti – pri skladaní štruktúry front-endu nezabudnite, že je potrebné napojiť ho na back-end. Snažte sa ho nakódovať tak, aby sa čo najpohodlnejšie napájal na CMS back-endu.
  • Prehľadnosť  – komponenty, sekcie, wrappery a layouty nechajte od komponentu s grid layoutom oddelené. Vyhnete sa tak množstvu komplikácií.
  • Živá front-end verzia aj po spustení webu – na statickej verzii dokážeme ľahko a rýchlo implementovať potrebné zmeny, prípadne vytvoriť novú šablónu. Pri otvorenom front-ende máte totiž lepší prehľad aj o súčastiach webu, ktoré sa už možno v živej verzii nenachádzajú. V tomto prípade vieme dizajnové úpravy aplikovať len tým, že prepíšeme css/js na live verzii stránky. A to je oveľa komplikovanejšie.

Každý front-end developer vie, že pri programovaní nového webu je dôležitá orientácia v kóde. Vďaka našim trom krokom front end stratégie získate nielen kontrolu nad webom, ale aj možnosť pohodlne implementovať prípadné dizajnové zmeny, či zabrániť a odstrániť bugy. Máte otázky k niektorému kroku? Pozrite si výsledky našej práce, alebo skúste bezplatnú konzultáciu. Naši developeri vám s radosťou pomôžu.