Primjer ‘meme’ generatora: Koje sve alate koristiti za izradu odličnih web aplikacija?

Nerijetko se događa da se čvrsto držimo za nešto što smo dobro upoznali i svladali te nam je teško izaći iz zone komfora te upoznati novije i naprednije alate i tehnologije. Ako se pak odlučimo za promjenu i uvođenje noviteta, teško je uvijek izdvojiti i prepoznati ono što je najbolje. Na ovogodišnjoj konferenciji WebCamp Zagreb 2016, Infinumov voditelj JavaScript tima, Krešimir Antolić svojim je zabavnim i bogatim predavanjem dopustio slušateljima i gledateljima zaviriti u zbirku alata koje svakodnevno koristi, kao i u one koje tek planira implementirati u budućim projektima.

Predstavio je proces izrade projekta Meme Generator, čija je funkcija na sliku dodati tekst koji korisnik sam upisuje.

Aplikaciju je namjerno prekomjerno ‘inženjerirao’ kako bi iskoristio i predstavio što više alata kojima se svakodnevno služi. Uz WebPack module bundler, ES2016 te SCSS, prezentirao je tehnologije koje su njegov kolosalni projekt učinile mogućim.

Pogreške se događaju i najboljima

Ljudski je griješiti, a Krešimir je svjestan da su i najbolji web developeri na kraju dana ipak samo – ljudi. Za provjeru svog napisanog koda preporučuje ESLint za JavaScript, koji ne samo da prepoznaje greške u sintaksi, već i provjerava ispravnost stila pisanja, koji svatko može definirati prema osobnim preferencijama.

Za provjeru SCSS koda služi se Stylelintom, alatom koji provjerava napisani CSS kod, također, ne samo u sintaksi nego i provjerava dogovorena pravila kodiranja (eng. Coding Conventions).

Što sve može moderan preglednik

Nije li vam se barem jednom dogodilo da ste se osramotili svojim nepoznavanjem pravopisa šaljući poruke internetskim putevima svojoj ljubavnici/ljubavniku ili novoj simpatiji? U današnje vrijeme krivnju možete prebaciti na developera koji je kreirao polje u kojem pišete svoje poruke – jednostavnim dodavanjem atributa spellcheck u HTML elementu za unos teksta, riječi koje su pogrešno napisane bi se podcrtale te je nesretni developer iz priče tako mogao spriječiti vaše sramoćenje.

Vjerovali ili ne – i danas postoje developeri koji nisu čuli da se internetom može surfati s drugih uređaja, osim stolnog računala. Nadajmo se da su prisustvovali predavanju Krešimira Antolića koji je objasnio i pokazao kako srcset atributom prikazujemo slike u različitim rezolucijama. Prikazivanje slika uvjetovano je veličinom i formatom ekrana putem kojeg korisnik koristi aplikaciju te smo aplikaciju tako učinili responzivnom.

Jedna od vrlina svakog dobrog developera je i – lijenost, koja je doprinijela krivulji napretka čovječanstva. Postoje ljudi kojima nije uvijek do tipkanja, a treba uzeti u obzir I da osobu od 80-ak kilograma polusatno tipkanje po računalnoj tipkovnici može koštati i čak 61 izgubljenu kaloriju. Kako bi se poštedjeli spomenutog napora, tu je Web Speech API i njegov SpeechRecognition, koji glasovni unos pretvara u tekst. Isti taj tekst vaš web preglednik može i pročitati za vas, uz pomoć SpeechSynthesisa.

Pristup web aplikacijama – i bez interneta

Natjerajte svoju aplikaciju da koristi sva računalna osjetila, skinite prašinu sa svoje web kamere jer njome odsada možete preko preglednika uslikati svoje novonaučene grimase. Media Capture API pruža mogućnost slikanja, snimanja, a čak i prenošenje uživo digitalnog zapisa, uhvaćenog vašom kamerom.

Ponekad nas avanturistički život odvede u mračne kuteve svijeta, gdje nam internetska veza i njezine usluge nisu nadohvat ruke. Web aplikacije nisu više funkcionalne samo i isključivo uz pristup internetu, svoje slike i podatke možemo spremiti lokalno uz pomoć INDEXDB – koji omogućuje spremanje velikog broja podataka koje aplikacija može sinkronizirati Service Worker API-jem nakon spajanja na mrežu. Isto tako, Service Workerom možemo definirati ‘ponašanje’ aplikacije, ovisno o tome ima li ili nema pristup internetu.

Za otvaranje aplikacije, bilo offline ili online, svaki developer koji imalo ‘drži do sebe’ trebao bi korisniku pružiti mogućnost otvaranja aplikacije klikom na lijepu ikonu na zaslonu i primanje notifikacija. Web App Manifest je web tehnologija koja omogućuje upravo to – držite do sebe ;).

Nove mogućnosti web aplikacija su ogromne

Tek smo ‘zagrebali površinu’ novih mogućnosti web aplikacija, a napredak je velik. Osim spomenutih tehnologija, Krešimir je sastavio dodatni popis onih koje nije uspio integrirati u svoju aplikaciju ili onih koje planira tek isprobati u skorije vrijeme:

• Pointer Events – ovisno o tome koristi li korisnik miš, olovku ili dodir prsta moguće je definirati ‘ponašanje’ aplikacije.
• Web Audio API – pruža mogućnost manipulacije zvuka i mogućnosti su mnogobrojne npr. Violent Theremin.
• Ambient Light Events – daje aplikaciji mogućnost detektirati promjenu intenziteta svjetla u korisnikovom okruženju.
• Online And Offline Events – provjerava ima li pristupa internetu
• Page Visibility API – sada znamo kada su korisnikove oči na našoj aplikaciji, a kada je preglednik van fokusa tj. u pozadini ili minimiziran.

Kako se mnoge funkcionalnosti web aplikacija sele na klijentsku stranu, frontend zahtijeva sve više inženjeringa od strane developera, a jedan od razloga su nativne aplikacije. Veći su nedostatak web aplikacija performanse ili brzina odziva, u kojoj nativne još uvijek prednjače, dok su druge razlike sve manje.

Budućnost web aplikacija dolazi i izgleda dobro, bitno je držati korak i ostati konkurentan. Ponekad nije lako zakoračiti u nepoznato i susresti se s novim izazovima, ali treba imati na umu da svakim novim učenjem, osim vještina, učimo i – učiti.