WYKŁAD 1

TECHNOLOGIE FRONT-END CZĘŚĆ 1

TROCHĘ HISTORII

strona internetowa Webmaster - grafika, baza, programowanie, layout

(Photoshop, MySQL, PHP, HTML, CSS, JS)

strona internetowa

Grafik - grafika

(Photoshop, Adobe Illustrator)

Webmaster - baza, programowanie, layout

(MySQL, PHP, HTML, CSS, JS)

TROCHĘ HISTORII

aplikacja internetowa

Webdesigner, grafik - grafika

(Photoshop, Adobe Illustrator, Sketch)

UX – prototyp interfejsu aplikacji

(HTML, CSS, narzędzia UX)

Front-end developer – kodowanie interfejsu aplikacji

(HTML, CSS, JS, frameworki JS, Node.js)

Back-end developer – kodowanie logiki aplikacji

(języki programowania, bazy danych)

FRONT-END DEVELOPER Front-end Developer to osoba, która zajmuje się interfejsem aplikacji.

Są to zatem wszystkie technologie działające po stronie przeglądarki

jak HTML, CSS, JavaScript czy TypeScript.

Odpowiadają za to wszystko, co użytkownik widzi na portalu –

elementy graficzne, animacje oraz ogólnopojętą stronę wizualną.

Mają za zadanie przygotowanie interfejsu w taki sposób, by działał

płynnie i w sposób przystosowany do każdego typu urządzeń.

Przetwarzają dane przesyłane z back-end’u i przedstawiają je w

zrozumiały dla użytkownika sposób.

Obsługują zdarzenia (kliknięcie, wprowadzenie danych w formularzu)

i przesyłają je w odpowiedniej formie do back-end’u.

BACK-END DEVELOPER

Back-end Developer odpowiada za część serwerową i warstwę danych,

na których operuje front-end, czyli:

Przygotowuje i wystawia dane, które następnie wyświetlane są we

front-endzie. Są to dane dynamiczne, pochodzące z zaplecza aplikacji

(autentykacja użytkowników, pobranie artykułów, danych

sklepowych, itd).

Pracuje z warstwą tak zwanej logiki biznesowej aplikacji, projektując

jej architekturę, bazę danych oraz obsługując technologie działające

po stronie serwera – programuje w technologiach jak PHP, Ruby,

Python, Java, czy .Net.

KOMUNIKACJA FRONT-END - BACK-END

REST API

REST (ang. Representational State Transfer) to wzorzec narzucający

dobre praktyki tworzenia architektury aplikacji rozproszonych.

RESTful Webservices (RESTful web API) - usługa sieciowa

zaimplementowaną na bazie protokołu HTTP i głównych zasad wzorca

REST.

Wzorzec ten opiera się na sześciu głównych zasadach: jednolity

interfejs, bezstanowość, cache’owanie danych, architektura klient-

server, warstwowość, kod na żądanie.

UNIFORM INTERFACE (JEDNOLITY INTERFEJS)

Jednolity interfejs do komunikacji między klientem a serwerem, który

upraszcza integrację i architekturę budowanych rozwiązań.

– interfejs oparty jest na zasobach – każdy zasób jest dostępny pod

unikalnym URI

- sposób reprezentacji zasobów może być różny, np. serwer wysyła

dane w XML lub JSON, a nie w postaci pobranej z bazy danych

– manipulacja zasobami jest realizowana poprzez jego reprezentacje –

po otrzymaniu reprezentacji zasobu od serwera, klient może

modyfikować czy usuwać zasoby.

– komunikaty (odpowiedzi) serwera do klienta są samoopisujące się –

każda odpowiedź serwera zawiera informacje jak ją obsłużyć np.

poprzez wartość „media type” (inaczej „MIME type”).

– HATEOAS (Hypermedia as the Engine of Application State) – klient

wysyłając żądanie do serwera przesyła swój stan, parametry żądania,

nagłówki oraz URI zasobu. Serwer dostarcza treść, kod i nagłówki

odpowiedzi.

STATELESS (BEZSTANOWOŚĆ)

Stan konieczny do obsługi żądania znajduje się każdorazowo w żądaniu

klienta (jako część URL, parametr żądania, fragment nagłówka czy

samej treści żądania).

Serwer nie przetrzymuje informacji o stanie.

Wszystkie dane o sesji, autentykacji klienta przechowywane są po

stronie klienta, nie serwera.

Innymi słowy w przypadku serwisów REST nie istnieje coś w rodzaju

