First, solve the problem. Then, write the code.

— John Johnson

Tehnoloģijas

Mēs iz­vē­la­mies mūs­die­nī­gas, pa­zīs­ta­mas un labi do­ku­men­tē­tas teh­no­lo­ģi­jas, kas at­vieg­lo pro­jek­ta iz­strā­di un uz­tu­rē­ša­nu. Dodam priekš­ro­ku at­vēr­tā koda (open source) rī­kiem un to pie­dā­vā­ta­jai elas­tī­bai.

Šīs sa­da­ļas mēr­ķis ir ne tikai uz­skai­tīt mūsu lie­to­tās teh­no­lo­ģi­jas, bet arī sniegt la­sī­tā­jam ne­lie­lu priekš­sta­tu par tām. Kaut gan pro­fe­sio­nā­ļi tās lieto, par dau­dzām no šīm teh­no­lo­ģi­jām ap­rak­stu lat­vie­šu va­lo­dā ir diez­gan grūti at­rast. Ce­rams, šis pār­skats pa­lī­dzēs jums sa­prast, kas slēp­jas aiz šiem jē­dzie­niem un ne­uz­ska­tīt to par ne­sap­ro­ta­mu ci­par­gal­vu va­lo­du.

Klien­ta puses rīki

Klien­ta puse ir tas, kas no­tiek ap­mek­lē­tā­ja pār­lū­kā. Tas ie­tver gan in­for­mā­ci­jas at­tē­lo­ša­nu un no­for­mē­ju­mu, gan arī da­žā­das iz­mai­ņas tajā, di­na­mis­ku un in­te­rak­tī­vu uz­ve­dī­bu. Pa­ma­tu pa­mats, pro­tams, ir HTML+CSS+Ja­vaScript, taču veik­smī­gā­kam un efek­tī­vā­kam dar­bam rei­zēm ir no­de­rī­gi iz­man­tot arī da­žā­dus sa­tva­rus un bib­lio­tē­kas.

HTML

Ik­kat­ras tī­mek­ļa lapas sa­turs tiek pa­sniegts ar HTML birku (tagu) pa­lī­dzī­bu, kas no­rā­da pār­lūkprog­ram­mai, kurš ele­ments ir vir­sraksts, kur ir teksts, kādu at­tē­lu ie­kļaut un pa­sniedz visu pā­r­ējo re­dza­mo un ne­re­dza­mo in­for­mā­ci­ju pār­lū­kam sa­pro­ta­mā veidā.

Mēs radām mo­der­nu kodu un iz­man­to­jam HTML dzīvo ver­si­ju — HTML5.

<figure class=section__figure>
	<HtmlSample />
	<figcaption 
		class=section__figcaption>
			Šīs ilustrācijas HTML
	</figcaption>
</figure>
Šīs ilustrācijas HTML

CSS

CSS ir va­lo­da, kurā ap­rak­sta lap­pu­ses no­for­mē­ju­mu. Tajā ap­rak­stā visu no iz­man­to­ja­mā burtvei­do­la un sim­bo­lu iz­mē­riem, līdz lapas iz­kār­to­ju­mam.

Ar šiem stila li­ku­miem var ne tikai de­fi­nēt sta­tis­ku iz­ska­tu, bet arī tā iz­mai­nī­ša­nos mi­jie­dar­bī­bas ga­dī­ju­mā (pie­mē­ram, lie­to­tā­jam uz­vir­zot peles kur­so­ru uz ele­men­ta). No­teik­tos ie­tva­ros CSS ļauj arī vei­dot ani­mā­ci­jas un ar CSS vei­do­tās ani­mā­ci­jas pa­ras­ti iz­man­to klien­ta da­to­ra re­sur­sus efek­tī­vāk nekā, pie­mē­ram, ar Ja­vaScript ie­kus­ti­nā­tie un pār­vei­do­tie ele­men­ti.

Mūs­die­nās CSS stan­dar­tam nav vien­as ver­si­jas, tas sa­da­līts mo­du­ļos. Pie­mē­ram, CSS tek­sta un krāsu mo­du­ļiem ir jau ce­tur­tā ver­si­ja, iz­kār­to­ju­ma rež­ģim otrā, bet ani­mā­ci­jām — pirmā.

