Korišćeni alati

Uvod

Namena

U današnje vreme, u svakom zahtevnijem softverskom projektu koriste se određeni alati koji pomažu tokom njegovog razvoja. Od alata za organizaciju projekta poput Trello, GitHub i JIRA, preko alata za modelovanje baze podataka poput MySQL Workbench i ERwin Data Modeler, alata za projektovanje softvera poput StarUML, pa sve do alata za testiranje poput Selenium IDE i Selenium WebDriver, jedan projekat može koristiti veliki raspon alata kako bi svoj proizvod doveo do prve verzije za korisnike (MVP). U ovom dokumentu konkretno fokus je na alatima korišćenim u toku implementacije projektnog zadatka Blurr.

Alati za razvoj, u opštem slučaju, olakšavaju nekoliko stvari:

• Daju dovoljno visok sloj apstrakcije softverskom inženjeru kako bi više vremena proveo implementirajući poslovnu logiku umesto bavljenja stvarima nižeg nivoa (poput toga kako će neki veb pregledač da interpretira delove napisanog koda).
• Pružaju dovoljnu mogućnost softverskom inženjeru da postigne ono što želi, na taj način da često (u globalu) korišćene funkcionalnosti budu lakše za dodavanje.
• Pružaju dovoljno opširnu ali i konciznu dokumentaciju svih svojih mogućnosti, kao i vodiče kroz najčešće korišćene stvari, tako da se inženjeri lako snalaze sa alatom.
• Olakšavaju inženjerima koji su tek ubačeni na projekat rad ukoliko su sa tim alatima već radili na nekom od prethodnih projekata.

U ovom projektu izabran je minimalan skup alata potreban za implementaciju, tako da krajnji proizvod postigne sve što je zamišljeno nacrtom projektnog zadatka.

Ciljne grupe

Dokument je namenjen vođi (tim lideru) i članovima razvojnog tima, kao podsetnik o odlukama donesenim rano u razvoju projekta i o čemu sve treba voditi računa ukoliko na nekom od sledećih projekata odluče da neki od tih alata promene. Dokument takođe služi investitorima u proizvod (u ovom slučaju, predmetnim profesorima i saradnicima) kako bi bili upoznati sa stanjem razvojnog tima i znali da očekuju koliko brzo zahtevane funkcionalnosti mogu biti razvijene.

Organizacija dokumenta

Ostatak dokumenta organizovan je u sledeća poglavlja:

• Backend: alati korišćeni na serverskoj strani proizvoda
• Frontend: alati korišćeni na klijentskoj strani proizvoda
• Deployment: alati korišćeni tokom plasiranja proizvoda u javnost

Otvorena pitanja

U ovoj sekciji navode se otvorena pitanja. Ona se numerišu i pozicioniraju u vremenu radi lakšeg referisanja. Kada se pitanje reši, potrebno je to uneti u odgovarajuću rubriku.

#	Datum	Problem	Rešenje
1
2
3
4

Backend

Ruby on Rails

Ruby on Rails je popularan framework za razvoj veb aplikacija. Zasniva se na jeziku Ruby i obuhvata najčešće korišćene funkcionalnosti koje softverski inženjeri danas očekuju od jednog takvog alata:

• Rad sa bazom podataka (Active Record):
  • Migracije
  • Seeding
  • Validacija podataka
  • ORM
• MVC model razvoja aplikacije
• Pomoćne metode za serviranje podataka kroz jedan JSON veb aplikativni programski interfejs (API)
• Autentikacija korisnika
• Sesije
• Razvojni veb server sa mogućnošću automatskog osvežavanja (hot reloading)

Alat je izabran kao jedan od modernijih i popularnijih alata za ovu svrhu sa kojim članovi razvojnog tima nisu bili upoznati pre izrade projektnog zadatka.

PostgreSQL

