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

Startupi i poslovanje

Nemojte se ugledati na ‘lifestyle’, ‘hustle’ i Instagram poduzetnike koji ne kuže biznis (osim onih koji kuže)

Toksična pozitivnost i poslovna naivnost mogu biti katastrofalna kombinacija u doba ekonomske krize. Je li vrijeme da unfollowate sve lifestyle poduzetnike i motivirajuće Instagram profile?

Startupi i poslovanje

Čudo nije investicija, već Infobipov ‘bootstrapped’ rast i upornost već 14 godina

Infobip je osiguravanjem investicije od 200 milijuna dolara postao prvi hrvatski 'jednorog'. No pravo čudo je da su osnivači Silvio Kutić, Roberto Kutić i Izabel Jelenić do ovog trenutka dogurali bez ijedne vanjske investicije - i govori mnogo o hrvatskim tehnološkim poduzetnicima!

Startupi i poslovanje

Od Applea do Rimca: Tko je novi CTO Rimac Automobila, Chris Porritt

Automobilski svijet pomalo je iznenadila vijest o odlasku Chrisa Porritta iz Applea i dolaska - u hrvatske Rimac Automobile, ali tko je Chris uopće i zašto je njegov dolazak važan?

Što ste propustili

Društvene mreže

Zabrani li Trump TikTok, hoće li hrvatski ‘TikTokeri’ preći na Instagram Reels?

Dok čekamo hoće li Trump zabraniti, a Microsoft kupiti SAD za američko tržište, hoće li Zuckerberg iskoristiti pravi trenutak i preuzeti TikTokove kreativce, publiku i potencijal?

Startupi i poslovanje

Hrvatske B2B tehnološke tvrtke “iskovale” su se u konstantnim krizama, preživjet će i ovu!

Trenutna kriza nije ni prva ni zadnja, a kako su se postavili - i kako će preživjeti - u B2B tehnološkom poslovanju za Netokraciju otkrivaju osnivači Poslovne inteligencije, Microblinka, Agrivija i Airta.

Web aplikacije

E-Predmet na GitHubu: Mogli bismo imati djelotvornije sudstvo, ali ne bez kvalitetnih podataka

Računarac koji je pozornost javnosti privukao tehnologijom za brojanje sudionika javnih skupova uhvatio se u koštac s podacima iz pravosudnog sustava. Usput je razotkrio koliko je to čudan svijet.

Kultura 2.0

Zašto nisam podržala #womensupportingwomen, a jesam #ženeujavnomprostoru

Shvaćam. Lako je. Lako je objaviti selfie, nasmijati se, osjećati taj #girlpower, primiti lajkove, komplimente i otići dalje u dan. No, bojim se da prelako prepuštamo prostor onome što je lako, a preteško onome što je teško.

Sponzorirano

Pravi ‘white hat’ haker otkriva kako mu izgleda radni dan (i kako je Twitter hakiran)

Ako ste se pitali kako su hakeri nedavno uspjeli ući u Twitter profile Jeffa Bezosa i Elona Muska, ali i kako izgleda radni dan jednog profesionalnog hrvatskog hakera, ne pitajte se više! Razgovarali smo sa 'cyber security' konzultantom Danijelom Teslićem.

Startupi i poslovanje

Tvoj plinomjer je upravo postao gadget, zahvaljujući ByteLabu i partnerima

HEP Plin predvodnik je najvećeg IoT projekta u Hrvatskoj na kojem radi s nekoliko startupa.