Koda kva­li­tā­tes no­dro­ši­nā­ša­nai mēs pa­ras­ti pie­tu­ra­mies pie BEM me­to­do­lo­ģi­jas un 7-1 ar­hi­tek­tū­ras.

Animācijas avots šeit

CSS palīgrīki, satvari un metodika

Efek­tī­vā­kai CSS koda iz­strā­dei un vien­kār­šā­kai uz­tu­rē­ša­nai ļoti noder CSS priekš­pro­ce­so­ri, kuri no sis­te­mā­tis­kā­kas un īsā­kas va­lo­das sa­ga­ta­vo CSS kodu. Mēs savā darbā iz­man­to­jam SASS un LESS.

Vēl āt­rā­kai iz­strā­dei var iz­man­tot arī CSS sa­tva­rus, kas dod gan at­spē­rie­na pun­ktu CSS kodam, gan ve­se­lu lē­ru­mu jau ga­ta­vo ele­men­tu: pa­ne­ļus, pogas, for­mas, kar­ti­ņas utt. Pa­ras­ti šos sa­tva­rus iz­man­to­jam iek­šē­jām sis­tē­mām, kur di­zai­na ori­ģi­na­li­tā­tei nav no­zī­mes, bet rei­zēm tie ir iz­de­vī­gi arī kā pa­mats pub­lis­kam pro­jek­tam, ja tas nav pārāk liels. Vis­bie­žāk iz­man­to­jam Bootstrap vai Bulma.

Cilvēks, kas tur van Goga pašportretu priekšā savai sejai
Wei Ding attēls no Unsplash

JavaScript

Ja­vaScript ir va­lo­da, kurā var rak­stīt klien­ta pusē (t.i. pār­lūkprog­ram­mā) iz­pil­dā­mas ins­truk­ci­jas. Tieši Ja­vaScript ir tas, kas pa­da­ra ele­men­tus in­te­rak­tī­vus un ļauj lie­tot­nē veikt da­žā­das dar­bī­bas, ne­pār­lā­dē­jot visu lapu. Sava in­te­rak­ti­vi­tā­te ir arī HTML (piem. for­mas) un CSS (piem. rea­ģē­ša­na uz kur­so­ra po­zī­ci­ju), taču Ja­vaScript at­šķi­ras ar to, ka spēj rea­ģēt uz prak­tis­ki jeb­kā­du lie­to­tā­ja dar­bī­bu lapā, labot lapas sa­tu­ru un tā kodā ie­spē­jams pa­re­dzēt tieši va­ja­dzī­go lo­ģi­ku dar­bī­bu veik­ša­nai.

Arī bieži pie­sauk­tais AJAX ir viena no JS teh­ni­kām—in­for­mā­ci­jas ap­mai­ņa ar ser­ve­ri, ne­pār­lā­dē­jot lapu. Tas ļauj, pie­mē­ram, di­na­mis­ki pie­lā­got sa­skar­nes ele­men­tus un sniegt lie­to­tā­jiem re­zul­tā­tus jau mek­lē­ja­mā vārda rak­stī­ša­nas laikā. Lī­dzī­gā pJAX teh­ni­ka ir visa lapas sa­tu­ra no­mai­ņa, ne­pār­lā­dē­jot pašu lapu un ne­mai­nī­gos ele­men­tus (piem. iz­vēl­ni).

Mūs­die­nās JS tiek iz­man­tots arī ser­ve­ra pusē, ir arī sis­tē­mas, kur visa prog­ram­mē­ša­na no­tiek tikai JS.

Ilustrācija?

JavaScript bibliotēkas un satvari

jQuery — nu jau kla­sis­kais rīks ar kuru ērti un ātri pa­da­rīt viet­ni di­na­mis­ku nav sveša arī mums. jQuery ir Ja­vaScript bib­lio­tē­ka, kas at­vieg­lo ma­ni­pu­lā­ci­jas ar lapas sa­tu­ru. To iz­man­to­jam vi­dē­jas sa­rež­ģī­tī­bas sa­skar­nēs, kur ne­pie­cie­ša­mā in­te­rak­ti­vi­tā­te nav tik ērti rea­li­zē­ja­ma ar pliku Ja­vaScript, bet pro­jekts ne­pra­sa ve­se­la JS sa­tva­ra ie­vie­ša­nu.