PostgreSQL je open-source sistem relacionih baza podataka koji važi za jedan od najnaprednijih u industriji. S obzirom na to koliko je popularan, lako se integriše sa ostalim korišćenim alatima (Active Record i Docker) i pruža nam dovoljno širok skup funkcionalnosti za razvoj proizvoda.

Frontend

TypeScript

JavaScript je jezik inicijalno razvijen za veb pregledač Netscape (danas Firefox). Kako se vremenom zbog konkurencije različitih veb pregledača jezik razvijao u različitim smerovima pod različitim pregledačima, na načine na koje su proizvođači pregledača hteli i koji često nisu bili međusobno konzistentni, do standardizacije jezika došlo je oko 2005. godine. Do tog trenutka, došlo je do mnogih upitnih odluka u razvoju jezika (od kojih su neki funkcionisanje == operatora, razne implicitne konverzije, i stvari poput document.all) koje su zbog kompatibilnosti morale da budu dodate u ECMAScript standard, iako su generacijama inženjera nakon toga otežale razvoj veb aplikacija. Iako danas funkcionalnosti poput strict mode rešavaju dosta problema, kao jedna od najvećih boljki isplivao je JavaScript-ov jednostavan i često neintuitivan sistem tipova.

TypeScript uvodi strogu tipizaciju u JavaScript. Kako smo videli iz primera poput Rust programskog jezika, sistem tipova sa sobom nosi i mnoge druge pogodnosti, od kojih je za TypeScript najbitnije to da se više potencijalnih greški može prijavljivati u vreme prevođenja umesto u vreme izvršenja. Povrh svega, pošto se TypeScript zasniva na slabo tipiziranom jeziku kao što je JavaScript, njegov sistem tipova je dosta fleksibilan u odnosu na sistem tipova jezika poput Java, C# ili Rust (na primer, promenljive i dalje mogu imati više tipova, ali se programeru jasnije daje do znanja koje operacije su nad takvim promenljivama dozvoljene). Iako nije prvi takav jezik, razlog iz kog je TypeScript postao naročito popularan verovatno leži u tome što su za dosta razvojnih okruženja razvijene integracije sa TypeScript definicijama tipova i za dosta korisničkih i standardnih biblioteka su razvijene celokupne TypeScript definicije tipova, što je zauzvrat omogućilo razvojnim okruženjima da daju predloge razvijačima softvera u JavaScript sugestije za lakši razvoj (na primer, šta se sa pojedinim promenljivim može raditi, koje se metode mogu pozivati, koji su povratni tipovi i argumenti) nalik IntelliSense mehanizmu za neke strogo tipizirane jezike.

Način razvijanja TypeScript koda funkcioniše na sledeći način:

• Razvijač piše svoj kod u fajlovima specifično označenim kao TypeScript kod (.ts, .tsx)
• Podešavanja TypeScript kompajlera nalaze se u datoteci tsconfig.json
• Poziva se TypeScript kompajler (tsc) koji proveri greške u tipovima u TypeScript kodu, a zatim prevede taj kod u JavaScript
• Klijentu se na kraju svega servira JavaScript, ali koji je tokom razvoja proveren od strane TypeScript kompajlera i time sa manje mogućih greški

TypeScript kompajler se integriše sa ostalim delovima razvoja (pipeline) preko Webpack alata (videti ispod).

TypeScript je odabran kao jezik za frontend razvoj na projektu kako bi članovima razvojnog tima značajno olakšao traženje greški i dao mogućnosti korišćenja nekih novijih konstrukata koje još uvek nisu standardizovane u ECMAScript.

React

React je deklarativna biblioteka za razvoj korisničkih interfejsa zasnovana na komponentama. Šta ovo znači za članove razvojnog tima?

