Инструменты и технологии современного
frontend-разработчика
Зарема Халилова
4
Редакторы кода и IDE
Sublime Text
Atom
Brackets
Visual Studio Code
WebStorm
5
Контроль версий
Git
Хостинг кода
GitHub
Bitbucket
7
Поиск, установка и обновление библиотек для проекта
Менеджеры пакетов
npm
bower
9
Сборка модулей и ресурсов
RequireJS
Browserify
jspm
Webpack
10
Live reload
LiveReload
Browsersync
Автоматическая перезагрузка страницы в браузере при изменение её кода и ресурсов (html, css, js, images и т.п.)
12
Инициализация проектаYeoman
Volo
Grunt-init
Развертывание файловой структуры и генерация кода
14
HTML: шаблонизаторы
Jade
EJS
mustache.js
Handlebars
json2html
Markdown
15
CSS: методологии
БЭМ
OOCSS
SMACSS
MCSS
FUN
16
CSS: процессоры
LESS
Stylus
Sass
Препроцессоры
ПостпроцессорыPostCSS
17
CSS: frameworks
Twitter Bootstrap
Foundation
Materialize CSS
Framework 7
18
JavaScript
ECMAScript 6
ECMAScript 7 – будущее языка
В июне 2015 была принята новая спецификация языка
Чтобы писать код на ES6 сейчас нужен транспайлер
19
JavaScript: библиотеки
jQuery
Underscore
lodash
20
JavaScript: frameworks
Angular
React + Redux/Flux
Ember
Backbone
Vue.js
22
Chrome DevToolsОткрываете страницу Chrome и нажимаете Ctrl + Shift + I
Эмуляция разных устройств и экранов
Отладка на Android-устройстве
23
Браузеры и устройства
BrowserStack
CrossBrowserTesting
Как выглядит сайт в разных браузерах? Ручное тестирование и скриншоты.
24
Тестирование по-взрослому
Karma
Mocha
Jasmine
Qunit
PhantomJS
27
Linters
JSHint
JSLint
ESLint
CSS Lint
Утилиты для проверки качества кода
28
Валидация HTML и CSS
W3C validator
Красивый CSS
CSScomb
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