Wstęp do front-endu — słowniczek

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 zapraszamy.

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 (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.

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 (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ęść dokumentu.

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 satysfakcje.

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

• http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
• https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/
• https://medium.com/level-up-web/a‑dummies-guide-to-ux-basics-159378970d60

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, CoffeeScript.

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 TypeScript.

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:

• Doku­men­tac­ja JavaScript Mozil­la: https://developer.mozilla.org/en-US/docs/web/javascript
• Porów­nanie Type­Script i Cof­fee­Script: https://www.slant.co/versus/374/378/~coffeescript_vs_typescript

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).

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 dokumentacji.

React

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

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ą widoki.

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. Angular).

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.

• https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
• https://medium.com/@samerbuna/which-javascript-frameworks-should-you-learn-in-2018-ecea9a27617d

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 bibliotekach:

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ładnię.

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 obiekty.

Redux

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

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

• https://tutorialzine.com/2017/12/the-best-javascript-and-css-libraries-for-2017
• https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6
• https://getflywheel.com/layout/javascript-frameworks-libraries-2017/

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 działania).

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 korzystać.

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 projekty.

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łasnych.

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 runneró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łasnych.

Przykład­owe technologie:

• ESLint

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 wytycznych.

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:

• AirBnb Style Guide
• JavaScript Stan­dard Style
• Google JavaScript Style Guide

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 sprawdzić:

• Atom
• VS Code
• Sub­lime
• Web­Storm