Быстрая разработка сайтов и лендингов. Часть 1.

В цикле статей "Быстрая разработка" мы расскажем, как обычно проходит производство сайтов у нас. Если вы разработчик и вам интересно, как именно этот процесс устроен у нас - добро пожаловать. Если вы заказчик, то эти статьи помогут вам лучше понять, за какую работу вы платите деньги веб-студиям, где может быть "узкое место" и почему иногда "так сложно передвинуть чуть-чуть влево логотип".

На дворе, как модно говорить, 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-файле.

Это неполный список используемых технологий, так как обзор всех нюансов займет очень продолжительное время. Во второй части цикла статей мы рассмотрим технические приемы и подходы в разработке, разберемся в сложных взаимоотношениях с фреймворками, а также дадим несколько рекомендаций по общей организации процесса разработки. На связи!

Александр Гуськов, ведущий разработчик.