sesji HTTP, dzięki czemu skalowalność serwisów REST jest tak duża,

ponieważ nie ma potrzeby zarządzania sesjami klientów.

CACHEABLE

Odpowiedzi serwera mogą być cache’owane, czyli zapisywane w

pamięci podręcznej chociażby przez przeglądarki.

Z jednej strony to zwiększa wydajność, bo nie trzeba pobierać tych

samych danych wiele razy, z drugiej istnieje ryzyko dostarczania

nieaktualnych danych.

Dlatego przy budowie serwisów REST określa się czy dana odpowiedz

może być cache’owalna, czy nie.

CLIENT-SERVER (MODEL KLIENT-SERWER)

Klient (np. przeglądarka) nie musi zarządzać połączeniem do bazy

danych czy innych systemów, z którymi serwer się komunikuje.

Serwer nie musi znać szczegółów interfejsu użytkownika klienta czy też

stanu klienta, co ma znaczenie na skalowalność rozwiązania.

Klient i serwer mogą być budowane w różnych technologiach i przez

różne zespoły.

KLIENT HTTP SERWER HTTP

ŻĄDANIE HTTP

ODPOWIEDŹ HTTP

LAYERED SYSTEM (WARSTWOWOŚĆ)

Warstwowa budowa systemu ma wpływ na skalowalność rozwiązania.

Klient korzystając z określonego serwisu nie musi wiedzieć, czy

komunikuje się bezpośrednio z końcowym serwerem, czy z warstwą

pośrednią, która np. cache’uje dane czy balansuje ruch pomiędzy

kilkoma serwerami.

CODE ON DEMAND (KOD NA ŻĄDANIE)

Opcjonalną regułą jest obsługa przez serwery żądań w taki sposób, że

klient może przesłać w określony sposób pewną logikę (kod) do

zrealizowania przez serwer (np. aplet Javy czy kawałek JavaScriptu).

Reguła ta jest jednak opcjonalna, często nie jest konieczne przy

budowie serwisu, więc jeśli implementowany serwis tej reguły nie

spełnia (np. ze względów bezpieczeństwa) i jest zgodny z pozostałymi,

to można taki serwis nazywać REST.

METODY REST

Wzorzec REST udostępnia pięć podstawowych metody operacji na

danych:

GET — pobieranie (zarówno kolekcji, jak i pojedynczego elementu)

POST — tworzenie (tylko kolekcji)

PUT — aktualizacja (tylko pojedynczego elementu)

PATCH – częściowa aktualizacja danych

DELETE — usuwanie (tylko pojedynczego elementu)

KOMUNIKACJA FRONT-END - BACK-END

TECHNOLOGIE FRONT-END’OWE

Technologie pozwalające na tworzenie interfejsu użytkownika

w aplikacjach internetowych.

Obejmują:

Język znaczników HTML;

Kaskadowe arkusze styli CSS:

o preprocesory CSS: Sass (SCSS), Less, Stylus;

o frameworki CSS: Twitter Bootstrap, Materialize, Foundation;

o Responsive Web Design;

TECHNOLOGIE FRONT-END’OWE JavaScript, TypeScript:

o Biblioteki JS: jQuery, Vanilla JS;

o MV* Frameworki JavaScript: Angular, AngularJs, React, Vue.js I

wiele innych…

o Testy jednostkowe: Karma, Jasmine, Selenium;

Narzędzia:

o Node.js

o Bower, Gulp, WebPack, Yarn

o I wiele innych…….

TECHNOLOGIE FRONT-END’OWE

BASIC FRONT-END

Podstawowe umiejętności:

HTML 5

Kaskadowe Arkusze Styli CSS;

RWD (responsive web design)

Język JavaScript, jQuery

FRONT-END DEVELOPER

Umiejętności front-end developera:

Preprocesory i frameworki CSS

MV* frameworki JavaScript

Narzędzia do budowania front-end’u

FRAMEWORKI CSS

Frameworki oparte o język HTML, kaskadowe arkusze stylów CSS oraz JavaScript. To zestaw gotowych rozwiązań, bibliotek i narzędzi, które można wykorzystać przy tworzeniu aplikacji internetowych albo ich prototypów. Obsługują media queries, są oparte o siatkę grid, oferują własny

system kontrolek i przycisków.

Twitter Bootstrap,

Foundation (Zurb),

Material Design (Google).

BOOTSTRAP (TWITTER, SIERPIEŃ 2011) (Twitter, sierpień 2011, v.4)

Twitter Bootstrap to jeden z najbardziej popularnych framework’ów

