Быстрая разработка сайтов и лендингов. Часть 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-файле.
Это неполный список используемых технологий, так как обзор всех нюансов займет очень продолжительное время. Во второй части цикла статей мы рассмотрим технические приемы и подходы в разработке, разберемся в сложных взаимоотношениях с фреймворками, а также дадим несколько рекомендаций по общей организации процесса разработки. На связи!
Александр Гуськов, ведущий разработчик.
Comments (3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi, vitae mattis nulla ante id dui.
November 12, 2017 at 1:38 pmLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.
November 12, 2017 at 1:38 pmLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.
November 12, 2017 at 1:38 pmLorem ipsum dolor sit amet, consectetur adipiscing elit.
November 12, 2017 at 1:38 pmLorem ipsum dolor sit amet, consectetur adipiscing elit.
November 12, 2017 at 1:38 pm