Godinama pre uvođenja deklarativne paradigme razvoja veb aplikacija, razvoj je na najnižem nivou klijentskog koda uglavnom tekao tako što razvijač mora da nekoliko stvari odradi ručno: mora da osluškuje na događaj na koji želi da nešto uradi, a zatim kada se taj događaj okine izmeni izgled dokumenta tako da bude onakav kakav je hteo. Ovakav način razvoja poznat je kao imperativan, jer razvijač naređuje da se stvari dese onako kako je hteo. U suprotnosti sa time je deklarativan način razvoja, gde razvijač kaže kako dokument treba da izgleda u zavisnosti od nekog stanja i kako određeni događaji menjaju to stanje. Prebacivanjem subjekta izmene sa dokumenta na stanje, način funkcionisanja aplikacije postaje značajno jasniji. Ova apstrakcija donela je sa sobom i drugačiji način razmišljanja, fokusiran pretežno na stanje aplikacije, gde se između ostalog odbacuju neke paradigme objektno-orijentisanog programiranja, kao nasleđivanje.

Pored toga, React nudi mogućnost za korišćenje specijalne sintakse unutar JavaScript fajlova preko koje se deklarativna paradigma lakše izražava, zvane JSX. JavaScript fajlovi sa JSX sintaksom se označavaju ekstenzijom .jsx (za razliku od .js), pa se tako TypeScript fajlovi sa JSX sintaksom označavaju ekstenzijom .tsx.

React je odabran kao alat za razvoj frontend dela projekta zbog svoje masovne popularnosti, gorepomenutog deklarativnog načina razvoja kao i lake integracije sa ostalim frontend alatima (TypeScript i Webpack).

Webpack

Razvoj veb aplikacija se brzo menja. Funkcionalnosti JavaScript koje nisu bile dostupne juče mogu već danas završiti u standardu jezika, zahvaljujući trideset devetom ECMA komitetu (TC39). Pored toga, razvilo se dosta procedura kako bi razvijene stranice bile brže (minifikacija resursa), kako bi razvoj brže tekao (TypeScript, JSX), i kako bi aplikacije bile fleksibilnije. Za sve ove procedure razvijeni su alati koji ih realizuju, i kako bi se kompleksnost razvoja još dodatno umanjila razvijeni su alati koji te druge alate povezuju u svojevrstan cevovod (pipeline). Ranije, ti alati su bili nalik GNU make alatu, poput Gulp i Grunt. Danas, za to se obično koriste Webpack ili Vite.

Webpack je alat koji formira ceo pipeline od izvornog koda frontend dela aplikacije do krajnje serviranih fajlova. To izgleda otprilike na sledeći način:

1. Prevođenje React notacije (JSX) unutar TypeScript fajlova
2. Zamena promenljivih okruženja za njihove vrednosti u vreme pokretanja (koristi se za ubacivanje API URL-a)
3. Kompajliranje TypeScript u JavaScript
4. Spajanje više TypeScript i JavaScript modula u veće fajlove
5. Minifikacija resursa
6. Ubacivanje potrebnih resursa u HTML krajnje strane

Pored toga, Webpack takođe nudi mogućnost pokretanja razvojnog servera (kao za Ruby on Rails) koji automatski osvežava stranicu pri promenama izvornog koda.

Node.js

Iako se ne koristi direktno, većina gorepomenutih alata pokreće se preko Node.js. Node.js je okruženje za pokretanje JavaScript van veb pretraživača koje se često koristi i za pokretanje backend. Zasnovano je na istom JavaScript okruženju (V8) kao i pretraživači zasnovani na Chromium i sa njim dolazi i alat za instaliranje JavaScript biblioteka (npm).

U projektu se koriste Yarn i Node.js kako bi se ostali alati instalirali i pokrenuli.

Deployment

Docker

Svaka kompleksnija aplikacija ima svoje zahteve. Za pokretanje naše aplikacije zahtevi su, između ostalog,

• da korisnik ima Ruby instaliran,
• da korisnik ima Ruby on Rails instaliran,
• da korisnik ima Node.js instaliran,
• da korisnik ima Yarn instaliran,
• da korisnik instalira sve potrebne Ruby pakete,
• da korisnik instalira sve potrebne Node.js pakete,
• da korisnik izvrši komande za generisanje frontend dela…