do tworzenia responsywnych i przyjaznych urządzeniom mobilnym

stron internetowych.

BOOTSTRAP (Twitter, sierpień 2011, v.4)

• Oparty o siatkę 12 kolumn;

• 4 punkty przełamania dla urządzeń mobilnych;

• Współpracuje z preprocesorami SCSS i Less;

FOUNDATION (Zurb, październik 2011, v.6)

Również w pełni konfigurowalny, dzięki użyciu preprocesora SASS. Posiada 12-kolumnową płynną siatkę, którą można łatwo zagnieżdżać. Warto dodać, iż jest to pierwszy duży framework wykonany zgodnie z regułą mobile first, co sprawia iż tworzenie mobilnych wersji stron jest bardzo szybkie i proste. Zawiera pełen zestaw elementów UI i skryptów JS.

FOUNDATION (Zurb, październik 2011, v.6)

• Oparty o siatkę 12 kolumn;

• 6 punktów przełamania dla urządzeń mobilnych;

• Współpracuje z preprocesorem SASS;

• Trzy rodzaje: dla serwisów, newsletterów, aplikacji webowych (w pakiecie pełna integracja z AngularJS).

MATERIAL DESIGN (Google, lipiec 2014)

Opracowany dla Androida zestaw reguł i styli dotyczących interfejsu.

Na tej podstawie powstało wiele framework’ów oferujących

komponenty tworzone według wytycznych Google, np. Materialize.

Google oferuje też własny framework: Material Design Lite.

PREPROCESORY CSS

Preprocesory CSS to narzędzia, które pozwalają pisać kod CSS z

wykorzystaniem bardziej zaawansowanych możliwości, takich

jak zmienne, operatory, funkcje czy bloki danych.

Po zapisaniu, pliki preprocesorów są kompilowane do zwykłych plików

CSS i mogą być wykorzystywane w aplikacjach webowych.

Plik wejściowy (.less, .scss, .styl)

Kompilator Plik wyjściowy

(.css)

PREPROCESORY CSS - PRZYKŁAD

.w {

padding: 30px;

}

.w a {

color: #d4d4d4;

}

.w p {

font-size: 12px;

}

.w p a {

color: #FF0;

}

.w p a:hover {

color: #d4d4d4;

}

$color: #d4d4d4;

.w {

padding: 30px;

a {

color: $color;

}

p {

font-size: 12px;

a {

color: #FF0;

&:hover {

color: $color;

}

}

}

}

css scss .w {

padding: 30px;

}

.w a {

color: #d4d4d4;

}

.w p {

font-size: 12px;

}

.w p a {

color: #FF0;

}

.w p a:hover {

color: #d4d4d4;

}

css

PREPROCESORY CSS - ZALETY

Możliwość ustawiania zmiennych i parametrów, dzięki czemu

zachowuje się spójność w stylach, np. można zdefiniować główny

kolor lub obramowanie współdzielone w całej aplikacji.

Zmniejszenie kodu CSS przez eliminację powtórzeń tych samych

bloków kodu.

Zagnieżdżanie reguł, dzięki czemu łatwiej zarządzać selektorami.

Łatwość zarządzania kodem CSS i przenoszenia go między

aplikacjami z jednoczesnym wyborem, które moduły css będą

potrzebne.

Możliwość wykorzystywania matematyki i funkcji logicznych.

PREPROCESORY CSS Do najbardziej znanych preprocesorów CSS zaliczają się:

Sass (Syntactically Awesome Style Sheets) - najbardziej

dojrzały ze wszystkich preprocessorów. Swoimi początkami sięga 2006 roku.

Less (Leaner CSS) - został stworzony w odpowiedzi na język Sass

w roku 2009. W odpowiedzi Sass wprowadził nową składnię scss. \

Stylus - najmłodszy z całej trójki, swoimi początkami sięga 2011

roku.

SASS (SCSS)

Oficjalna wersja Sass jest wersją open-source

opartą o język Ruby. Istnieją jednak rozszerzenia

oparte o inne języki, w tym np. PHP czy Java.

Sass umożliwia pisanie kodu w dwóch składniach –

sass lub scss.

Składnia sass zamiast nawiasów klamrowych do definiowania

bloków wykorzystuje wcięcia, natomiast reguły oddziela od siebie

znak nowej linii (podobne do kodu napisanego w YAML lub Haml).

Składnia scss wraca swoimi założeniami do klasycznego

formatowania kodu CSS. Do definiowania bloków wykorzystujemy