Pro­jek­tos, kur ne­pie­cie­ša­ma sa­rež­ģī­tā­ka lie­to­tā­ja sa­skar­ne, iz­man­to­jam sa­tva­rus Vue.js un Svel­te/Sap­per. Tie ļauj no kom­po­nen­tēm vei­dot in­te­rak­tī­vas sa­skar­nes un spē­cī­gās lie­tot­nes, tai skai­tā prog­re­sī­vās tī­mek­ļa lie­tot­nes (PWA—prog­ressi­ve web ap­pli­ca­tions), ko var in­sta­lēt lie­to­tā­ja ie­rī­cēs un vien­as lapas lie­tot­nes (SPA—single page ap­pli­ca­tions), kurās sa­turs tiek pa­rā­dīts at­kār­to­ti iz­man­to­jot to pašu ie­tva­ru.

Arī šī viet­ne ir iz­strā­dā­ta Sap­per sa­tva­rā uz Svel­te bāzes un ir gan SPA, gan PWA.

Satiksmes konuss un norāde gājējiem
Casey Horner attēls no Unsplash

Pārlūkprogrammas

Pār­lūks ir viet­nes ap­mek­lē­tā­ja da­to­rā esoša prgram­ma, kas at­tē­lo viet­ni at­bil­sto­ši kodam. Pār­lū­kus mēs ne­iz­s­trā­dā­jam un ne­uz­tu­ram, taču tie ir ne­at­ņe­ma­ma mūsu darba sa­stāv­da­ļa. Diem­žēl, ap­mek­lē­tājs, kas iz­man­to In­ter­net Explorer 7, ne­spēs iz­man­tot dau­dzas no mūs­die­nu tī­mek­ļa ie­spē­jām.

Taču arī mūs­die­nu pār­lū­ki vienu un to pašu kodu in­ter­pre­tē da­žā­di. Pār­lū­kiem, kas iz­man­to at­šķi­rī­gus dzi­nē­jus(Gecko, Blink, WebKit, Tri­dent/EdgeHTML), pat mēdz at­šķir­ties va­lo­da, lai veik­tu to pašu dar­bī­bu.

Mēs pa­ras­ti ga­ran­tē­jam ko­rek­tu viet­nes darbu un at­tē­lo­ša­nu Firefox, Chro­me, Edge, Sa­fa­ri pār­lū­ku ak­tuā­la­jās ver­si­jās un to mo­bi­la­jos ana­lo­gos. Taču paši iz­man­to­jam un pro­jek­tus pār­bau­dām arī tādos pār­lū­kos kā Vi­val­di, Brave, Tor, Opera.

Ilustrācija?

Servera puses tehnoloģijas

Jeb­ku­rai viet­nei ne­pie­cie­šams to pa­snie­dzošs ser­ve­ris, lai klien­tiem tā būtu pie­eja­ma. Vai­rums mūsu iz­strā­dā­to pro­jek­tu ir di­na­mis­ki, tāpēc pa­pil­dus HTTP ser­ve­rim iz­man­to­jam arī da­tu­bā­zes, skrip­tu va­lo­das un citus rīkus, kas klien­tam nav tieši pie­eja­mi, bet aiz priekš­ka­ra sa­ga­ta­vo at­rā­dā­mo sa­tu­ru.

Mi­ti­nā­ša­nai pa­ras­ti ie­sa­kām Linux ser­ve­rus (paši lie­to­jam Ubun­tu Ser­ver) ar Ap­ache vai Nginx prog­ram­ma­tū­ru. Pa­ras­ti iz­vē­la­mies un arī klien­tiem ie­sa­kām Ma­riaDB vai MySQL da­tu­bā­zes. At­bil­sto­ši pro­jek­tu va­ja­dzī­bām esam strā­dā­ju­ši arī ar dau­dzām citām sis­tē­mām, pie­mē­ram, Node.js ser­ve­riem, Oracle un Postgres datu bāžu pār­val­dī­bas sis­tē­mām.