…i tako dalje. Zahtevi su mnogobrojni, čak iako aplikacija spolja ne deluje toliko kompleksno. Za veće aplikacije ovaj broj zahteva značajno raste.

Docker je alat koji dozvoljava razvijačima neke aplikacije da celu aplikaciju zapakuju sa svojim okruženjem u jedan kontejner, kako bi potrebno podešavanje prilikom pokretanja aplikacije bilo minimalno. Potrebno je definisati način pravljenja kontejnera posebnim Docker komandama, počevši od toga na kojem okruženju se kontejner zasniva preko toga koji se fajlovi kopiraju i koje se komande pokreću, čak do ulančavanja više stadijuma pravljenja kontejnera.

Na projektu koristimo Docker kako bi nam olakšao pokretanje aplikacije između različitih računara, kao i pokretanje projekta na odbrani.

Docker-compose

Docker-compose je alat koji nam dozvoljava da lako kombinujemo više kontejnera, sa time da neke kontejnere preuzima sa Docker Hub. On je jednostavna zamena za pokretanje različitih Docker komandi zajedno i podešavanje se obavlja preko YAML fajlova.

GitHub Actions

GitHub Actions je mehanizam na GitHub kojim se dozvoljava pokretanje određenog koda na GitHub serverima nakon određenih akcija. U projektu ovaj mehanizam koristi se za Continuous Integration (CI) i Continuous Deployment (CD). Konkretno, za CI se pokreću testovi za backend i frontend tako da za svaki commit članovi razvojnog tima znaju da li su testovi uspešno prošli, a za CD se pokreću build i deploy poslovi tako da se za frontend automatski pokreće Webpack i rezultat šalje na Netlify, a za backend automatski pravi Docker kontejner i rezultat šalje na Azure Container Registry (ACR) odakle se vuče ka Azure App Service.

Azure App Service

Nekada su se aplikacije pokretale na oblaku tako što se iznajmi određeni kapacitet za server koji pokreće aplikaciju, na tom serveru instaliraju potrebni alati i pokrene aplikacija. Vremenom su kompanije koje nude servise u oblaku shvatile da se za ove svrhe mnogo više isplati da nude posebne usluge pokretanja pojedinih aplikacija umesto celih servera, jer je jeftinije i po resurse servera i po korisnike koje iznajmljuju te servise.

Azure App Service je servis na Azure platformi koji dozvoljava pokretanje veb aplikacija na Azure serverima. U projektu ga koristimo jer ima dobru podršku za pokretanje Docker kontejnera na vebu i jer preko studentskog naloga imamo pristup raznim Azure servisima.

Azure Blob Storage

Kako aplikativni serveri obično nemaju perzistentan fajl sistem, za svrhe pokretanja aplikacije na Azure u projektu će se koristiti Azure Blob Storage, servis na oblaku za čuvanje datoteka. Azure Blob Storage omogućava pristup datotekama preko javnih URL-ova, i takođe ima dobru podršku preko biblioteka za razne jezike.

Netlify

Originalni plan pri razvoju aplikacije bio je da se cela aplikacija servira preko Azure App Service. Nažalost, Azure App Service u svojoj pretplati za studente ne nudi mogućnost da se promeni adresa sajta sa koga se servira aplikacija, a nismo se zadovoljili adresom blurr.azurewebsites.net. Zbog ovoga, frontend deo aplikacije je odvojen od backend dela.

Netlify je servis koji nudi besplatno hostovanje statičkih sajtova kao što je naš frontend deo aplikacije. Ima mogućnost da hostuje pod bilo kojom domenom, lako se integriše sa GitHub repozitorijumom i potrebno je minimalno podešavanje kako bi aplikacija radila, pa ga zato koristimo u projektu.

Name.com

Name.com je servis na kom kao studenti (preko GitHub Student Pack) imamo mogućnost besplatne registracije sajtova pod određenim Top Level Domain (TLD) na određen period. Na projektu ga koristimo kako bismo registrovali svoju domenu blurr.social.