Novinky Odborné články 12.5.2020

Ako na cross browser kompatibilitu: návod pre developerov (1. časť – Začíname)

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é.

Čo sa vďaka blogu naučíte:
  • To, čo funguje vám, nemusí fungovať používateľom
  • Aké dôležité je myslieť dopredu + nastavenie workflow a reálneho času na vývoj
  • Že sa vždy oplatí pozorne počúvať klienta a poznať jeho požiadavky
  • Niečo o HTML 5 štandardoch
Neprogramujete pre seba, ale pre používateľov

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.

Nie je to len o písaní kódu

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í:

  1. Plánovanie
  2. Vývoj s ohľadom na kompatibilitu
  3. Testovanie & optimalizácia

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ť.

Zadefinujte si platformy

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.

Vyberte vhodnú technológiu. Ak takú nenájdete, spravte si ju

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.

Začíname s vývojom – HTML

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, LinkedInInstagrame

 

 

Komentovať

Ďalšie Aktuality

AKTUALIZOVANÉ 3. 8.: Pripomenkovanie štúdií uskutočniteľnosti k verejným IT projektom

Čítaj viac

Saneca Pharmaceuticals si vybrala na svoju transformáciu IBM Power Systems a SAP HANA

Čítaj viac

T-Systems sa mení na Deutsche Telekom IT Solutions Slovakia

Čítaj viac

Používate zastaralý prehliadač. Môžete si ho aktualizovať na tejto stránke.