Wstęp do front-endu — słowniczek

By 12 stycznia 2018Projekt Bilet

Zan­im prze­jdziemy do kodowa­nia i uży­wa­nia narzędzi w prak­tyce, zaprasza­my Cię do wpisu, który przed­stawi narzędzia, bib­liote­ki, frame­wor­ki i kon­cep­ty związane z tworze­niem front-endu. Wpis ten potrak­tu­j­cie jako zajawkę, bo o wielu tech­nolo­giach wspo­mi­anych tutaj będziemy również pisać szerzej, a przede wszys­tkim stosować w prak­tyce.

Oczy­wiś­cie, to co zobaczy­cie poniżej to jedynie wybrane i pop­u­larne z nich (możli­woś­ci jest znacznie więcej, a front-end jest super dynam­iczną dziedz­iną pro­gramowa­nia, która zmienia się bard­zo szy­bko). Gotowi?

Czym jest front-end?

Zaczni­jmy od pod­stawy pod­staw, czyli rozróżnienia front-endu od back-endu :) Chy­ba najproś­ciej powiedzieć, że front-end to wszys­tko, co widzi użytkown­ik i z czego korzys­ta przeglą­dar­ka, pod­czas gdy back-end to warst­wa ser­werowa aplikacji (a więc zapis, obrób­ka danych, więk­szość logi­ki biz­ne­sowej). I jeśli chodzi o konkretne przykłady takich warstw, to moż­na śmi­ało zauważyć ten­denc­je do ich rozdziela­nia od siebie. Patrząc nawet z per­spek­ty­wy tech­nologii javowych, jeszcze kil­ka lat temu aplikac­ja webowa “all-in-1” z uży­ciem JSP czy JSF jako warsty widoku, była częs­to wybier­anym rozwiazaniem, tak ter­az, o wiele więcej aplikacji jest tak naprawdę, nie jed­ną, a dwoma (kilko­ma) różny­mi aplikac­ja­mi, gdzie front-end stanowi odręb­ny projekt/odrębną aplikację.  Taki pro­jekt komu­niku­je się z back-endem za pomocą RESTowego API (i w taki sposób będziemy właśnie imple­men­tować nasze rozwiązanie). Front-end to nie tylko “wyświ­et­lanie wyników” z back-endu, ale też odpowied­nie pro­jek­towanie inter­fe­j­su i doświad­czeń użytkown­i­ka (a więc UI/UX), a także biz­ne­sowe wyma­gania jak np. wal­i­dac­je, fil­trowanie, wyszuki­wanie (część z tych zachowań będzie obsługi­wana (lub dodatkowo obsługi­wana) w warst­wie front-endowej naszej aplikacji. W zależnoś­ci od firmy, czy pro­jek­tu obow­iąz­ki pro­gramisty front-endowego będą różne, albo zami­ast szty­wnego podzi­ału na back-end czy front-end, będziesz po pros­tu zatrud­niony na stanowisku full-stack devel­op­er (moż­na dostrzec, że obec­nie przy­by­wa takich właśnie stanowisk).

Poz­wolę sobie tutaj na małe wtrące­nie do początku­ją­cych widzą­cych to ostat­nie zdanie — jeśli dopiero zaczy­na­cie naukę pro­gramowa­nia, zde­cy­dowanie radz­imy Wam skupi­e­nie się na jed­nej z tych dwóch wartstw. To znacznie ułatwi Wam naukę, przyśpieszy pro­ces do znalezienia pier­wszej pra­cy, a potem naucze­nie się “tego drugiego” z doświad­cze­niem np. w back­endzie, powin­no być znacznie łatwiejsze. Dlat­ego, w naszym pod­sta­wowym kur­sie javy zobaczy­cie, że warst­wa wiz­ual­na jest opra­cow­ana za pomocą JSP — głown­ie po to, by “była możli­wa”, a z drugiej strony nie utrud­ni­ała (nie dok­ladała za dużo nowych infor­ma­cji). Na start, sam back-end, czy sam front-end jest naprawdę ok.

Słowniczek

HTML

HTML pozwala Ci na dodat­nie treś­ci do two­jej aplikacji, za pomocą spec­jal­nych tagów.… ale, pisal­iśmy  już o nim więcej we wpisie: Pod­stawy HTM­La, do którego Cię serdecznie zaprasza­my.

Dodatkowe mate­ri­ały do nauki/zapoznania się z nim to:

  • https://developer.mozilla.org/en-US/docs/Web/HTML
  • https://pl.khanacademy.org/computing/computer-programming/html-css/

CSS

CSS (ang. Cas­cad­ing Style Sheet) czyli kaskad­owe arkusze stylów to język służą­cy do opisu prezen­tacji treś­ci na stronach WWW. Podob­nie jak w przy­pad­ku HTML, zna­jdziesz o nim osob­ny wpis na naszym blogu! 

Możesz jeszcze spotkać się z ter­mi­na­mi LESS  i SASS, to pre-pro­ce­so­ry CSSa, które to rozsz­erza­ją go o nowe właś­ci­woś­ci, zmi­enne, funkc­je. Kod zapisany z ich pomocą jest bardziej czytel­ny. Porów­nanie obu tych narzędzi zna­jdziecie tutaj.

Single-page Application

To taka aplikac­ja, która  zmienia swo­je treś­ci pod wpły­wem dzi­ałań użytkown­i­ka bez koniecznoś­ci ponownego załad­owa­nia. W ten właśnie sposób tworzy się współczesne aplikac­je, bo zapew­nia to znacznie lep­szy user expe­ri­ence (użytkown­ik nie musi czekać na załad­owanie całej strony od nowa, a np. dosta­je komu­nikat bądź load­ing bar/mill, w cza­sie wykony­wa­nia zapy­tań do API.

DOM

DOM (Doc­u­ment Object Mod­el — obiek­towy mod­el doku­men­tu), sposób reprezen­tacji doku­men­tów xml i html w postaci mod­elu obiek­towego, który jest nieza­leżny od plat­formy i języ­ka. Mod­el ten to drze­wo, a każdy jego węzeł to obiekt przed­staw­ia­ją­cy inną część doku­men­tu.

UX

Nie sposób mówić o współczes­nym front-endzie nie wspom­i­na­jąc User Expe­ri­ence, czyli nau­ki sku­pi­onej wokół doświad­czeń użytkown­i­ka. Współczesne aplikac­je bard­zo duży nacisk kładą na użyteczność i pozy­ty­wne doświad­czenia użytkown­i­ka, tak by korzys­tanie z nich spraw­iało przy­jem­ność i satys­fakc­je.

Więcej infor­ma­cji zna­jdziecie w artykułach poniżej:

Języki skryptowe

Języ­ki skryp­towe to języ­ki, które nie wyma­ga­ją kom­pi­lacji przed uru­chomie­niem. Pro­gramy napisane w ten sposób to właś­ci­wie pli­ki tek­stowe (i tak, moż­na je edy­tować nawet w notat­niku), uruchamia się je za pomocą dodatkowego pro­gra­mu (inter­pretera / sil­ni­ka skryp­towego) i w momen­cie uru­chomienia tekst (kod) jest inter­pre­towany (zamieni­any na postać zrozu­mi­ałą dla kom­put­era i wykony­wany). Zaletą tego pode­jś­cia jest to, że może­my szy­bko zobaczyć efek­ty zmi­an (po zmi­an­ie wystar­czy odświeżyć stronę czy uru­chomić ponown­ie i od razu widz­imy zmi­any). Minusem jest, że o błę­dach w kodzie (np. w skład­ni) dowiemy się (najczęś­ciej) dopiero w momen­cie uruchami­a­nia tego konkret­nego frag­men­tu kodu, co utrud­nia szukanie błędów. Drugim minusem, który jed­nak nie będzie prob­le­mem w więk­szoś­ci przy­pad­ków, jest mniejsza wyda­jność takich aplikacji. W ogól­nym przy­pad­ku jed­nak w językach skryp­towych pisze się szy­b­ciej, ale lep­iej sprawdza­ją się w prost­szych aplikacjach/projektach.

Do takich języków zal­icza­my: Perl, JavaScript, PHP, Python, Type­Script, Cof­fee­Script.

JavaScript, ES6, CoffeeScript, TypeScript

JavaScript(JS) to język skryp­towy, który pow­stał w 1995 roku. Pod koniec lat 90. ECMA zaczęła pracę nad specy­fikacją (standaryza­cją języ­ka) i tak pow­stał  ECMAScript, który jest wer­sjonowanym stan­dar­d­em (czyli doku­men­tac­ja ECMAScript powie Ci jak stworzyć język pro­gramowa­nia (jej uży­wa właśnie JavaScript), a doku­men­tac­ja JavaScript pod­powie jak napisać aplikac­je z uży­ciem tego języ­ka). To co różni go np. od Javy to to, że jest słabo­ty­powany, czyli tworząc zmi­en­ną nie musisz deklarować jej typu.

Być może spotkaliś­cie się z opini­a­mi, że w JavaScrip­cie moż­na zro­bić wszys­tko, że brak tam wzor­ców, czy dobrych prak­tyk. Było to na pewno prawdzi­we do cza­su gdy opub­likowany został ES6 (ECMAScript 2015), który zmienił sporo w tej materii. Współczes­ny JavaScript nie tylko wymusza stosowanie dobrych prak­tyk, ale też daje do tego narzędzia. Dlat­ego współcześnie ucząc się JavaScrip­tu czy szuka­jąc odpowied­niej doku­men­tacji wpisuj raczej ES6 niż JavaScript! Przykład­owe zmi­any, które wprowadz­ił ES6 może­cie znaleźć tutaj: https://webapplog.com/es6/.

Równole­gle do standaryza­cji języ­ka, pojaw­iały się języ­ki, które miały ułatwić ustandary­zować pisanie w JavaScrip­cie (a także zwięk­szyć czytel­ność kodu), a ich najpop­u­larniejsze przykłady to Cof­fee­Script i Type­Script.

Cof­fee­Script to język, który kom­pilu­je się do JavaScrip­tu, a jego głownym założe­niem było “It’s just JavaScript”. Pow­stał on w 2009 roku, przed­staw­ił w swo­jej skład­ni języ­ka m.in. arrow oper­a­tors, a w porów­na­niu do JavaScrip­tu jest znacznie bardziej “zwięzły”.

Z kolei Type­Script został stwor­zony przez Microsoft (pier­wsza wer­s­ja opub­likowana została w 2012 roku) jako nadzbiór JavaScrip­tu (co oznacza, że kod JavaScrip­towy jest w pełni poprawnym kodem Type­Scrip­tu). To, co głown­ie ofer­ował, to moc­ne typowanie, klasy, czy inter­fe­jsy (dobre przed­staw­ie­nie jego cech zna­jdziecie tutaj: https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript), również kom­pilu­je się do kodu javascrip­towego, ale ma wykry­wanie błędów w cza­sie kom­pi­lacji . Język ten był i jest sil­nie wspier­any przez środowisko Angu­lara oraz fir­mę Microsoft.

Który z nich jest lep­szy? Oczy­wiś­cie nie ma na to pytanie jed­noz­nacznej odpowiedzi i dużo wyni­ka z prefenecji czy przyzy­cza­jeń dewel­opera, albo z drugiej strony wyma­gań pro­jek­tu czy firmy.

Dodatkowe Lin­ki:

Babel

Babel to narzędzie do tran­spilin­gu kodu napisanego np. w ES6/ES7 (współczes­ny stan­dard JavaScript) do ECMAScript 5 (wer­s­ja stan­dar­du obsługi­wana przez prak­ty­cznie wszys­tkie przeglą­dar­ki, nawet te nieak­tu­al­i­zowane od kilku lat), które jest współcześnie najsz­erzej ‘rozu­mi­ane’ przez przeglą­dar­ki. Jest to spec­jal­ny rodzaj ‘kom­pi­lacji’, którą może­my zdefin­iować jako zami­anę kodu w jed­nym języku, na kod w drugim. Tran­spiling to właśnie zami­ana kodu napisanego w jed­nym języku (lub wg określonego stan­dar­du) na inny język o podob­nym poziomie abstrakcji (moż­na o tym myśleć jako o ‘tłu­macze­niu’ kodu na tylko trochę inny język; w prze­ci­wieńst­wie do kom­pi­lacji, która zamienia kod na język maszynowy).

Popularne Frameworki i biblioteki JavaScriptowe

Pakiet / biblioteka

(ang.package/library) to reuży­wal­ny kod, który możesz pobrać z inter­ne­tu, i wyko­rzys­tać w swoim pro­jek­cie. Niek­tóre bib­liote­ki będą korzys­tać z innych w swoim kodzie, więc jeśli będziesz ich uży­wać, będziesz również potrze­bował zależnoś­ci do nich.

Poniżej zna­jdziecie krótkie opisy najpop­u­larniejszych frame­worków i bib­liotek współcześnie stosowanych z JavaScriptem. Oczy­wiś­cie, jest ich znacznie więcej, a poniższe infor­ma­c­je to tylko bard­zo krótkie intro z odnośnika­mi do doku­men­tacji.

React

Bib­liote­ka stwor­zona przez Face­book, głownym założe­niem jest dwukierunk­owy przepływ danych w cyk­lu:

  1. Na pod­staw­ie danych wejś­ciowych w kom­po­nen­tach (props), jeśli dane się zmieniły warunk­owo ren­deru­je DOM (lub jego częś­ci). Jest to możli­we, ponieważ React uży­wa tzw. Vir­tu­al DOM, o którym więcej przeczy­tasz tutaj (https://www.codecademy.com/articles/react-virtual-dom).
  2. Obsłu­ga even­tów, po wyren­derowa­niu DOMa React delegu­je even­ty do event lis­ten­era. Na ich pod­staw­ie moż­na zak­tu­al­i­zować dane w odpowiedzi (response).
  3. Jeśli dane zostały zmienione za pomocą even­tu, pro­ces powraca do 1.

React korzys­ta też z JSX, czyli nakład­ki na JavaScript umożli­wia­jącej m.in. zaw­ieranie kodu HTML bezpośred­nio w JavaScrip­towym kodzie. Założe­niem Reac­ta jest też tworze­nie i reuży­wanie kom­po­nen­tów reprezen­tu­ją­cych ele­men­ty, z których twor­zone są wido­ki.

Angular

Angu­lar to javascrip­towy frame­work opar­ty o Type­Script. Obec­na wer­s­ja to Angu­lar 4 (warto dodać, że pier­wsza wer­s­ja czyli Angular.js znacznie różni się od Angu­lar 2, ale 2 od 4 już nie tak bard­zo, zwróć na to uwagę przy wyszuki­wa­niu tuto­ri­ali!). Jest on rozwi­jany przez Google’a. Angu­lar przed­staw­ia wiele koncepcji/wzorców odnośnie tworzenia aplikacji. Mamy więc pary kom­po­nent-kon­tol­er, odpowiedzialne za wyświ­et­lanie widoków, a także mod­uły czy ser­wisy… Po więcej info na ten moment może­my odesłać Was do doku­men­tacji, lub tego godzin­nego wideo: https://www.youtube.com/watch?v=KhzGSHNhnbI

Vue.js

Vue (czy­taj tak jak ang. view) to frame­work do budowa­nia UI. Głow­na bib­liote­ka sku­pia się tylko na warst­wie wyświ­et­la­nia, co pozwala w łatwy sposób dodać ją do Two­jego pro­jek­tu. Jest to sto­sunkowo mło­da tech­nolo­gia, która wyróż­nia się (podob­no, bo jeszcze nie sprawdzil­iśmy na włas­nej skórze) łat­woś­cią w nauce i lakkoś­cią (nie jest to wiel­ki frame­work jak np. Angu­lar).

Na pytanie który frame­work wybrać nie ma chy­ba jed­noz­nacznej odpowiedzi ;) To zależy od wielu czyn­ników, o których może­cie przeczy­tać w kilku poniższych artykułach.

Obo­je na codzień w mniejszym lub więk­szym stop­niu korzys­tamy z Reac­ta i naszym zdaniem ( z punk­tu widzenia Full-Stack­/Back-end Engi­neerów) jest on bard­zo spoko :)

Poza tym warto wspom­nieć o bib­liotekach:

Jasmine

To bib­liote­ka do testowa­nia JavaScrip­tu, która korzys­ta z BDD. Jest nieza­leż­na od frame­worków i posi­a­da bard­zo prostą i czytel­ną skład­nię.

Selenium

Sele­ni­um umożli­wia tworze­nie automaty­cznych testów symu­ju­ją­cych zachowanie użytkown­i­ka w przeglą­darce.

Immubtable.js

Bib­liote­ka, która udostęp­nia niezmi­enne kolekc­je i obiek­ty.

Redux

Bib­liote­ka do zarządza­nia stanem w aplikacji (np. sze­roko wyko­rzysty­wana w pro­jek­tach reac­towych).

A dla spragnionych jeszcze więk­szej iloś­ci ciekawych bib­liotek pole­camy poniższe lin­ki:

Narzędzia

Zależność

(ang. depen­den­cy) są to wszys­tkie bib­liote­ki z których korzys­ta Twój pro­jekt, bezpośred­nio, lub pośred­nio (gdy bib­liote­ka której uży­wasz, wyma­ga innej do praw­idłowego dzi­ała­nia).

Pakiet manager

(ang. pack­age man­ag­er) to narzędzie pozwala­jące na korzys­tanie z bib­liotek opub­likowanych w internecie. Pozwala ono na zarządzanie bibliotekami/pakietami, czyli  pobranie odpowied­nich ich wer­sji, dzię­ki czemu twój pro­jekt może z nich korzys­tać.

Repozytorium pakietów

To miejsce w sieci, gdzie pub­likowane są bib­liote­ki i frame­wor­ki. Takie pro­jek­ty zawarte są potem w tzw. pack­age reg­istry (czyli, rejestrze paki­etów) i dostęp­ne do zaim­por­towa­nia przez inne pro­jek­ty.

Przykłady narzędzi: 

  • npm — open-Sour­cowe repozy­to­ri­um pakietów/pakiet man­ag­er dla JavaScript.
  • yarn  -paki­et man­ag­er dla pro­jek­tów JavaScript, który korzys­ta z repozy­to­ri­um npm.

Porów­nanie obu zna­jdziecie tutaj: https://www.keycdn.com/blog/npm-vs-yarn/

Task runner

to narzędzie pozwala­jące na automatyza­c­je zadań  związanych z codzi­en­ną pracą z kodem. Takie zada­nia to np. sprawdzanie, czy pli­ki się nie zmieniły, uruchami­an­ie testów czy np. liningu (o nim poniżej), aktu­al­i­zowanie zależnoś­ci w pro­jek­cie czy w końcu zbu­dowanie go i uru­chomie­nie. Task run­nery posi­ada­ją wbu­dowane zada­nia, ale również pozwala­ją na tworze­nie włas­nych.

Przykłady tech­nologii:

  • Grunt  i Gulp.js to dwa pop­u­larne task run­nery, które pozwala­ją na zau­tomaty­zowanie zadań tj, uru­chomie­nie aplikacji, testów, odświeże­nie aplikacji po zmi­an­ie i zapisie pliku.
  • Web­pack to tzw. Bundler, który zaj­mu­je się przetwarzaniem mod­ułów i zależnoś­ci w staty­czne ase­ty dla naszej aplikacji. Jego możli­woś­ci są więk­sze niż możli­woś­ci task run­nerów.

Porów­ni­an­ie tych narzędzi: https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners

Linter

to narzędzie, które umożli­wia anal­izę kodu pod kątem potenc­jal­nych błędów, niestosowa­nia wzor­ców, niespójnego for­ma­towa­nia kodu itp. Zazwyczaj, jest ono uży­wane przed kom­pi­lacją (stąd mówimy o takiej anal­izie kodu staty­cz­na). Pozwala on na korzys­tanie z pre­defin­iowanych zasad, impor­towanie ich z zewnętrznego źródła lub dodawanie włas­nych.

Przykład­owe tech­nolo­gie:

Formater

(ang. code for­mat­ter) — narzędzie, które służy do for­ma­towa­nia two­jego kodu na pod­staw­ie zestawu zasad. For­mater może być cześ­cią edy­to­ra kodu, i np. może być uruchami­any z każdym zapisem pliku, albo może stanow­ić osob­ne narzędzie, które uruchamione na kodzie, zmieni go wg wyty­cznych.

Przykład­owy for­mater to : Pret­ti­er

Style guide

Zestaw zasad odnośnie for­ma­towa­nia  i orga­ni­za­cji kodu.

Przykład:

Edytory

Edy­tor to nic innego, jak miejsce tworzenia przez Ciebie kodu. Poszczególne edy­to­ry różnią się wyglą­dem czy zaawan­sowaniem funkcji, ich wybór powinien być dos­tosowany do indy­wid­u­al­nych pref­er­encji. Na pewno warto sprawdz­ić:

Tyle od nas dziś, potrak­tu­j­cie ten wpis jako zapowiedź tego, co przed nami. W ramach kole­jnych lekcji pojaw­ią się omówienia wybranych tech­nologii, a także, będziemy tworzyć włas­ną aplikac­je fron­tendową! :) My nie może­my się doczekać, a wy? A może macie jakieś ulu­bione narzędzie / bib­liotekę, która powin­niśmy pozać? Śmi­ało zostaw­cie komen­tarz!

  •  
  •  
  •  
  •  
  •