technologie front

Transkrypt

technologie front

WYKŁAD 1
TECHNOLOGIE FRONT-END
CZĘŚĆ 1
TROCHĘ HISTORII
strona internetowa
Webmaster - grafika, baza, programowanie, layout
(Photoshop, MySQL, PHP, HTML, CSS, JS)
Grafik - grafika
(Photoshop, Adobe Illustrator)
strona internetowa
Webmaster - baza, programowanie, layout
(MySQL, PHP, HTML, CSS, JS)
TROCHĘ HISTORII
Webdesigner, grafik - grafika
(Photoshop, Adobe Illustrator)
UX – prototyp interfejsu aplikacji
aplikacja
internetowa
(HTML, CSS, narzędzia UX)
Front-end developer –
kodowanie interfejsu aplikacji
(HTML, CSS, LESS, SASS, JS, frameworki JS, Karma, Node.js)
Back-end developer – kodowanie logiki aplikacji
(języki programowania, bazy danych)
TECHNOLOGIE FRONT-END’OWE
Technologie pozwalające na tworzenie interfejsu użytkownika
w aplikacjach internetowych.
Wraz z rozwojem aplikacji webowych, praca nad interfejsem
użytkownika ewoluowała z tworzenia statycznych, generowanych po
stronie serwera widoków w kierunku dynamicznych interfejsów,
reagujących na działania użytkownika z jednoczesnym ograniczeniem
odwołań do serwera.
CO NA TO PRACODAWCY?
Obejmują:
 Język znaczników HTML;
 Kaskadowe arkusze styli CSS:
o preprocesory CSS: Less, Sass (SCSS), Stylus, CSS-Crush;
o frameworki CSS: Twitter Bootstrap, Materialize, Foundation;
o Responsive Web Design: media queries;
 JavaScript:
o Biblioteki JS: jQuery, jQuery Mobile, Vanilla JS;
o MV* Frameworki JavaScript: AngularJS, Backbone.js, Ember.js,
React.js, Knockout.js, itd…
o Testy jednostkowe: Karma, Jasmine;
 Narzędzia:
