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

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

ANGULARJS TWORZENIE APLIKACJI INTERNETOWYCH

Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript

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

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

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

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

Exulto Software House

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

Wzorce architektoniczne

LESS - CSS dla leniwych

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

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

Budowa aplikacji ASP.NET z wykorzystaniem wzorca MVC

MVVM Light Toolkit. Julita Borkowska

Dwie perspektywy responsive web design: user experience i front-end developer

Tworzenie aplikacji Web Alicja Zwiewka. Page 1

ASP.NET MVC. Grzegorz Caban 20 stycznia 2009

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

Programowanie obiektowe

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

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

Przegląd technologii

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

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

Ewolucja projektowania aplikacji w PHP na bazie frameworka Symfony 2

Produktywne tworzenie aplikacji webowych z wykorzystaniem Groovy i

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!

Szczegółowy opis zamówienia:

I. Opis przedmiotu zamówienia

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

Podstawy technologii WWW

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

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!

Architektura mikroserwisów na platformie Spring IO

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

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

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

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

Sass Rewolucja w CSS +

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

Wybrane działy Informatyki Stosowanej

STRONY INTERNETOWE mgr inż. Adrian Zapała

Referat Pracy Dyplomowej

Program szkolenia: JavaScript Craftsmanship

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

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

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

Programowanie Komponentowe WebAPI

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

Kompleksowe tworzenie aplikacji klasy Desktop z wykorzystaniem SWT i

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

REFERAT O PRACY DYPLOMOWEJ

Warszawa, Kategorie analizy frameworków GUI

Aplikacje Internetowe

FRONTEND NARZĘDZIA RENATA MASZCZYKOWSKA

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

OpenLaszlo. OpenLaszlo

Warszawa, Wytyczne dla projektu Biblioteka GUI

Specyfikacja implementacyjna aplikacji serwerowej

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

REFERAT PRACY DYPLOMOWEJ

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

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

Kurs ASP.NET ASP.NET CORE APLIKACJE WEBOWE

Webowy generator wykresów wykorzystujący program gnuplot

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

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

Wprowadzenie do programowania aplikacji mobilnych

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

Bazy danych i strony WWW

REFERAT O PRACY DYPLOMOWEJ

CSS. Kaskadowe Arkusze Stylów

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

Projektowanie, tworzenie aplikacji mobilnych na platformie Android

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

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

Czym jest Java? Rozumiana jako środowisko do uruchamiania programów Platforma software owa

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

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

Webowy generator wykresów oparty na programie gnuplot

Zakres tematyczny dotyczący kursu PHP i MySQL - Podstawy pracy z dynamicznymi stronami internetowymi

Program szkolenia: Symfony, nowoczesny framework PHP

Biorąc udział w projekcie, możesz wybrać jedną z 8 bezpłatnych ścieżek egzaminacyjnych:

PRZEWODNIK PO PRZEDMIOCIE

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?

PRZEWODNIK PO PRZEDMIOCIE

1. Pierwszy program. Kompilator ignoruje komentarze; zadaniem komentarza jest bowiem wyjaśnienie programu człowiekowi.

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

Dariusz Brzeziński. Politechnika Poznańska, Instytut Informatyki

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

Widoki zagnieżdżone, layout. 1. Wprowadzenie Repozytoria danych

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

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Budowanie interfejsów do baz danych

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.

CO NA TO PRACODAWCY?

CO NA TO PRACODAWCY?

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

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 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. Najnowsza wersja to 3.4.20. Less (Leaner CSS) - został stworzony w odpowiedzi na język Sass w roku 2009. W odpowiedzi Sass wprowadził nową składnię scss. Aktualna wersja została oznaczona numerem 2.5.3. 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 0.53.0.

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; } scss css @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

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 Ilość głosów Procentowo Sass 1297 63.95% Less 308 15.19% Stylus 76 3.75% Inny 42 2.07% Żaden 305 15.04% Razem 2028 100% Wyniki ankiety z 2015 roku, http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

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

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.

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 120 8.48% jquery 799 56.47% AngularJS 253 17.88% React 124 8.76% Backbone 42 2.97% Ember 34 2.40% Knockout 21 1.48% Underscore 18 1.27% Wyniki ankiety z 2015 roku, http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results Framework Rozmiar Rozmiar z bibliotekami AngularJS 1.2.22 39.5kb 39.5kb Backbone.js 1.1.2 6.5kb 43.5kb (jquery + Underscore) 20.6kb (Zepto + Underscore) Ember.js 1.6.1 90kb 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 Wbudowana obsługa routingu 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 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.

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

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

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?

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.

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% Wyniki ankiety z 2015 roku, http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

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

DZIĘKUJĘ ZA UWAGĘ