Koje sve alate koristiti za izradu odličnih web aplikacija?

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

Na ovogodišnjoj konferenciji WebCamp, Infinumov voditelj JavaScript tima, Krešimir Antolić, svojim je zabavnim i bogatim predavanjem dopustio posjetiteljima WebCampa zaviriti u zbirku alata koje svakodnevno koristi, kao i u one koje tek planira implementirati u budućim projektima.

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.

meme
Meme Generator na djelu 😉

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.

Krešimir
Krešimir zna da osobu tešku osamdesetak kilograma sat tipkanja može “koštati” 61 kaloriju. Zašto ih ne biste uštedjeli alatima za prepoznavanje govora? 🙂 (Slika: WebCamp Zagreb)

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.

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Tehnologija

Domaći ININ uz AI “opametio” održavanje cesta i očitavanje brojila u Slavonskom Brodu

Koristimo AI za filtere na Instagramu i razgovaramo s robotima svaki dan. Zašto onda ne bismo koristili umjetnu inteligenciju za bilježenje rupa na cesti? Tvrtka ININ mogla bi imati pravo rješenje.

Društvene mreže

Jeste li mislili da će 16 godina od osnivanja Facebooka na njemu najvažnije biti – grupe?

Pokretači i administratori otkrivaju mi kako su nastala stručna udruženja, pa i poslovna partnerstva, na temelju specijaliziranih Facebook - grupa.

Intervju

Good Game Nikole Stolnika osigurao 2,2 milijuna kuna, među investitorima Sacha Dragić, Ivan Klarić i Bruno Kovačić

Esport organizacija Good Game nedavno je osigurala svoju prvu veliku investiciju od 300 tisuća eura, na krilima grupe investitora koja uključuje Ivana Klarića, Brunu Kovačića i Sachu Dragića.

Što ste propustili

Kultura 2.0

Zašto vam baš neću dati email ili broj direktora te tvrtke, ali možda napravim intro (što je bolje za vas)

“Možeš li mi dati email ili telefon od...?” Žao mi je, ne neću. Umjesto dilanja kontaktnih podataka, vrijeme je da usvojimo kulturu “introa”.

Internet marketing

Uvodimo četverodnevni radni tjedan i normalne rokove u marketinšku industriju ASAP!

Svi marketingaši na početku svoje karijere prođu vatreno krštenje rokova "za jučer", ali mora li takvo stanje ostati i u digitalnom dobu? Zajedno s Domagojem Davidovićem iz Švicarske, otkrivamo potencijalna rješenja za normalniji radni ritam u industriji.

Internet marketing

Na Valentinovo ne cvjetaju samo ruže, nego i industrija seksi igračaka za odrasle: LELO i Libido otkrivaju i koliko

Sretno Valentinovo! Danas je dan zaljubljenih, a na Netokraciji smo se odlučili istražiti kupovne navike i digitalne kampanje nešto posebnijih stvari, baš za ovaj dan.

Tehnologija

Nanobit i Microblink: Ako zaživi GDSA, izazivač Google Playa, olakšat će ulazak na kinesko tržište aplikacija

Xiaomi, Vivo i Oppo udružili su se u razvoju platforme koja bi bila direktan konkurent Google Playu. Kako to može utjecati na domaće IT tvrtke, otkrili smo u razgovoru s njihovim predstavnicima.

Mobilno

MWC otkazan: Hrvatski novinari i izlagači, poput Microblinka, Undabota i Delta Realityja, saniraju štetu

Najveći sajam mobilne telefonije, Mobile World Congress u Barceloni jučer je otkazan, a kao razlog se navodi - koronavirus. Neki bi se s time složili, neki vide druge razloge, no posljedice za mnoge u industriji su očigledne i nisu zaobišle hrvatske izlagače, novinare i posjetitelje.

Startupi i poslovanje

Splitsko Litto preuzima rezervacije i prijave gostiju, ali i druge brige domaćih iznajmljivača

Što se dogodi kada lokalni iznajmljivači odluče digitalizacijom riješiti probleme s kojima se i sami bore?