В цикле статей "Быстрая разработка" мы расскажем, как обычно проходит производство сайтов у нас. Если вы разработчик и вам интересно, как именно этот процесс устроен у нас - добро пожаловать. Если вы заказчик, то эти статьи помогут вам лучше понять, за какую работу вы платите деньги веб-студиям, где может быть "узкое место" и почему иногда "так сложно передвинуть чуть-чуть влево логотип".
На дворе, как модно говорить, 2K17, мир всё ускоряется, и разработка сайтов - не исключение. С каждым днем мы получаем всё большее количество инструментов для удобной и быстрой работы. Сегодня будем говорить об оптимальном пути в быстрой разработке. Многие инструементы будут для вас (надеюсь) не в новинку. Также обращаю внимание, что не претендую на абсолютную правильность и единственно возможный вариант работы - лишь рассказываю, как этот процесс устроен у нас в Snapix.
Это первая часть статьи о быстрой разработке.
- В первой части делаем обзор современных технологий.
- Во второй части рассматриваем практические примеры.
Часть 1. Инструменты разработчика.
Yarn / NPM
Пакетный менеджер для установки необходимых библиотек. Экономит кучу времени и сил. Одной командой можно добавить, например, Bootstrap или необходимую библиотеку вроде Fancybox. Кроме того, сохраняет силы и нервы, если вы разрабатываете на нескольких машинах или силами нескольких разработчиков - перенос сторонних библиотек становится ненужным, так как в файле package.json хранится всё, что нужно.
Например,
yarn init
yarn add bulma
yarn add slick
Добавит в вашу папку node_modules CSS-фреймворк Bulma и js-слайдер Slick, которые потом можно использовать.
Кстати, предлагаю обратить внимание на Bulma как отличную замену Bootstrap. http://bulma.io
Подробнее - https://yarnpkg.com/
Less / Sass
Писать чистый CSS занимает очень много времени и уже давно не круто. Less (его используем в работе намного чаще, разница с Sass не принципиальна) позволяет комплировать правила в обычный CSS, экономя массу времени и позволяя легче поддерживать код. Less позволяет использовать переменные, функции, примеси (добавление нескольких других стилей в один) в CSS, позволяя очень легко изменять весь дизайн сайта в несколько кликов.
Например,
@color-primary : #ff0000;
@color-secondary: #00ff00;
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
a {
color:@color-primary;
font-size: 15px;
.transition(all 0.4s);
&:hover {
color: @color-secondary ;
}
@media ('only screen and (max-device-width: 380px)'){
font-size: 18px;
}
}
после компиляции трансформируется в
a {
color: #ff0000;
font-size: 15px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
a:hover {
color: #00ff00;
}
@media ('only screen and (max-device-width: 380px)') {
a {
font-size: 18px;
}
}
Как видно, у нас есть переменная @color-primary : #ff0000;, которая содержит код цвета. Если необходимо будет во всём сайте поменять красный (#ff0000) на любой другой, это нужно будет изменить лишь в одном месте. И это - лишь малая часть того, что может Less.
Подробнее - http://lesscss.org/
Emmet
Обязательная для верстальщика надстройка для любимого редактора.
Вкратце - стоит, например, написать
div.container>div.row>ul>li.item*4
и нажать tab, как это трансформируется в
<div class="container">
<div class="row">
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
У Emmet еще очень много других возможностей. Подробнее - https://emmet.io/
GIT
Мне кажется, об этом не сказал еще только ленивый.
Сохраняйтесь чаще, чтобы не потерять ваши изменения! И всегда ведите проект в GIT-репозитории. Что такое GIT рассказывать в подробностях нет смысла, ибо это тема отдельной статьи (а то и книги ) Смысл в том, что весь проект содержится в репозитории, проект имеет ветки измененных состояний и узлы состояний - коммиты.
Мы используем в качестве клиента Atlassian SourceTree. Проекты хранятся в облаке BitBucket в приватных репозиториях и GitHub - для общедоступных проектов.
Таким образом, вся история разработки проекта хранится в понятной структуре, отслеживающей изменения, позволяющая команде разработчиков эффективно работать сообща. Например, вы можете "откатиться" на месяц назад и посмотреть, что было в вашем файле тогда и сейчас.
SVG
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) - это векторные изображения, которые отрисовывает браузером. Главное преимущество вектора над обычными картинками - они масштабируются без потери качества. Дело в том, что формат SVG описывает форму изображения математическими формулами, а не данными о пикселях, как растровые изображения.
Таким образом, SVG экономит место, уменьшает время загрузки и позволяет легко манипулировать собой. Например, объект SVG может состоять из нескольких элементов, каждый из которых можно, например, стилизовать с помощью CSS. Например, для изменения цвета логотипа больше не нужно перерисовывать его из исходника и загружать снова на сервер - достаточно просто поменять одну строчку в CSS-файле.
Это неполный список используемых технологий, так как обзор всех нюансов займет очень продолжительное время. Во второй части цикла статей мы рассмотрим технические приемы и подходы в разработке, разберемся в сложных взаимоотношениях с фреймворками, а также дадим несколько рекомендаций по общей организации процесса разработки. На связи!
Александр Гуськов, ведущий разработчик.