PHP

PHP ir prog­ram­mē­ša­nas va­lo­da, kurā rak­stī­tos skrip­tus iz­pil­da tī­mek­ļa ser­ve­ris. Tā jop­ro­jām ir vis­po­pu­lā­rā­kā va­lo­da šai no­za­rē un tiek lēsts, ka tā dar­bi­na ve­se­lus 79% tī­mek­ļa viet­ņu.

PHP mēs iz­man­to­jam, lai no da­tiem un šab­lo­niem sa­ga­ta­vo­tu ap­mek­lē­tā­jam rā­dā­mo sa­tu­ru. Tāpat to iz­man­to­jam arī, lai at­bil­dē­tu uz di­na­mis­kiem pie­pra­sī­ju­miem (pie­mē­ram, lie­to­tājs veic la­bo­ju­mu kādā tek­stā, pie­vie­no ko­men­tā­ru), kur in­for­mā­ci­ja tiek no­sū­tī­ta un/vai sa­ņem­ta bez lapas pār­lā­des, kā arī au­to­ma­ti­zē­tiem uz­de­vu­miem un star­psis­tē­mu sa­zi­ņai.

Tieši ar PHP pa­ras­ti vei­cam vis­lie­lā­ko darba daļu, jo in­for­mā­ci­jas sis­tē­mās lie­lā­kā darba daļa ir lo­ģi­ka un au­to­ma­ti­zā­ci­ja, ko veic ser­ve­ris.

Ilustrācija?

Laravel

La­ra­vel ir PHP sa­tvars — prog­ram­ma­tū­ras plat­for­ma, kas vei­ci­na struk­tu­rē­tu koda or­ga­ni­zā­ci­ju un pie­pra­sī­ju­mu ap­strā­di, kā arī sniedz dau­dzas jau ga­ta­vas kom­po­nen­tes, kas pa­āt­ri­na pro­jek­tu iz­strā­di. Mūs­die­nās tas ir pār­lie­ci­no­ši po­pu­lā­rā­kais PHP sa­tvars un, iz­man­to­jot to ko­rek­ti, lie­tot­nes var ātri iz­strā­dāt, vieg­li uz­tu­rēt un droši pa­pla­ši­nāt.

Ilustrācija?

Datubāzes

Ne­at­ņe­ma­ma in­for­mā­ci­jas sis­tē­mu sa­stāv­da­ļa ir datu bāze. Pa­ras­ti iz­man­to­jam re­lā­ci­ju da­tu­bā­zes, kurās at­se­viš­ķās ta­bu­lās eso­šie dati ir sav­star­pē­ji sa­is­tī­ti (pie­mē­ram, dar­bi­nie­kiem ir pie­sais­tī­ti amati no amatu sa­rak­sta).

Pa­ras­ti iz­man­to­jam at­vēr­tā koda re­lā­ci­ju da­tu­bā­žu va­dī­bas sis­tē­mas Ma­riaDB un MySQL.

Ne­bai­dā­mies iz­man­tot arī ne­struk­tu­rē­tus datus, ko JSON for­mā­tā sa­gla­bā­jam vai nu at­se­viš­ķā NoSQL (ne-​relāciju) da­tu­bā­zē, vai tur pat re­lā­ci­ju da­tu­bā­zē pie at­bil­sto­šā ie­rak­sta. Šādos ga­dī­ju­mos iz­man­to­jam arī PostgreSQL un redis da­tu­bā­zes.

Ilustrācija?

HTTP serveri

Arī ser­ve­ris, kas sa­ga­ta­vo re­sur­sus, iz­sauc PHP koda iz­pil­di un no­sū­ta at­bil­di klien­tam ir bū­tis­ka sis­tē­mas sa­stāv­da­ļa.

Paši po­pu­lā­rā­kie tī­mek­ļa ser­ve­ri ir Nginx un Ap­ache. Arī mēs pa­ras­ti iz­man­to­jam tieši kādu no tiem.

Pa­pil­dus mē­dzam at­se­viš­ķos pro­jek­tos (pie­mē­ram, šajā viet­nē) ek­spe­ri­men­tēt ar Node.js, kas ser­ve­ra pusē strā­dā ar Ja­vaScript kodu.

