TECHNOLOGIE FRONT-END - Directory listing of /studenci.usagi.pl/front-end/WYK01_wprowadzenie.pdf ·...
Transcript of TECHNOLOGIE FRONT-END - Directory listing of /studenci.usagi.pl/front-end/WYK01_wprowadzenie.pdf ·...
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.
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)
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…….
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 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
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