Developeri webov a aplikácií, zbystrite pozornosť. Podarilo sa vám už vytvoriť webstránku či webaplikáciu, ktorá funguje a vyzerá tak, ako má, bez ohľadu na to, či si ju prezeráte na vašom pracovnom zariadení, klient na svojom najnovšom iPhone, alebo bežný užívateľ na obyčajnom kancelárskom notebooku?
Tvorba takýchto webov či aplikácií nie je nemožná, no na dosiahnutie dobrej funkcionality a úplnej kompatibility nesmiete pri ich vývoji a programovaní zabudnúť na pravidlá a princípy. Ak ich dodržíte, pochvala od šéfa a uznanie od klienta sú zaručené.
Ako developer máte na pleciach veľkú zodpovednosť: nemalo by vás zaujímať len to, že aplikácia, na ktorej ste makali dlhé mesiace, funguje. Majte na pamäti, že dnes ľudia používajú milión typov zariadení a každý môže mať nainštalovaný iný browser. Niekomu vyhovuje Chrome, niekto si zvykol na Firefox a hlavne starší používatelia ani netušia, že existuje aj niečo iné ako Explorer.
Najdôležitejšie pravidlo: pri vývoji nemyslite na to, ako by ste aplikáciu používali vy. Myslite na tých, ktorí budú váš produkt používať v reálnych podmienkach.
Najdôležitejšie pravidlo: pri vývoji nemyslite na to, ako by ste aplikáciu používali vy. Myslite na tých, ktorí budú váš produkt používať v reálnych podmienkach. Ako šikovný developer sa musíte do tejto rozdrobenej masy vcítiť.
Rôzne zariadenia majú rôzne možnosti, od najlepších high–end tabletov, cez smart televízory až po niekoľko rokov staré smartfóny, na ktorých bežia staršie typy browserov.
Najskôr si preberieme základy. Ešte predtým, než napíšeme prvú čiarku v kóde, dôkladne si všetko premyslíme a nastavíme workflow.
Projekt môžeme rozdeliť do troch základných častí:
Predstavte si nasledovnú situáciu. Vychýrený šéfkuchár s top kuchynským vybavením a kvalitnými surovinami pripraví svoju špecialitu pre 20 náhodne vybraných ľudí z celého sveta. Zaručia jeho skúsenosti a špičkové vybavenie, že bude chutiť každému? Každý z nich predsa môže mať rôzne chuťové preferencie, alergie či stravovacie návyky.
Presne v rovnakej situácii je aj vy – ak ako developer nebude brať do úvahy, kto bude váš produkt používať, nemusí to dopadnúť dobre.
Preto vždy prihliadajte na to, pre aké operačné systémy web alebo aplikáciu vyvíjate (Windows, MacOS, Linux distribúcie, Android, iOS?), ktoré najpoužívanejšie browsery sú na trhu (Safari, Firefox, Chrome, Explorer, Edge, Opera?) a nezabúdajte ani na rôzne veľkosti, resp. rozlíšenia obrazoviek – od malých telefónov až po 4K monitory. Kombinácií môže byť veľmi veľa a na každej z nich by malo vaše riešenie bezproblémovo fungovať.
Ešte pred samotným vývojom si spolu s klientom zadefinujte, ktoré platformy by mal projekt podporovať.
Ešte pred samotným vývojom si spolu s klientom zadefinujte, ktoré platformy by mal projekt podporovať. Pri hybridných aplikáciách si vopred určite aj verziu operačného systému, napr. iOS 12+, štandardne však stačí zvoliť verzie iba pre jednotlivé prehliadače.
Zistite, aké požiadavky klient má a čo presne chce, nezabudnite s ním hovoriť aj o cieľovej skupine, ktorej je riešenie určené. Až potom pristúpte k výberu technológií.
Dávajte si pozor na množstvo JavaScript knižníc. Každá z nich je totiž závislá na jej autorovi a je len na jeho dobrej vôli, ako často ju aktualizuje. Mali by ste mať projekt čo naviac pod kontrolou a namiesto „hipster-cool-modern-animate-library.js, ver. 1.0.12” skôr odporúčam použiť známejšiu, komerčne overenú alternatívu. Alebo si ideálne môžete nakódiť niečo vlastné, čo budete mať pod kontrolou vy.
Každá knižnica či framework má v dokumentácii spomenuté, kde funguje úplne, kde len čiastočne a kde nefunguje vôbec. Spravidla platí, že používanejšia a známejšia knižnica má lepšiu spätnú podporu. Preto nepodceňte ani štúdium dokumentácie alebo online fóra so zoznamom otvorených/vyriešených chýb.
Pokiaľ ide o funkčnosť, držte sa HTML 5 štandardov a nepoužívajte to, čo je ešte len v štádiu experimentovania alebo vývoja.
Výzvou pre vás môže byť jednotnosť vzhľadu niektorých HTML komponentov, napríklad video prehrávač <video>. Pri nich momentálne platí, že každý prehliadač si ich vykreslí po svojom a tým sú obmedzené aj možnosti štýlovania.
Pokiaľ potrebujete úplne totožný vzhľad pre všetky prehliadače, musíte sa vzdať predvoleného ovládacieho panelu (play, pause, volume atď.) a naštýlovať/naprogramovať si vlastné UI, ktorým bude užívateľ spúšťať jednotlivé akcie
Nie je to nič zložité, no počítajte s navýšením času, ktorý tomu budete venovať. Myslite na to, keď budete pre klienta odhadovať termín dodania riešenia.
Teraz už poznáte všetky dôležité kroky, ktoré by mali predchádzať samotnému programovaniu riešenia. V ďalšej časti blogu si povieme viac o CSS, prefixoch, predvolených štýloch, responzivite a animáciách.
Autor: Ľubo, front-end developer, SCR technologies
scr@scr.sk
Sledujte SCR technologies na Facebooku, LinkedIn a Instagrame
