WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1

Transkrypt

1 WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1

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

3 TROCHĘ HISTORII Webdesigner, grafik - grafika (Photoshop, Adobe Illustrator) aplikacja internetowa UX prototyp interfejsu aplikacji (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)

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

5 CO NA TO PRACODAWCY?

6 CO NA TO PRACODAWCY?

7 TECHNOLOGIE FRONT-END OWE 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;

8 TECHNOLOGIE FRONT-END OWE 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.

9 TECHNOLOGIE FRONT-END OWE

10 BASIC FRONT-END Podstawowe umiejętności: HTML 5; Kaskadowe Arkusze Styli CSS; Język JavaScript;

11 FRONT-END DEVELOPER Umiejętności front-end developera: Preprocesory i frameworki CSS; MV* frameworki JavaScript; Narzędzia do budowania front-end u;

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

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

14 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;

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

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

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

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

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

20 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

21 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. Najnowsza wersja to Less (Leaner CSS) - został stworzony w odpowiedzi na język Sass w roku W odpowiedzi Sass wprowadził nową składnię scss. Aktualna wersja została oznaczona numerem Stylus - najmłodszy z całej trójki, swoimi początkami sięga 2011 roku. Najnowsza wersja, która została opublikowana 4-tego września, nosi numer

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

23 SASS (SCSS) - PRZYKŁAD =border-radius($radius) sass -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius.box +border-radius(10px).box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } scss border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }.box border-radius(10px); }

24 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ę.

25 LESS - PRZYKŁAD 100px) { }.color() { color: red; } img {.size(50px);.color; } img { width: 50px; height: 100px; color: red; } css

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

27 PORÓWNANIE PREPROCESORÓW 2015 Preprocesor Ilość głosów Procentowo Sass % Less % Stylus % Inny % Żaden % Razem % Wyniki ankiety z 2015 roku,

28 PORÓWNANIE PREPROCESORÓW 2015 Wyniki ankiety z 2015 roku,

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

30 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 1 VIEW MODEL

31 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 VIEW MODEL

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

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

34 FRAMEWORKI JS Użycie JS w projektach Głosy Procentowo Vanilla JS % jquery % AngularJS % React % Backbone % Ember % Knockout % Underscore % Wyniki ankiety z 2015 roku, Framework Rozmiar Rozmiar z bibliotekami AngularJS kb 39.5kb Backbone.js kb 43.5kb (jquery + Underscore) 20.6kb (Zepto + Underscore) Ember.js kb 136.2kb (jquery + Handlebars)

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

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

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

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

39 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 Wbudowana obsługa routingu Duży rozmiar całego środowiska, jednak zapewnia on pełne środowisko do tworzenia aplikacji.

40 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 Model- View-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.

41 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) Wbudowana obsługa routingu

42 NARZĘDZIA JS Narzędzie Używam często Używam czasem Słyszałem Nie znam NPM 68.39% (1,387) 19.63% (398) 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) Wyniki ankiety z 2015 roku,

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

44 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?

45 YEOMAN Yeoman pozwala na generowanie różnego rodzaju projektów, a konkretnie utworzenie struktury katalogów zgodnie z najlepszymi praktykami, wstępne utworzenie niezbędnych plików, a także zainstalowanie niezbędnych zależności na przykład tworząc projekt AngularJS może zostać od razu zainstalowany Bootstrap, Less itp. itd.

46 SYSTEMY AUTOMATYZACJI PRACY System Ilość głosów Procentowo Gulp % Grunt % NPM % Broccoli % Inny % Żaden % Razem % Wyniki ankiety z 2015 roku,

47 SYSTEMY AUTOMATYZACJI PRACY Wyniki ankiety z 2015 roku,

48 DZIĘKUJĘ ZA UWAGĘ