nawiasy klamrowe, z kolei średniki oddzielają reguły od siebie.

SASS (SCSS) - PRZYKŁAD

//mixin

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

//wywołanie

.box {

@include border-radius(10px);

}

scss //efekt

.box {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

css

LESS

Dynamiczny język arkuszy stylów stworzony

przez Alexis Selliera. Pierwsza implementacja

napisana była w Ruby, późnej została zastąpiona wersją napisaną w

JavaScript.

Less jest zagnieżdżonym metajęzykiem - poprawny kod CSS jest

również poprawnym kodem Less. Główną różnicą pomiędzy Less i

innymi prekompilatorami CSS jest możliwość kompilacji w czasie

rzeczywistym kodu przez przeglądarkę.

LESS - PRZYKŁAD

//mixin

.size(@width; @height: 100px) {

width: @width;

height: @height;

}

.color() {

color: red;

}

//wywołanie

img {

.size(50px);

.color;

}

//efekt

img {

width: 50px;

height: 100px;

color: red;

}

less css

PORÓWNANIE PREPROCESORÓW 2016 - 2018 Preprocesor 2016 2018 % 2016 % 2018 Sass 3336 3571 63.49 65.39 (+1.90) Less 537 356 10.22 6.52 (-3.70) Stylus 160 119 3.05 2.18 (-0.87) PostCSS 414 473 7.88 8.66 (+0.78) Inny 80 146 1.53 2.67 (+1.22) Żaden 727 796 13.84 14.58 (+0.74) Razem 5254 5461

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results#css-processors https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results#css-processors

PORÓWNANIE PREPROCESORÓW 2018

PORÓWNANIE FRAMEWORKÓW CSS 2018

Framework 2018 % 2018 Bootstrap 1909 34.96

Żaden 1798 32.92 Własny 833 15.25 Fundation 215 3.94 Materialize 144 2.64

Bulma 133 2.44 Semantic UI 106 1.94 PureCss 38 0.70 Inny 285 5.22 Razem 5461

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results#css-frameworks

PORÓWNANIE FRAMEWORKÓW CSS 2018

FRAMEWORKI JS

Możemy wyszczególnić kilka głównych cech/narzędzi, które powinien

dostarczać dobry framework JavaScript:

binding danych pomiędzy HTML’em, a obiektem modelu po

stronie klienta (w tym aktualizacja danych w obie strony);

szablony widoków, w które wstrzykiwane są dane z modelu ;

routing URL czyli „udawanie” przed przeglądarką, że aplikacja ma

więcej niż jedną stronę;

składowanie danych rozumiane zwykle jako narzędzia do

zapisywania zmian do serwera.

Narzędzie 2016 2016(%) 2018 2018(%)

jQuery 3,691 70.25% 2,788 51.05% -19.20%

React 1,939 36.91% 2,588 47.39% +10.48%

Lodash 1,669 31.77% 1,847 33.82% +2.05%

Vue.js 491 9.35% 1,253 22.94% +13.59%

Angular 2+ 445 8.47% 771 14.12% +5.65%

Angular 1 1,319 25.10% 569 10.42% -14.68%

Underscore 784 14.92% 428 7.84% -7.08%

Ember 318 6.05% 328 6.01% -0.04%

Preact - - 163 2.98% N/A

Backbone 330 6.28% 139 2.55% -3.73%

Knockout 179 3.41% 100 1.83% -1.58%

Polymer 99 1.88% 95 1.74% -0.14%

MeteorJS 120 2.28% 75 1.37% -0.91%

Aurelia 173 3.29% 61 1.12% -2.17%

Żaden 143 2.72% 197 3.61% +0.89% https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results#js-framework-usage

SYSTEMY AUTOMATYZACJI PRACY

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results#js-bundler-experience

NODE.JS (Ryana Dahl, 2009 r.)

Środowisko programistyczne zaprojektowane do tworzenia wysoce

skalowalnych aplikacji internetowych, szczególnie serwerów www

napisanych w języku JavaScript. Umożliwia tworzenie aplikacji

sterowanych zdarzeniami wykorzystujących asynchroniczny system

wejścia-wyjścia. Jest aplikacją open source.

NODE PACKAGED MODULE (NPM)

NPM to powiązany z Node.js program do zarządzania modułami

Node.js. Dzięki niemu w prosty sposób można rozszerzać możliwości

Node.

NARZĘDZIA DO ZARZĄDZANIA PAKIETAMI

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results#js-packagemanagers

DZIĘKUJĘ ZA UWAGĘ