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

6 TECHNOLOGIE FRONT-END OWE JavaScript: o Biblioteki JS: jquery, jquery Mobile, Vanilla JS; o MV* Frameworki JavaScript: Angular, React, Backbone.js, Redux, itd o Testy jednostkowe: Karma, Jasmine; Narzędzia: o Node.js; o Bower; o Grunt; o Gulp; o I wiele innych.

7 TECHNOLOGIE FRONT-END OWE

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

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

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

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

12 BOOTSTRAP (Twitter, sierpień 2011, v.4) Oparty o siatkę 12 kolumn; 4 punkty przełamania dla urządzeń mobilnych; Współpracuje z preprocesorem SCSS

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

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

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

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

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

18 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

19 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 W odpowiedzi Sass wprowadził nową składnię scss. \ Stylus - najmłodszy z całej trójki, swoimi początkami sięga 2011 roku.

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

21 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; } css border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }.box border-radius(10px); }

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

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

24 PORÓWNANIE PREPROCESORÓW 2016 Preprocesor Ilość głosów Procentowo Sass % Less % Stylus 137 2,91% PostCSS 392 8,31% Żaden % Inny % Wyniki ankiety z 2016 roku,

25 PORÓWNANIE PREPROCESORÓW 2016 Wyniki ankiety z 2016 roku,

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

27 FRAMEWORKI JS Użycie JS w projektach Głosy Procentowo Vanilla JS % jquery % Angular % React % Backbone % Ember % Knockout % Vue.js % Underscore % Wyniki ankiety z 2015 roku,

28 FRAMEWORKI JS Wyniki ankiety z 2016 roku,

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

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

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

32 ANGULAR.JS & ANGULAR (Google, rok 2009, 2016) Angular - 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.

33 ANGULAR TypeScript zamiast JavaScript: programwoanie obiektówe, static typing Komponenty zamiast kontrolerów Większość funkcjonalności dostępna jako moduły Dynamiczne łądowanie Asynchroniczne kompilowanie szablonów Synchronizacja z danymi serwera Wbudowana obsługa routingu Wbudowany mechanizm do unit testów (Karma)

34 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 Wbudowany mechanizm do unit testów (Karma)

35 REACT.JS, REACT NATIVE (Facebook) React.js - biblioteka języka JavaScript, wspierana i firmowana przez Facebook, podobnie jak Angular służąca do tworzenia UI w aplikacjach webowych. Wykorzystuje język JSX jako nakładkę na język JS, która pozwala na wstawianie komponentów bezpośrednio w kodzie aplikacji. React Native z kolei służy do tworzenia aplikacji na Androida, ios oraz Windows 10.

36 REACT.JS <div id="myreactapp"></div> <script type="text/babel"> class Greeter extends React.Component { } render() { } return <h1>{this.props.greeting}</h1> ReactDOM.render(<Greeter greeting="hello World!" />, document.getelementbyid('myreactapp')); </script> <div id="myreactapp"> <h1>hello World!</h1> </div>

37 REACT.JS Budowa komponentowa Jednostronny przepływ danych Callback do nadrzędnego komponentu Wirtual DOM JSX rozszerzenie do języka Java Script Zagnieżdżanie elementów Własne atrybut

38 NARZĘDZIA JS (4715 OSÓB) Narzędzie Używam często Używam czasem Słyszałem Nie znam NPM 80.08% 14.15% 4.01% 1.76% Bower 42.18% 33.96% 21.34% 2.52% Yeoman 13.45% 33.47% 41.53% 11.56% TypeScript 12.92% 19.53% 60.87% 6.68% Wyniki ankiety z 2016 roku,

39 NARZĘDZIA JS (4715 OSÓB) Wyniki ankiety z 2016 roku,

40 NODE.JS (NPM) (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.

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

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

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

44 SYSTEMY AUTOMATYZACJI PRACY Wyniki ankiety z 2016 roku,

45 WZORZEC MVC I ANGULAR

46 DEFINICJA ANGULAR Framework JavaScript na licencji open-source wykorzystywany do tworzenia aplikacji SPA (single page applications) w oparciu o wzorzec projektowy Model-View-Controler. Opracowany przez zespół Google, oficjalnie został opublikowany w 2012 roku. W roku 2016 zakończono prace nad Angular2 (Angular2+) lub po prostu Angular. Dlaczego powstał? Ze względu na coraz szybszy rozwój aplikacji mobilnych i SPA, pojawiło się zapotrzebowanie na uporządkowanie i wprowadzenia struktury MVC do rozwiązań JavaScript. Angular świetnie się do tego nadaje.

47 CECHY ANGULAR Logika przeniesiona z serwera na klienta dane łączone są z szablonem w przeglądarce, a nie na serwerze; Serwer to źródło danych dostarczające HTML, CSS i JS przy pierwszym ładowaniu strony później dane ładowane dynamicznie bez odświeżania; Dwustronny data binding Odświeżanie są tylko wybrane elementy a nie strona (AJAX); Jasna struktura MVC wspierająca budowę dużych aplikacji. Zestaw wbudowanych, intuicyjnych filtrów do prezentacji danych; Środowisko testowe dla aplikacji oraz jej modułowość ułatwiająca testowanie;

48 RÓŻNICE MIĘDZY ANGULAR.JS I ANGULAR Komponenty zamiast kontrolerów każdy komponent to samodzielna całość zawierająca style css oraz unit testy; Język TypeScript zamiast JavaScript; Modułowość najważniejsze funkcjonalności w postaci instalowanych modułów Two way data binding oparty na zdarzeniach (eventach). Poprawiony natywny routing. Automatyczne odświeżanie komponentów, a nie całej aplikacji.

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

50 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

51 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

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

53 DZIĘKUJĘ ZA UWAGĘ