Jednostavni trikovi za veb development koji mogu da vam „olakšaju život”

Od dizajna, preko SEO optimizacije, do bezbednosti — predstavljamo savete i dobre prakse za razvoj aplikacija.

Poštovanje određenih principa i dobrih praksi prilikom razvoja aplikacija — od samog početka, pa tokom svih faza njihove izrade — značajno povećava njihov kvalitet i može vas spasiti neželjenih posledica, smatra programer Petar Slović.

U predavanju održanom u okviru Quantox Virtual Conference izneo je teze koje „pokrivaju” različite segmente veb developmenta i predstavljaju korisne smernice u ovoj oblasti.

Dizajn

Petar napominje da su naročito back end developeri skloni da izbegavaju učenje o dizajnu, budući da su više logički nego estetski nastrojeni i smatraju da to nije „njihov posao”.

Za sve koji se dizajnom bave profesionalno, ali čak i za back end programere, Petar predlaže ovladavanje „hakovima” koji pomažu kreiranju profesionalnog dizajna uz jednostavna pravila.

Prvenstveno, preporučuje knjigu i sajt Refactoring UI. Objašnjena pravila su jednostavna i mogu ih slediti svi, kako front end developeri, tako i back end programeri i menadžeri.

Petar preporučuje i CSS biblioteku TailwindCSS, koja je popularna zato što ne nameće određena rešenja i pomaže brzom kreiranju dizajna. Ona unapred postavlja i predefiniše svojstva i klase koje mogu da se koriste, pa je lako ostati konzistentan na celoj platformi.

Primera radi, ukoliko korisnik postavi istovetno formatiranje margina svih formi na jednoj strani, to je jednostavno izvesti, bez pamćenja broja piksela.

Node Package Manager (npm)

Između ostalog, Petar je govorio o instalaciji npm paketa koji se koriste tokom rada na aplikacijama, a prva njegova sugestija odnosi se na korišćenje „npm ci” komande prilikom uključivanja programera u već postojeći projekat.

„Ta komanda slična je komandi ‘npm install’, ali instalira tačnu verziju paketa koja je smeštena u package-lock.json fajl. To je važno učiniti, kako bi se osigurala konzinstentnost, kada različiti developeri učestvuju u procesima kontinuirane integracije”.

„Kada dobijete projekat, koji je već postavljen i neko radi na njemu, treba da zadate komandu ‘npm ci’ umesto ‘npm install’, kako biste instalirali apsolutno iste verzije paketa koje su drugi ljudi koristili tokom rada. U suprotnom, može da se dogodi da projekat ne radi kod vas, a radi kod drugih ljudi, što je veoma teško debagovati”.

Takođe, savet je da se u „package.json” fajl doda svojstvo „engines”, budući da ono definiše koja verzija Node.js-a je podržana za pokretanje projekta. Primera radi, možemo odobriti opseg verzija od 12 do 14, kako bismo bili sigurni da će one ispravno funkcionisati.

JavaScript

Savete koji se tiču programskog jezika JavaScript, esencijalnog alata za front end development, Petar je izneo u nekoliko postulata:

  • Preferirajte metode „map”, „filter” i „reduce”, kao i druge postojeće metode za iteraciju, u odnosu na „for” i „while” petlje. Kod je tako čitljiviji i ekspresivniji. Ipak, u situaciji kada imate listu promise-a i želite da ih sekvencijalno mapirate, preporučljivija je „for…of” petlja.
  • Lančanje čini da kod izgleda lepše i ne mora samo da se odnosi na svojstva, pa se njime mogu indeksirati nizovi i objekti. Ipak, u tome ne treba preterivati i nadovezivati preveliki broj izraza jedne na druge.
  • Nemojte „commit-ovati” „node_modules” na GitHub. Kako je Petar objasnio, to se retko dešava i to najčešće čine praktikanti. O tome treba svesno voditi računa, budući da se u nekim slučajevima moduli automatski ignorišu i ne upload-uju, ali ne uvek.
  • Koristite TypeScript. Vrlo je koristan jer omogućava da se kod dokumentuje kroz definisanje tipova i interfejsa.

Git

„Pre svega, važno je sisteme kontrole verzija koristiti na ispravan način”, naglašava Petar. „Nešto što može da izazove probleme jeste loša commit poruka, odnosno komentar prilikom čuvanja koda. Ljudi pišu stvari kao ‘fixes’, ‘should work now’ itd. To su loše poruke i tako ne treba raditi”.

