Стандарты фронтенд-разработки в Мэйк

Сегодня рассказываем об инструментах и технологиях, которые используются при воплощении дизайн-макетов в готовый продукт.

 

 

Главная цель сайта — помочь заказчику с наименьшими затратами получить наибольшую отдачу от бизнеса. Для достижения этой цели команда совместно с заказчиком улучшает бизнес-процессы в компании клиента. Поэтому дизайн сайта — не просто красивые макеты, а гипотеза о том, как должна работать вся система.

 

Работа над фронтендом сайта начинается уже в тот момент, когда дизайнер только приступил к работе над проектом, и не заканчивается до самого конца жизненного цикла сайта. Дизайнер советуется с верстальщиком, какие визуальные решения принять, чтобы реализовать проект в рамках бюджета и времени, а главное, корректно воплотить в жизнь с помощью современных технологий верстки. После обсуждения структуры, дизайн можно упростить или же напротив — усложнить, если стандарты и технологии это позволяют. Общение команды дизайнеров с верстальщиками не прекращается на протяжении всей работы над сайтом.

 

 

Когда дизайн закончен, фронтэнд-разработчику передаются готовые макеты, ui-киты, гайдлайны. В них содержится информация о содержании элементов, их взаимодействии друг с другом, общие принципы построения системы и т.д.. Работа над фронтендом предполагает, что сайт разрабатывается программистами на основе предоставленной дизайнерами документации. На практике это означает, что от дизайнера не требуется нарисовать абсолютно все макеты — достаточно задать принципы их построения.

В первые часы работы над версткой не надо сразу набрасываться на макеты и начинать верстать. Для начала было бы неплохо организовать работу над фронтендом.

Проектирование фронтенда

1. Проанализировать макеты и сопроводительную документацию.
2. Выделить общие элементы (если дизайнер не сделал ui-кит, что случается только в микропроектах и крайне редко).
3. Разделить макеты на блоки (так проще держать всю систему в голове).
4. Выделить сложные элементы. Зачастую, вокруг них строится вся структура сайта и взаимодействие других элементов друг с другом.
5. Продумать структуру папок и файлов: они должны иметь осмысленные названия и отражать структуру системы.
6. Определить программное взаимодействие элементов друг с другом.
7. Обдумать систему названий html-классов. Мы используем модифицированную БЭМ-методологию. Она помогает делать классы на странице уникальными и позволяет одним коротким взглядом на название элемента понять, что это за элемент и каково его предназначение. Благодаря особенностям БЭМа мы избегаем проблем со структурой сложных проектов. Для удобной работы с DOM в скриптах, стоит задуматься о резервировании ключевых слов: new, actvie, closed, action и использовать в связке с другими классами. Это сделает код более читаемым, и позволит проще манипулировать элементами в скриптах. 
8. Спроектировать систему взаимодействия javascript-классов. Да, их тоже нужно использовать, а не заниматься приготовлением итальянской пасты (Не вижу ничего плохого в итальянской пасте — прим. ред.). В Ruby on Rails по умолчанию встроен coffeescript, который помогает организовать взаимодействие и намного упрощает синтаксис. Стандарт ECMAScript 6 часть нововведений берет из coffeescript. Это означает, что coffeescript влияет на дальнейшее развитие стандартов и на него стоит обратить внимание другим разработчикам.
9. Предусмотреть возможные изменения. Проект — живой организм, который постоянно меняется. Поэтому в программном коде предусматриваются возможности его быстрого и безболезненного изменения или даже удаления.
10. Выявить слабые места — задуматься, что может пойти не так. Это избавит от проблем в дальнейшем, сделает систему более устойчивой к внешним воздействиям.

После того, как мы поняли, что сверстать и запрограммировать, приступаем к основной работе.

Процесс верстки

Дизайнеры для упрощения работы себе и верстальщику используют модульную сетку. Она помогает меньше задумываться о том, как располагать и комбинировать элементы на странице. Каркас сайта создаётся по такой же сетке. В Мэйке для этого мы используем bootstrap, он упрощает работу с позиционированием блоков относительно друг друга и помогает адаптировать неадаптируемое. Но чаще bootstrap помогает с позиционированием только крупных основных блоков. Для остального используется всем полюбившаяся блочная модель на флоатах или технология flexbox. В крайнем случае, возможно абсолютное позиционирование элементов. Комбинируя эти способы, мы верстаем адаптивные сайты любой сложности.