Ilustrācija?

Serveri

Vien­kār­šu pro­jek­tu mi­ti­nā­ša­nai ie­sa­kām sta­tis­ku viet­ņu mi­ti­nā­tā­jus kā GitHub Pages un da­lī­to hos­tin­gu, kur iz­man­to­jam Area IT (sa­dar­bī­bas saite). Lie­lā­kiem pro­jek­tiem ie­sa­kām in­di­vi­duā­lu mi­ti­nā­ša­nu klien­ta in­fras­truk­tū­rā vai īrē­tos pri­vā­ta­jos ser­ve­ros, kurus paši pa­ras­ti ņemam pie Vultr un Di­gi­ta­lO­cean.

Gan­drīz vien­mēr iz­man­to­jam vir­tuā­lus ser­ve­rus, kas at­vieg­lo teh­nis­ko iz­mai­ņu veik­ša­nu, mai­no­ties biz­ne­sa pra­sī­bām. No ope­rē­tājsis­tē­mām iz­vē­la­mies Linux, vis­bie­žāk — Ubun­tu Ser­ver, kas no­dro­ši­na līdz­sva­ru starp Linux ie­spē­jām un la­bā­ku pa­zīs­ta­mī­bu arī ne­re­gu­lā­riem lie­to­tā­jiem.

Ilustrācija?

Citi rīki

Darba gaitā iz­man­to­jam arī dau­dzus citus in­dus­tri­jā pa­zīs­ta­mus rīkus, kas tieši ne­ie­tek­mē pro­duk­tu, taču ir bū­tis­ki kva­li­ta­tī­vai darba gai­tai, uz­tu­ra­mī­bai un ie­spē­jām pro­jek­tus pār­ņemt.

Lie­to­jam pa­kot­ņu (koda frag­men­tu/bib­lio­tē­ku) pār­val­dnie­kus Com­po­ser un npm. Ja­vaScript un CSS datņu sa­ga­ta­vo­ša­nai tieši un pa­star­pi­nā­ti lie­to­jam pa­ko­tā­ju webpack.

Sta­bi­li­tā­tei iz­mai­ņu ga­dī­ju­mā ir ne­pie­cie­šams, lai kods būtu iz­tes­tēts, kam iz­man­to­jam tes­tē­ša­nas ie­tva­ru phpu­nit, sa­vu­kārt ie­spē­ju at­griez­ties pie ie­priek­šē­jās koda ver­si­jas mums no­dro­ši­na ver­si­ju kon­tro­les sis­tē­ma git un mi­ti­nā­ša­nas plat­for­ma GitHub.

Esam ie­cie­nī­ju­ši šo ikonu ģe­ne­ra­to­ru.

Ilustrācija?

Citas pazīstamas tehnoloģijas

Ie­priekš uz­skai­tī­tas teh­no­lo­ģi­jas, kuras ir mūsu pirmā iz­vē­le, taču reā­los pro­jek­tos nākas strā­dāt arī ar ci­tiem rī­kiem. Ne­va­ram ap­gal­vot, ka visas šīs teh­no­lo­ģi­jas pār­val­dām augstā lī­me­nī, taču mūsu ko­man­dai ir lie­lā­ka vai ma­zā­ka pie­re­dze arī ar šīm teh­no­lo­ģi­jām un ne­bai­dā­mies no pro­jek­tiem, kuros jā­sas­ka­ras arī ar tām.

Esam strā­dā­ju­ši uz Windows ser­ve­riem un da­žā­dām Linux dis­tri­bū­ci­jām (De­bian, open­SU­SE). Lie­los pro­jek­tos, kas ne­sā­kas no bal­tas lapas, nākas sa­strā­dā­ties ar MSSQL un Oracle da­tu­bā­zēm. Ver­si­ju kon­tro­lei esam lie­to­ju­ši Sub­ver­sion/SVN.

Mē­dzam iz­strā­dāt pa­pil­di­nā­ju­mus un iz­mai­ņas arī pro­jek­tiem, kas iz­strā­dā­ti fo­ru­mu sis­tē­mā phpBB vai sa­tu­ra va­dī­bas sis­tē­mā WordPress.