Frontend development nie je len o vytváraní šablón, konverzií z PSD do HTML, paddingoch a marginoch, farbách a veľkostiach elementov. Frontend developer, samozrejme, chápe, že všetok development nekončí u jQuery. Tam to len začína. Život bez pravidiel vo svete frontendu má zmysel pri jednoduchých webových prezentáciách, ale kedže naše riešenia majú desiatky podstránok a komponentov a stovky riadkov kódu, museli byť zavedené pravidlá. U nás v RIESENIA.com sa neustále snažíme posúvať vpred, a preto by sme sa radi podelili s malou zbierkou pravidiel, ktoré naším frontenďákom vštepujeme do hláv.

1. Ja som tvoj framework. Nepoužiješ iný framework v jednom projekte, okrem mňa.

V začiatkoch vývoja našej e-commerce platformy RSHOP sme v podstate zvažovali 3 možnosti – Bootstrap, Foundation alebo žiaden framework. Naše podmienky boli: jednoduché použitie, veľká UI knižnica, grid pre responzivitu, čo najlepšia browser podpora a pokiaľ možno čo najväčšia možnosť customizovania. Voľba nakoniec padla na Bootstrap (vo verzii 3), ktorý máme pre naše potreby mierne upravený, a pre jednoduchšiu inštaláciu do projektov sme si vytvorili jednoduchý setup celého frameworku.

2. Nenapíšeš žiaden kód nadarmo, len ak to je nutné.

Nepracuj ťažko, nevymýšľaj koleso, ale premýšľaj. Nikto nemá rád zbytočný debugging, optimalizovanie pre browsery, riešenie problémov, ktorým sa dá ľahko predísť vyhľadaním potrebných komponentov na Githube, NPM, Bower, Yarn, Google…

3. Spomni, aby si svoj kód riadne otestoval.

Však na mojom počítači to fungovalo! Testovanie frontendu nie je jednoduché a často vyžaduje oveľa viac času, než samotné programovanie. Kedže mať fulltime testerov vo firme je luxus a nechceme tráviť celý deň klikaním stránok, zmenšovaním okna a toto isté znova v inom browseri, pomáhame si automatizáciou. Napríklad testovanie zmien na stránke porovnávaním screenshotu stránok s referenčným obrázkom (PhantomCSS, BackstopJS…). Cross browser testovanie riešime cez browserstack. Problémom stále ostáva testovanie funkčnej stránky frontendu, napríklad či sa dokážem cez prihlasovacie okno naozaj prihlásiť. Selenium, PhantomJS, CasperJS sú nástroje, ktoré nám ukázali cestu, ale správa týchto testov je náročná. Vie to byť veľký šetrič času v testovaní komplikovanejších častí webu, ako napríklad nákupný proces, kedy môže zákazník prejsť nákupným procesom desiatkami rôznych spôsobov a manuálny testing by zabral pokojne aj pol dňa.

4. Cti prácu toho, čo s tebou zdieľa prácu na rovnakom projekte.

Medzery alebo tabulátor, naming konvencia premenných, zoradenie CSS vlastností… “100 ľudí, 100 chutí” pri práci na jednom projekte medzi developermi fungovať nebude a štandardy spísané vo frontend manuáli na tieto otázky jasne odpovedá. Kontrola kódu sa dá, samozrejme, automatizovať – napríklad CSScomb, stylelint pre CSS a ESLint, JShint pre JS. Odporúčame aj inštalovať do vášho editora .editorconfig, čo je súbor pravidiel, podľa ktorých bude editor kód automaticky formátovať.

5. Ten, kto používa v CSS important, je schopný vraždy.

Váha selektorov v CSS vie občas programátora potrápiť. Hlavne toho, ktorý ju vôbec nechápe a radšej si pomôže “importantom”. Pri aplikovaní štýlov na element, definovaný v CSS viacerými selektormi, váha týchto selektorov určuje, ktoré štýly sa budú aplikovať. Pomocou important je možné toto chovanie obísť, ale zároveň je to veľký spúšťač problémov, ktoré spôsobia veľké hry o prebíjanie selektora.

6. Nezosmilníš s iným frameworkom, kým to nie je nutné.

Nehovorím tu teraz, samozrejme, o tom, že by programátor nemal mať prehľad, alebo nedokázal použiť iný framework ako jeho preferovaný. Vo web development svete je momentálne doba taká, čo deň, to nový CSS alebo JS framework. Výber je naozaj veľký a meniť svoj “natívny” za nový, cool framework, je často zbytočné riziko, ktoré treba zvážiť. My pre CSS používame Bootstrap a v JS naša voľba padla na VueJS.

7. Nebudeš sa okrádať o čas vecami, ktoré idú automatizovať.

Nikdy nestrácajme čas prácou na činnostiach, ktoré sa dajú automatizovať, radšej investujme čas do ich automatizácie. GruntJS, GulpJS, Webpack sú nástroje, bez ktorých by sme už asi nevedeli fungovať. Spájanie súborov, minifikácie, optimalizácie a oveľa viac činností, kde nám tieto nástroje pomáhajú a šetria desiatky času. Pre package management používame Bower, ale postupne prechádzame na NPM.

8. Neskopíruješ kód, ktorý si raz napísal.

DRY (don’t repeat yourself)… Aby sme nemuseli editovať alebo opravovať HTML komponenty na desiatkach podstránok, väčšinu kódu sa snažíme generovať pomocou CakePHP3 View Helperov, ktoré nám zabezpečia dodržiavanie potrebnej štruktúry a ich debugging je oveľa jednoduchší. V CSS sme si osvojili BEM metodológiu, ktorá nám zaviedla naming konvenciu a definuje elementy, ktoré je možné znovu používať.

9. Požiadaš blížneho (kolegu) svojho o riadne code review.

Vďaka Code reviews vieme predísť chybám alebo zbytočne zložitým riešeniam, a ako bonus, máme dohľad nad juniormi.

10. Nepožiadaš o zbytočne veľa dát zákazníka svojho.

Optimalizácia webu je porovnateľne dôležitá vec ako jeho samotné naprogramovanie. Kto predsa bude používať našu super stránku, ktorá sa ale načítava skoro pol minúty? Alebo z drahých mobilných dát si stiahne pokojne aj 10 MB? Preto je nutné si vždy správne zadefinovať performance budget, kde stanovíme hlavné KPIs na performance stránky.

Poď nám pomôcť s vývojom super vecí a my ťa potiahneme vyššie!

Aktuálne do nášho development tímu hľadáme posily. Poď s nami makať na vývoji TOP platformy v e-commerce a na tých najlepších e-shopoch. Ak si expert v PHP, pozri si ponuku pre Back-End Developera. Ak už máš nejaké skúsenosti, ale potrebuješ viac praxe (možno aj popri škole), vezmeme ťa medzi Junior Webdeveloperov. A ak je ti bližší frontend, máme ponuku aj pre teba.