31
Инструменты и технологии современного frontend-разработчика Зарема Халилова

Инструменты и технологии современного frontend-разработчика

Embed Size (px)

Citation preview

Инструменты и технологии современного

frontend-разработчика

Зарема Халилова

2

3

Автоматизация и окружение

5

Контроль версий

Git

Хостинг кода

GitHub

Bitbucket

6

Платформа

7

Поиск, установка и обновление библиотек для проекта

Менеджеры пакетов

npm

bower

8

Автоматизация задач

Grunt

Gulp

9

Сборка модулей и ресурсов

RequireJS

Browserify

jspm

Webpack

10

Live reload

LiveReload

Browsersync

Автоматическая перезагрузка страницы в браузере при изменение её кода и ресурсов (html, css, js, images и т.п.)

11

Live reload

12

Инициализация проектаYeoman

Volo

Grunt-init

Развертывание файловой структуры и генерация кода

13

Разработка

16

CSS: процессоры

LESS

Stylus

Sass

Препроцессоры

ПостпроцессорыPostCSS

18

JavaScript

ECMAScript 6

ECMAScript 7 – будущее языка

В июне 2015 была принята новая спецификация языка

Чтобы писать код на ES6 сейчас нужен транспайлер

19

JavaScript: библиотеки

jQuery

Underscore

lodash

21

Тестирование и отладка

22

Chrome DevToolsОткрываете страницу Chrome и нажимаете Ctrl + Shift + I

Эмуляция разных устройств и экранов

Отладка на Android-устройстве

23

Браузеры и устройства

BrowserStack

CrossBrowserTesting

Как выглядит сайт в разных браузерах? Ручное тестирование и скриншоты.

24

Тестирование по-взрослому

Karma

Mocha

Jasmine

Qunit

PhantomJS

25

Mocha тест

26

Качество кода

27

Linters

JSHint

JSLint

ESLint

CSS Lint

Утилиты для проверки качества кода

28

Валидация HTML и CSS

W3C validator

Красивый CSS

CSScomb

29

Быстрый старт

30

Быстрый старт

1. Установите Node.js

2. Откройте командную строку

3.

4.

5.

6.

С помощью Yeoman можете развернуть каркас приложения с настроенными задачами и Live reload

https://github.com/yeoman/generator-gulp-webapp#getting-started

npm install --global yo gulp bower

npm install --global generator-gulp-webapp

mkdir myapp && cd myapp

yo gulp-webapp

Спасибо!Вопросы?

Зарема Халилова[email protected]://vk.com/nowbrow