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

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

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

ANGULARJS TWORZENIE APLIKACJI INTERNETOWYCH

Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript

Full Stack JavaScript z Angular i Nest. Dni: 5. Opis: Adresaci szkolenia

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

Tytuł szkolenia: Angular 4 - budowanie nowoczesnych i wydajnych aplikacji przeglądarkowych

Budowa aplikacji ASP.NET z wykorzystaniem wzorca MVC

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

REACT NATIVE. Anna Maziejuk Kamil Jankowski

ASP.NET MVC. Grzegorz Caban 20 stycznia 2009

MVVM Light Toolkit. Julita Borkowska

Wzorce architektoniczne

Programowanie obiektowe

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

Exulto Software House

Tworzenie aplikacji Web Alicja Zwiewka. Page 1

Produktywne tworzenie aplikacji webowych z wykorzystaniem Groovy i

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),

ZAKODUJ SWOJĄ PRZYSZŁOŚĆ. Zostań programistą i zacznij dobrze zarabiać w IT, jednej z najlepiej rozwijających się branży w Polsce i na Świecie!

O sobie. Adam Kowalski. Absolwent informatyki Uniwersytetu Wrocławskiego Full-stack Developer w firmie Synergy Codes.

LESS - CSS dla leniwych

Przegląd technologii

Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych

W czystym JavaScripcie zasięgi zmiennych tworzone były poprzez funkcje anonimowe, w AngularJS posiadamy kontrolery, które także są funkcjami.

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),

Szczegółowy opis zamówienia:

Poznaj ASP.NET MVC. Kamil Cieślak Microsoft Student Partner

OpenLaszlo. OpenLaszlo

REFERAT O PRACY DYPLOMOWEJ

Program szkolenia: JavaScript Craftsmanship

Wybrane działy Informatyki Stosowanej

Krótka Historia. Co to jest NetBeans? Historia. NetBeans Platform NetBeans IDE NetBeans Mobility Pack Zintegrowane moduły. Paczki do NetBeans.

ZAKODUJ SWOJĄ PRZYSZŁOŚĆ. Zostań programistą i zacznij dobrze zarabiać w IT, jednej z najlepiej rozwijających się branży w Polsce i na Świecie!

Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Kurs ASP.NET ASP.NET CORE APLIKACJE WEBOWE

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Technologie dla aplikacji klasy enterprise. Wprowadzenie. Marek Wojciechowski

Grzegorz Ruciński. Warszawska Wyższa Szkoła Informatyki Promotor dr inż. Paweł Figat

Generated by Foxit PDF Creator Foxit Software For evaluation only. System Szablonów

Programowanie Komponentowe WebAPI

Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)

Ewolucja projektowania aplikacji w PHP na bazie frameworka Symfony 2

Zrąb JavascriptMVC. Krzysztof Płocharz. 6 kwiecień Uniwersytet Warszawski

Program szkolenia: Tworzenie aplikacji w Ruby on Rails z wykorzystaniem zwinnych metodyk

Szkolenie wycofane z oferty. Programowanie w JavaScript (zawiera jquery)

Tomasz Grześ. Systemy zarządzania treścią, cz. II

Założenia projektowe dla zapytania ofertowego EAK_ZA_01/2015

Dokumentacja techniczna. Młodzieżowe Pośrednictwo Pracy

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Wybrane działy Informatyki Stosowanej

Specyfikacja implementacyjna aplikacji serwerowej

Webowy generator wykresów wykorzystujący program gnuplot

Podstawy technologii WWW

Agenda. Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik?

Ruby on Rails. Supersilnik WWW. Łukasz Włodarczyk

Omówienie wzorców wykorzystywanych w Prism 5.0. Dominika Różycka

app/ - folder zawiera pliki konfiguracyjne dla całej aplikacji src/ - folder zawiera cały kod PHP aplikacji

Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:

Aplikacje Internetowe

app/ - folder zawiera pliki konfiguracyjne dla całej aplikacji Można wybrać sposób zapisu konfiguracji: YML, XML, PHP

STRONY INTERNETOWE mgr inż. Adrian Zapała

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

FRONTEND NARZĘDZIA RENATA MASZCZYKOWSKA

Dotacje na innowacje. Inwestujemy w waszą przyszłość.

Warszawa, Wytyczne dla projektu Biblioteka GUI

media Blitz wydajne sytemy szablonów

Wybrane działy Informatyki Stosowanej

Typy przetwarzania. Przetwarzanie zcentralizowane. Przetwarzanie rozproszone

Aplikacje webowe w obliczu ataków internetowych na przykładzie CodeIgniter Framework

Warszawa, Kategorie analizy frameworków GUI

Bazy danych i strony WWW

CSS - layout strony internetowej

Webowy generator wykresów oparty na programie gnuplot

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

REFERAT O PRACY DYPLOMOWEJ

Referat Pracy Dyplomowej

Wprowadzenie do programowania aplikacji mobilnych

Tester oprogramowania 2014/15 Tematy prac dyplomowych

Projekt Giełdy Terminów Koncepcja. 19 czerwca 2015

Programowanie internetowe

Web frameworks do budowy aplikacji zgodnych z J2EE. Jacek Panachida

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

Budowanie aplikacji biznesowych przy użyciu. Presentation Foundation i wzorca MVVM

ZAKŁADOWY: ZŁ WPŁACONY KRS REGON: NIP

Aplikacje SPA, Angular, TypeScript. dr hab. inż. Marek Wojciechowski

Responsive Web Design

Projektowanie, tworzenie aplikacji mobilnych na platformie Android

Narzędzia podnoszące jakość procesu wytwarzania i wdrażania

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

Przesłanki powstania książki... xvi Dla kogo przeznaczona jest ta książka?... xvi Co znajdziemy wewnątrz książki?... xvii

Wstęp Budowa Serwlety JSP Podsumowanie. Tomcat. Kotwasiński. 1 grudnia 2008

REFERAT PRACY DYPLOMOWEJ

Transkrypt:

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

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.

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;

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.

TECHNOLOGIE FRONT-END OWE

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 preprocesorem SCSS

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 =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 scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }.box { @include border-radius(10px); }

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; height: @height; }.color() { color: red; } img {.size(50px);.color; } img { width: 50px; height: 100px; color: red; } css

PORÓWNANIE PREPROCESORÓW 2016 Preprocesor Ilość głosów Procentowo Sass 2989 63.39% Less 478 10.14% Stylus 137 2,91% PostCSS 392 8,31% Żaden 643 13.64% Inny 73 1.55% Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

PORÓWNANIE PREPROCESORÓW 2016 Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

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 Głosy Procentowo Vanilla JS 985 20.89% jquery 1468 31.13% Angular 386+129 10.93% React 857 18.18% Backbone 38 0.81% Ember 178 3.78% Knockout 17 0.36% Vue.js 148 3.14% Underscore 18 1.27% Wyniki ankiety z 2015 roku, http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

FRAMEWORKI JS Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

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

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)

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)

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.

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>

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

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, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

NARZĘDZIA JS (4715 OSÓB) Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

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.

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 2060 43.69% Grunt 554 11.75% NPM 1223 25.94% Inny 358 7.66% Żaden 517 4.54% Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

SYSTEMY AUTOMATYZACJI PRACY Wyniki ankiety z 2016 roku, https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

WZORZEC MVC I ANGULAR

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.

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;

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.

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 1 VIEW 5 4 3 MODEL

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 3 4 2 VIEW 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.

DZIĘKUJĘ ZA UWAGĘ