Anna Matuła

Słowniczek dla juniora front-endu.

Witaj w świe­cie fron­tendu.W pro­gra­mo­wa­niu można wyod­ręb­nić dwie główne gałę­zie wyzna­cza­jące kie­runki roz­woju przy­szłego pro­gra­mi­sty. Jest to front-end i back-end.

W dużym uprosz­cze­niu tech­no­lo­gia fron­ten­dowa odpo­wiada za pobie­ra­nie danych od użyt­kow­nika i prze­ka­za­nie ich do back endu. Ści­ślej mówiąc front-end zaj­muje się wytwa­rza­niem opro­gra­mo­wa­nia od strony gra­ficz­nej (znaj­du­ją­cej się po stro­nie użyt­kow­nika) – tzw. inter­fejsu.

Back-end nato­miast to zbór tech­no­lo­gii, które są uru­cha­miane po stro­nie ser­wera, obsłu­guje dane. Te z kolei są prze­twa­rzane w sys­te­mie, zapi­sy­wane i następ­nie odczy­ty­wane w bazie danych.

W artykule sku­pimy się na pod­sta­wo­wych zagad­nie­niach i poję­ciach zwią­za­nych z tech­no­lo­gią fron­ten­dową.

Ajax — umożliwiająca użytkownikom transport częściowych danych bez potrzeby przeładowania całej strony.

Angu­lar – java­scrip­towy roz­wi­jany przez Google’a, jest oparty o TypeScript (nadz­biór JavaScriptu). Zawiera kon­cep­cje i wzorce do two­rze­nia apli­ka­cji.

Api — interfejs programistyczny aplikacji.

Biblio­teka — narzę­dzia wcho­dzące w skład fra­me­worku, uspraw­nia­jące pracę pro­gra­mi­sty.

Com­mit – znacz­nik komu­ni­katu, który infor­muje o zmia­nach kodu wpro­wa­dzo­nych do repo­zy­to­rium.

CSS – kaska­dowe arku­sze sty­lów, podob­nie jak HTML służy do przed­sta­wie­nia tre­ści strony, pozwala zwi­zu­ali­zo­wać treść. Za pomocą CSS możemy decy­do­wać m.in. o roz­mia­rze czcionki, jej kolo­rze i rodzaju. Okre­ślamy też mar­gi­nesy, kolor tła, odstępy mię­dzy wier­szami oraz pozy­cję na stro­nie.

Budowa arku­sza sty­lów:
selek­tor {wła­ści­wość: war­tość}

Deploy­ment - insta­la­cja i uru­cho­mie­nie apli­ka­cji np. po stro­nie klienta

DOM — Obiek­towy model doku­mentu, pre­zen­tuje doku­menty XML i HTML w postaci modelu obiek­to­wego nie­za­leż­nie od języka pro­gra­mo­wa­nia czy plat­formy. Łączy język pro­gra­mo­wa­nia ze stroną inter­ne­tową. Ma formę tzw. drzewa zawie­ra­ją­cego znacz­niki, atry­buty, tekst, na któ­rym można wyko­ny­wać poszcze­gólne ope­ra­cje.

Fra­me­work - jest pod­stawą, szkie­le­tem przy two­rze­niu apli­ka­cji, uspraw­nia­jący pisa­nie kodu przez pro­gra­mi­stę.

GIT — sys­tem kon­troli wer­sji kodu.

GITHUB — zdalne repo­zy­to­rium, w któ­rym pro­gra­mi­ści mogą dzie­lić się swo­imi pro­jek­tami two­rzo­nymi w róż­nych tech­no­lo­giach.

HTML (5) – naj­prost­szy, pod­sta­wowy szkie­let, na któ­rym oparta jest strona inter­ne­towa. Umiesz­czone w nim poszcze­gólne tagi poza­wa­lają na kon­kretne roz­miesz­cze­nie ele­men­tów na stro­nie. Możemy wyróż­nić menu strony, tytułu, pod­ty­tułu, arty­kułu, sek­cji pobocz­nej czy wresz­cie stopki, która znaj­duje się na dole strony.

JavaScrip­t/ES6 – język skryp­towy, który powstał w 1995 r. Jest języ­kiem typowo fron­ten­do­wym. Nato­miast EcmaScript (ES) to doku­ment mający na celu stan­da­ry­za­cję tego języka. Obec­nie naj­ak­tu­al­niej­szą wer­sją jest ES6, który powstał w 2015 r.

Kaska­do­wość — ustala pierw­szeń­stwo. Jest to kolej­ność w oddzia­ły­wa­niu sty­lów na te same ele­menty strony z róż­nych miejsc (źró­deł na stro­nie). Style mogą wystę­po­wać w nagłówku lub są bez­po­śred­nio w kodzie strony jako atry­but znacz­nika. Mogą być glo­balne dla całego doku­mentu. Umiesz­czane są w osob­nym pliku zewnętrz­nym, co pozwala na zacho­wa­nie więk­szej czy­sto­ści kodu.

Pre­pro­ce­sory LESS i SASS — roz­sze­rzają CSS o nowe wła­ści­wo­ści, funk­cje i zmienne. Popra­wiają przej­rzy­stość i czy­tel­ność kodu.

React — popu­larna biblio­teka wyko­rzy­sty­wana do two­rze­nia inter­fej­sów gra­ficz­nych stron inter­ne­to­wych lub apli­ka­cji two­rzo­nych za pomocą języka JavaScript. React umoż­li­wia jed­no­kie­run­kowy prze­pływ danych i budo­wa­nie apli­ka­cji za pomocą kom­po­nen­tów. Został stwo­rzony przez Face­book.

Selek­tor— część stylu poprze­dza­jąca otwie­ra­jący nawias klam­rowy.

Tagi — znacz­niki (patrz wyżej-> HTML (5)), które umiesz­cza się w nawia­sach otwie­ra­jących i zamy­ka­ją­cych:

< > < / >

header – nagłó­wek.

nav – menu (nawi­ga­cja strony).

article – zawiera zestaw ele­men­tów two­rzących arty­kuł, czyli np. tytuł wraz z blo­kiem tek­stu.

sec­tion– zawar­tość głów­nej czę­ści strony

aside – część strony, która jest uzu­peł­nie­niem głów­nej jej struk­tury.

footer – stopka, która zamyka stronę.

UX User (Expe­rience) – dzie­dzina nauki, która sku­pia się na doświad­cze­niach użyt­kow­nika. Zbiór zasad potrzeb­nych do two­rze­nia apli­ka­cji czy stron w spo­sób przy­ja­zny i intu­icyjny dla użyt­kow­nika.

Vue.js – fra­me­work do two­rze­nia inter­fejsu, sku­piający się głów­nie na war­stwie wyświe­tla­nia. Jest naj­now­szy spo­śród wszyst­kich tu wymie­nio­nych fra­me­worków.