Dobra commit poruka, prema Petrovim rečima, ide ruku pod ruku sa dobrim commit-om, tj. javnim čuvanjem izmena u kodu. „Treba da commit-ujete samo male funkcionalnosti, ne da radite danima na aplikaciji, pa odjednom postavite na Git cele komponente. Ipak, to ne treba da budu ni proste funkcije. Ono što želite, jeste da commit-ujete minimalne samostalne funkcionalnosti. Tako se lakše uočava progres, a lako se pišu i promene, jer je jednostavno opisati u čemu se sastoje i koji su razlozi za njih.

Kada se radi u timu, ali čak i kad se radi samostalno, vrlo je važno koristiti grane (branches). Tako se dobija pregledan istorijat izmena, a pri spajanju (merge), jasno je vidljiv napredak rada na aplikaciji. „Važno je da znate zašto i kada ste menjali stvari, što olakšava i traženje bagova, pošto možete tačno da vidite u kom trenutku su nastali”.

„Grane treba brisati čim se merge-uju. Dešava se da imate stotine grana i ne znate koje su stare, koje su napuštene, a koje su aktivne i relevantne. Uvek budite uredni i brišite ih pravovremeno”.

SEO optimizacija veb-sajta

U segmentu predavanja u kom se bavio potrebom da sajt bude vidljiv i relevantan internet pretraživačima, Petar je govorio o tehničkom aspektu, ne i iz ugla pisanja sadržaja.

„Ako želite da vam sajt bude dobro ‘uglancan’, treba uvek da koristite meta tagove”, istakao je Petar. „Oni opisuju stranu, ali nisu vidljivi na njoj, i treba da budu specijalizovani, npr. za Skype, Facebook, Telegram, tako da se na pretraživaču prikazuje ono što vi želite”.

Još jedna važna opcija, koja se retko koristi jeste mikrodata specifikacija. U osnovi, to je način da detaljnije saopštimo search engine-ima kao što je Google o čemu je stranica. Svaku sekciju našeg sajta možemo da anotiramo atributima itemscope, itemtype, itemprop i tako pomognemo Google-u da bolje razume sekcije našeg sajta i ponudi isečke (snippet) korisnicima koji traže sadržaj.

U slučaju single page aplikacija, budući da ih veb indekseri (web crawler) prepoznaju kao prazne stranice, rešenje mogu da budu servisi poput Prerender.io, koji kompletnu izvršenu stranicu predaje indekseru tako da dobije ceo sadržaj.

Bezbednost

Bezbednost je kompleksna tema, ali od značaja za svakoga ko se bavi veb developmentom, bez obzira na to da li je specijalizovan za back end, front end ili dizajn. Prema Petrovim rečima, potrebno je poznavati makar osnove te oblasti, kako bi se kreirale aplikacije koje nije lako kompromitovati.

„Većina upada mogla bi se jednostavno spreči i izbegne, samo da je razvojni tim bio svestan i na vreme dizajnirao aplikaciju u skladu sa sigurnosnim zahtevima i potrebama”.

Pre svega, Petar savetuje da se osetljivi podaci ne postavljaju na Git repozitorijume, bez obzira na to da li su javni ili privatni.

Bezbednost sajta može se povećati i sa serverske strane.

Prva stvar koju bi trebalo učiniti jeste podesiti „Content Security Policy HTTP headere”, i tako kontrolisati šta ćemo dozvoliti pretraživačima da koriste i izvršavaju. Važno je biti što restriktivniji, upozorava Petar. Primera radi, možemo ograničiti sajt na izvršavanje skripti koje dolaze s našeg domena i eventualno dodati još i Google Analytics skriptu.

Petar preporučuje i korišćenje CloudFlare-a — platforme koja nudi bezbednosne proizvode, među kojima je primarna DDoS zaštita, budući da automatski brani sajt od napada, predstavljajući posrednika (proxy) između korisnikovih servera i posetilaca.

Savet je programerima i da JSON web tokene, koji se koriste za autentifikaciju, skladište u kolačićima (cookies), umesto u local storage-u, budući da je takav način čuvanja tokena bezbedniji. Cookies mogu biti enkriptovani na serveru i automatski se šalju sa svakim zahtevom, tako da se tokeni ne moraju zasebno tretirati na front end-u.

Sve ovo, ali i mnogo drugih korisnih saveta i informacija, možete čuti od Petra u predavanju dostupnom na YouTube-u.

Predstavljamo poslodavca
Telesign_logo-1-1.jpg

TeleSign

Connect & Protect Online Experiences

TeleSign povezuje i štiti svoje korisnike uz pomoć sofisticiranih rešenja za utvrđivanje i proveru identiteta internet korisnika. Uz pomoć API, koji omogućuje samu komunikaciju, registraciju korisnika i data insight, mi smo u mogućnosti da rešimo svakodnevne izazove koje naši korisnici imaju povezujući tako njihovu poslovnu stranu sa složenom stranom globalnih telekomunikacija.

Danko Novović

Unesite termine za pretragu