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

Kako otvoriti webshop? Važan korak je odabir platforme – što nudi WooCommerce?

Došla je pandemija i odjednom vam je pokretanje web trgovine postalo glavni prioritet? Važna odluka koja vas čeka je odabir platforme na temelju koje ćete napraviti svoje eCommerce carstvo. U moru alata čudnih imena, jedan iskače više od drugih - WooCommerce.

Intervju

Dostava piva nije vožnja po gradu uz GoogleMaps, znaju to Medvedgrad i OptimoRoute

Nakon osigurane investicije od gotovo sedam milijuna dolara, OptimoRoute planira širenje ureda u Zagrebu kako bi malim tvrtkama približili logističko planiranje slično onome koje imaju velike tvrtke.

Intervju

Tko posreduje između vašeg mobitela i banke kada plaćate Apple Payem?

Dok prislanjate mobitel na POS terminal vjerojatno ne razmišljate o tome koliko se procesa odvija u pozadini kako bi vaš novac kroz mobitel otišao s računa, zar ne?

Što ste propustili

Startupi i poslovanje

Trebate li pokrenuti svoj startup u krizna vremena? Ako da… možete li osigurati investiciju?

Krize sa sobom donose velike izazove, ali kako znamo - i značajne prilike. Mnogi se slažu da će nadolazeća kriza otvoriti još veće poslovne prilike nego prethodne. U ovotjednoj epizodi raspravljamo stoga kako i u kriznim vremenima razmišljati o stvaranju novih vrijednosti u tehnološkoj industriji.

Digitalni mediji

Zašto Spotify još nije u Hrvatskoj? Izmjena Zakona o autorskim pravima nudi odgovor

Već se godinama pitamo zašto Spotify još nije dostupan u Hrvatskoj, a ako bismo htjeli ponuditi kratak odgovor, on bi bio - novac. Duži je ipak nešto kompliciraniji, a rasprava oko izmjena Zakona o autorskim i srodnim pravima nudi uvid u njega.

Digitalni marketing

Što Facebook Shop donosi za brendove i eCommerce, analizirali smo uz stručnjake i poduzetnice

Iako su hrvatski trgovci već otvorili svoje fizičke trgovine, u SAD-u se tek počinju osjećati ozbiljne posljedice zatvaranja, a odgovor Marka Zuckerberga bio je Facebook Shop, moćniji eCommerce sustav koji bi mogao donijeti zanimljive promjene za sve - koliko korisne, otkrivamo.

Intervju

Digitalci koji su se preporodili na selu: Priroda ne znači da se trebate odreći tehnologije!

Pandemija novog koronavirusa naučila nas je kako je nekada potrebno jednostavno ostati doma, ali gotovo je uvijek bolje ostati u prirodi nego zatvoren u stanu.

Startupi i poslovanje

Kako radi Venture Builder, organizacija koja je ujedno i investitor i suosnivač u startupu?

Kako smo već pokazali, venture building model razvoja startupa ima priliku zasjati u kriznim vremenima bez obzira da li su osnivači VB organizacije poduzetnici veterani ili korporacija. U drugom nastavku ulazim u detalje o tome kako VB testira poslovnu priliku, kako formira, savjetuje i vodi tim do toga kako osigurava dodatan kapital.

Startupi i poslovanje

Digitalni doručak #3: Uz Wolt, KEKSPay i Infobip otkrivamo kako i u krizi dobro korisničko iskustvo može privući nove korisnike

Skuhajte kavu i ugodno se smjestite jer stiže nam treće izdanje Digitalnog doručka posvećenog korisničkom iskustvu. Uz domaće i strane stručnjake razgovaramo kako ispolirati CX u kriznim vremenima.