o Node.js;
o Bower;
o Grunt;
o Gulp;
o I wiele innych…….
BASIC FRONT-END
Podstawowe umiejętności:
 HTML 5;
 Kaskadowe Arkusze Styli CSS;
 Język JavaScript;
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 język skryptowy JavaScript. To zestaw gotowych
rozwiązań, bibliotek i narzędzi, które można wykorzystać przy
tworzeniu stron 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ć swobodnie wykorzystywane w aplikacjach webowych.
Plik wejściowy
(.less, .scss, .styl)
Kompilator
Plik wyjściowy
(.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 - PRZYKŁAD
.wrapper {
max-width: 960px;
padding-top: 30px;
}
.wrapper p {
font-size: 12px;
}
.wrapper a {
text-decoration: none;
color: red;
}
.wrapper p a {
font-weight:bold;
color: blue;
}
.wrapper p a:hover {
color: green;
}
css
.wrapper {
max-width: 960px;
padding-top: 30px;
a{
text-decoration: none;
color: red;
}
p{
font-size: 12px;
a{
font-weight:bold;
color: blue;
&:hover {
color: green;
}
}
}
}
less
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
scss
sass
=border-radius($radius)
-webkit-border-radius: $radius
@mixin border-radius($radius) {
-moz-border-radius:
$radius
-webkit-border-radius: $radius;
-ms-border-radius:
$radius
-moz-border-radius: $radius;
border-radius:
$radius
-ms-border-radius: $radius;
border-radius: $radius;
.box
}
+border-radius(10px)
.box {
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
@include 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
less
.size(@width; @height: 100px) {
width: @width;
css
img {
width: 50px;
height: @height;
height: 100px;
}
.color() {
color: red;
}
img {
.size(50px);
.color;
}
color: red;
}
STYLUS
Stosunkowo nowy preprocesor wzorowany na
obu poprzednich. Został stworzony przez TJ
Holowaychuk’a, byłego programistę Node.js i
twórcę języka Luna. Napisany w JADE i Node.js.
To, co odróżnia go od pozostałych to fakt, że można w nim korzystać z
dowolnego zapisu reguł – zarówno używając klamer i średników (SCSS i
LESS) jak i ignorując je (SASS). Można też mieszać zapisy w jednym
pliku.
PORÓWNANIE PREPROCESORÓW 2015
Preprocesor
Sass
Less
Stylus
Inny
Żaden
Razem
Ilość głosów
1297
308
76
42
305
2028
Procentowo
63.95%
15.19%
3.75%
2.07%
15.04%
100%
Wyniki ankiety z 2015 roku, http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
PORÓWNANIE PREPROCESORÓW 2015
MVC – MODEL-VIEW-CONTROLLER
Model-View-Controller (pol. Model-Widok-Kontroler) – wzorzec
architektoniczny służący do organizowania struktury aplikacji
posiadających graficzne interfejsy użytkownika.
Klasyczny MVC zakłada podział aplikacji na trzy główne części:
 Model – jest pewną reprezentacją problemu bądź logiki aplikacji.
 Widok – opisuje, jak wyświetlić pewną część modelu w ramach
interfejsu użytkownika.
 Kontroler – przyjmuje dane wejściowe od użytkownika i reaguje na
jego poczynania, zarządzając aktualizacje modelu.
Wszystkie trzy części są ze sobą wzajemnie połączone.
MVC – MODEL-VIEW-CONTROLLER
 Kontroler wybiera model oraz widok i przekazuje temu widokowi,
z którego modelu ma skorzystać.
 Widok wysyła zapytanie do modelu, który zwraca odpowiednie
dane.
2
CONTROLLER
5
1
3
VIEW
MODEL
4
MVP – MODEL-VIEW-PRESENTER
 Widok przesyła do prezentera żądanie użytkownika.
 Prezenter wysyła do modelu prośbę o konkretne dane.
 Model odsyła dane, na których prezenter może dokonać jeszcze
manipulacji i dopiero przesyła je do widoku.
1
PRESENTER
4
VIEW
3
2
MODEL
MVVM – MODEL-VIEW-VIEWMODEL
 Model zawiera tylko dane.
 View odpowiada za wyświetlanie danych i przekazywanie zdarzeń.
 ViewModel opiera się o dwustronne wiązanie: zawiera logikę
biznesową, odpowiada za modyfikacje modelu oraz obsługuje
widoki, dzięki czemu możliwe jest automatyczne wprowadzanie
zmian.
FRAMEWORKI JS
Możemy wyszczególnić kilka głównych cech/narzędzi, które powinien
dostarczać dobry framework MVC 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.
FRAMEWORKI JS
Użycie JS w projektach
Vanilla JS
jQuery
AngularJS
React
Backbone
Ember
Knockout
Underscore
Głosy
120
799
253
124
42
34
21
18
Procentowo
8.48%
56.47%
17.88%
8.76%
2.97%
2.40%
1.48%
1.27%
Framework
AngularJS 1.2.22
Backbone.js 1.1.2
Ember.js 1.6.1
Rozmiar
Rozmiar z bibliotekami
39.5kb
6.5kb
90kb
39.5kb
43.5kb (jQuery + Underscore)
20.6kb (Zepto + Underscore)
136.2kb (jQuery + Handlebars)
BACKBONE.JS
(Jeremy Ashkenas , 2010 r.)
Backbone.js - biblioteka programistyczna napisana w języku JavaScript
wykorzystywana do tworzenia aplikacji internetowych typu Single
Page.
Biblioteka została zbudowana z użyciem interfejsu RESTful JSON i
bazuje na wzorcu MVP.
Backbone.js jest lekką biblioteką wymagającą do działania tylko
Underscore.js oraz jQuery.js. Twórcą biblioteki jest Jeremy Ashkenas,
znany jako twórca języka CoffeeScript.
BACKBONE.JS
W backbone.js dane reprezentowane są jako Model, który może być
tworzony, walidowany, usuwany oraz zapisywany na serwerze.
Za każdym razem, gdy akcja UI wywoła zmianę w Modelu zostaje
wywołane zdarzenie „change”, które informuje Widok o potrzebie
ponownego wyrenderowania z wprowadzoną zmianą.
Nie trzeba szukać elementu po ID i wymuszać zmiany w HTML – jeśli
model się zmieni, zmieni się też widok.
CECHY BACKBONE.JS
 Najstarszy framework
 Małe rozmiary
 Wbudowana obsługa routingu
 Polega na innych bibliotekach – underscore.js, jQuery.js
 Brak wbudowanego two way data-binding – podwójnego wiązania
 Bezpośrednia manipulacja drzewem DOM.
 Nie zapewnia żadnej struktury, a raczej narzędzia do jej
samodzielnego określenia przez dewelopera.
ANGULAR.JS
(Google, rok 2009)
AngularJS - otwarta biblioteka języka JavaScript, wspierana i
firmowana przez Google, wspomagająca tworzenie i rozwój aplikacji
internetowych na pojedynczej stronie.
Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller
(MVC) do aplikacji internetowych, aby ułatwić ich rozwój i testowanie.
Podwójne wiązanie pozwala na automatyczną synchronizację danych,
które mamy po stronie widoku, a naszym kontrolerem / modelem
danych po stronie JavaScript.
ANGULAR.JS
 Niezależny od innych bibliotek, jQLite
 Podwójne wiązania (two way data-binding)
 Wstrzykiwanie zależności
 Wbudowane szablony widoków
 Dyrektywy rozszerzające działanie HTML
 Szablony deklaratywne i tekstowe
 Synchronizacja z danymi serwera
 Duży rozmiar całego środowiska, jednak zapewnia on pełne
środowisko do tworzenia aplikacji.
EMBER.JS
(Yehuda Katz oraz Tom Dale, 2011 r)
Ember.js - otwarta biblioteka języka JavaScript, ułatwiająca pisanie
aplikacji internetowych po stronie klienta z użyciem wzorca ModelView-Controller (MVC).
Framework zawiera ułatwienia związane z pisaniem aplikacji na
pojedynczej stronie internetowej, między innymi router oraz
automatyczną aktualizację szablonu strony (template) z pomocą
biblioteki Handlebars.js.
EMBER.JS
 Zależny od innych bibliotek: jQuery oraz Handlebars.js
 Podwójne wiązania (two way data-binding)
 Szablony tekstowe dołączane zewnętrznie przez Handlebars.js
 Bezpośrednia manipulacja drzewem DOM
 Synchronizacja z serwerem przez RESTAdapter (wymaga serwisu
REST-owego)
NARZĘDZIA JS
Narzędzie
NPM
Używam często
Używam czasem
68.39% (1,387)
19.63% (398)
Słyszałem
Nie znam
6.76% (137)
5.23% (106)
Bower
45.36% (920)
28.06% (569) 23.27% (472)
3.30% (67)
Yeoman
19.97% (405)
30.57% (620) 37.13% (753)
12.33% (250)
Ender
0.54% (11)
1.43% (29) 28.55% (579) 69.48% (1,409)
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.
BOWER
Bower jest to narzędzie wykorzystywane do zarządzania bibliotekami,
które są dołączane do projektów webowych. To znaczy, za pomocą
tego narzędzia, z wykorzystaniem linii komend, można dołączyć
najnowszą wersję bibliotek, takich jak: jQuery czy Backbone.js, do
projektu. Dzięki niemu nie trzeba się martwić o kilka rzeczy:
 Skąd pobrać daną bibliotekę czy rozszerzenie?
 Czy dana biblioteka jest aktualna?
SYSTEMY AUTOMATYZACJI PRACY
System
Ilość głosów
Procentowo
Gulp
888
43.79%
Grunt
559
27.56%
NPM
64
3.16%
Broccoli
22
1.08%
Inny
99
4.88%
Żaden
396
19.53%
Razem
2028
100%
SYSTEMY AUTOMATYZACJI PRACY
DZIĘKUJĘ ZA UWAGĘ

technologie front

Transkrypt

Podobne dokumenty

Firma „Webpro” Sp. z o.o. z siedzibą w Katowicach Oferujemy

CV - Bartek Wojtyca

Czołowy portal biznesowy www.NF.pl poszukuje stażysty na

WWW2 Tworzenie stron w HTML + CSS projektowanie

Bydgoszcz. Tworzenie stron internetowych w języku HTML i CSS

Programista Front-End / Web Developer

Web Developer

Moje CV - Nowak Przemysław

Temat i cele