Когда каркас страницы готов, нужно привести все в приятный человеческому глазу вид. И тут на сцену выходит CSS. Да еще и вместе с помощником, поставляемым из коробки в Ruby on Rails — Sass. Sass превращает CSS в мощный язык программирования, в котором содержатся основные особенности крупных языков: от переменных до миксинов и функций. А сколько же волшебных штуковин можно сделать с помощью третьей версии css! С помощью него можно не только просто изменять стили, но и создать свои сложные графические конструкции,  которые можно свободно модифицировать. Кроме того, таблицы стилей позволяют добавлять к элементам различные по сложности графические эффекты, вроде градиентов или фильтров. Для тех, на кого давят рамки обычной 2D-страницы, есть замечательная возможность создавать свои сайты с использованием "трёхмерных" объемных эффектов, используя свойство perspective. Также с помощью css можно добавлять на страницу сложные анимации. 

 

Анимации на сайте

На этом остановимся подробнее. Анимации — закономерное развитие веб-дизайна. Современные интерфейсы движутся в сторону минималистичных, плоских элементов. Для добавления интерактивности используются анимации. Они делают сайт живее, привлекают пользователя, помогают взаимодействовать с сайтом. Правильно анимированный сайт — живой организм, который привлечёт внимание к нужным вещам, подскажет как с ним общаться, ответит на действия пользователя.

Какие анимации будут на сайте, решает дизайнер. Кстати, наш арт-директор написал весьма прикольную статью по этому поводу. Я же расскажу, какими способами можно анимировать сайт:

1. СSS-анимации. Кажущаяся простота скрывает мощный механизм анимации. Этот тип анимации лучше использовать, когда нет большого количества взаимодействующих и передающих друг другу информацию элементов.
2. SVG-анимации. SVG – векторный формат графики. Преимущество векторной графики в вебе — четкое отображение на всех разрешениях и  типах мониторов, потому мы  по возможности используем svg для всей графики на сайте, за исключением фотографий и растровых иллюстраций. SVG-файлы содержат в себе информацию о построении изображения в виде свойств (например, стандартных примитивов — прямоугольников, эллипсов, сложных ломаных линий (path) и т.д.), значения которых можно менять как при помощи скриптов, так и с помощью встроенной в сам формат системы анимации. 
3. Javascript. Сам по себе JS не содержит встроенных средств для удобной работы с анимацией, но помогает скоординировать работу нескольких взаимодействующих CSS или SVG-анимаций. Это делается вручную, либо же с помощью библиотек. Например, jquery-библиотеки анимируют DOM-элементы, а библиотека d3 упрощает работу с svg-анимациями.
4. HTML5 Сanvas. Предназначен для сложной анимации множества взаимодействующих элементов, расположенных в каком-либо одном контейнере. Подходит, например, для создания трёхмерных игр на странице, или других интерактивных блоков, со сложной структурой взаимодействия между сайтом и пользователем.

Программирование

Для координации взаимодействия элементов и того, чтобы вся красивая вёрстка не развалилась, как карточный домик, продумывается система javascript-классов. Базисом служат принципы ООП (объектно-ориентированное программирование) и паттерны проектирования.

Правильно спроектированный программный код гибкок и устойчив к изменениям. Данный подход упрощает совместную работу программистов над проектом, даже если они находятся в разных уголках планеты (и такое у нас приключалось). Подобная система хоть и сложна, но окупается в дальнейшем: сайты продолжают жить, развиваться, порой даже без нашего участия — силами разработчиков из других компаний. Нам потом меньше икается :)

О сторонних библиотеках

Для упрощения работы программисты применяют различные библиотеки, подключают CMS-системы, пользуются фронтенд-фреймворками. Мы в Мэйк считаем, что это не всегда того стоит. Используя наработки других программистов, вы загоняете себя в узкие рамки того, что кто-то другой придумал за вас.  Это мешает развиваться и выходить за рамки дозволенного.

Тем не менее, для ускорения разработки стандартных элементов и стандартного функционала, мы тоже используем сторонние библиотеки. Но каждая из применяемых нами библиотек действительно очень гибка и многократно проверена на десятках проектов:

• Bootstrap — ускоряет создание типовых элементов, при этом сохраняя высокую гибкость.
• jqueryUI — используется, если какие-то элементы мы не можем реализовать с bootstrap.
• D3 — помогает работать с svg.
• Slick Slider — отличный инструмент создания слайдеров.
• JS-фреймворк reactjs. Предназначен для сайтов со сложной логикой во фронтенде и не менее сложным взаимодействием с бэкэндом.

Это основные библиотеки, которые мы используем в агентстве. Они удовлетворяют 90% потребности в стороннем функционале.

Иллюстрация: Miguel Batres

---