ОБЗОР НЕКОТОРЫХ СОВРЕМЕННЫХ ТЕХНОЛОГИЙ, ПРИМЕНЯЕМЫХ В РАЗРАБОТКЕ ВЕБ-СТРАНИЦ

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

После завершения работы UI/UX дизайнера и отрисовки макетов следует процесс разработки сайта. На этом этапе происходит «оживление» отрисованных макетов. Работа с кодом происходит в различных редакторах. Поэтому я считаю нужным начать обзор именно с редакторов кода.

Текстовые редакторы

Среди наиболее популярных на сегодняшний день, по данным «html academy» [4], я выбрал три: «Sublime Text», «Atom», «Brackets».

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

Sublime Text является простым текстовым редактором. После установки есть возможность настроить темы оформления, для удобства визуального восприятия кода. Имеется возможность разделять экран для одновременной работы с несколькими файлами. Также есть боковая колонка в которой отображается навигация по папкам, с которыми идет работа.

Имеется возможность установки шрифта, количества пробелов, выставляемых клавишей «tab», установки множественных курсоров. Для этого редактора доступны многие расширения, включая популярный на сегодняшний день Emmet.

Минус использования Sublime Text в том, что при установке он представляет собой обычный текстовый редактор, похожий на «блокнот» [4], для установки расширений придется дополнительно установить PacageControl, настроить дополнительно в конфигурационном файле прежде чем работать. Это отнимает много времени и может сильно затруднить работу начинающему разработчику.

Редактор Brackets разработан компанией Adobe, доступен на всех платформах, также имеет как Sublime возможность разделения экрана, множественные курсоры. После установки он уже имеет в комплекте некоторые расширения. Одним из известных расширений является inline editor [4], который позволяет редактировать стили непосредственно находясь в HTML разметке. Однако, считаю, что для начинающего разработчика будет проще все-таки работать в разных файлах, вынесенных в раздельные окна.

Редактор Atom является разработкой команды GitHub. Он имеет те же основные возможности, как и предыдущие редакторы: установка множественных курсоров, настройка количества пробелов или установка отступов табуляциями, настройка тем оформления. [4]

Особенностью этого редактора является в том числе и то, что он устанавливается как portable, тем самым после удаления он не оставит после себя следов. Есть возможность добавлять проекты и осуществлять поиск не только по отдельно взятому файлу, но и по всему проекту. Особенно стоит отметить удобство установки расширений, многие из которых идут в комплекте при установке, многие расширения написаны другими разработчиками и база расширений может предложить ответ почти на любой запрос разработчика. Большим плюсом является наличие функций работы с Git [3], начиная с подсветки изменений в файлах, поэтому я предпочитаю использование именно этого редактора. Он прост в использовании, можно рекомендовать его к использованию начинающим разработчикам, к слову, преподавая создание сайтов детям, я заметил, что они легко осваивают эту программу.

Сброс стилей

Каждый браузер имеет свою таблицу стилей по умолчанию, поэтому в каждом браузере она может отличаться. Существует два популярных способа приведения стилей к единому образу.

Первый способ — это использование reset.css, [2] целью которого является сброс стилей браузера, которые используются последним по умолчанию. Стили сбрасываются в том числе и для заголовков, внешние отступы которых устанавливаются в 0, после чего во всех браузерах страница отображается одинаково, но разработчику приходится заново устанавливать все стили, что занимает дополнительно время и увеличивает количество строк кода.

Поэтому на смену первому способу приходит второй — это использование normalize.css, который не сбрасывает стили полностью, а устанавливает единый вид элементов на странице во всех браузерах. [2] В этом случае нет нужды переписывать заново все стили, которые были сброшены, а только модифицировать при необходимости. В целом среди разработчиков сейчас больше используется, по моим наблюдениям, все же второй подход. Скачать этот файл можно из соответствующего репозитория на github.

Методологии

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

SMACSS, расшифровывается как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS. [2]  Здесь разделяются понятия о разметке и классах на уровни: базовый, макет, модуль, состояние, тема. Базовый — это то, что касается непосредственно тегов HTML. Макет —  это то, что оформляет секции. Модуль — то, что содержит элементы, которые возможно использовать повторно, как навигация, списки. Состояние отображает то, как выглядят модули и секции в разных состояниях: активном, раскрытом. Тема отражает то, как могут выглядеть модули и секции.

БЭМ, которая разработана в компании Yandex. Расшифровывается как Блок Элемент Модификатор. Каждый элемент на странице, который может существовать независимо на ней или внутри другого блока, как, например, навигация, будет являться блоком. В блоках содержатся элементы, они существуют только в контексте блока. У элементов и блоков могут быть состояния или модели представления, среди них можно перечислить: цвет, размер, прозрачность, форму. За эти свойства отвечают модификаторы, например, существует кнопка, которая при нажатии становится красной, в этом случае красный цвет будет придаваться модификатором. [7] Я использую именно эту методологию и заметил, что она достаточно популярна на территории Росси. Я предпочитаю ее в том числе и потому, что она, по большей части, независима от разметки. Насколько мне известно, за границей более популярна SMACSS.

Препроцессоры

Насколько я знаю, PHP планировался как препроцессор HTML, поэтому есть возможность легко встраивать код на этом языке в разметку. Однако, сегодня есть другие решения, такие как Jade (Pug). Здесь появляется возможность быстрее писать разметку страницы и возможность создания блоков, которые можно использовать несколько раз. Также возможность использования циклов, миксинов (примесей), JavaScript. Обеспечивает модульность разметки и сокращает код. [1]

При написании CSS большинство разработчиков пользуется препроцессорами, в отличие от препроцессоров для разметки. Среди основных вариантов стоит выделить SASS (SCSS) и LESS [5], также существует Stylys.

В SASS существует два варианта синтаксиса, разделение как в обычном CSS фигурными скобками и второй вариант с отступами, и пробелами, как например, в языке программирования Python. В LESS есть только один вариант синтаксиса, как в обычном CSS.

Препроцессоры позволяют организовывать стили в различные файлы, например, я использую для каждого блока свой файл .sass, также это позволяет прописывать медиа-запросы непосредственно в коде блока [5], что удобно, поскольку позволяет видеть всю картину в целом, для различных разрешений и иметь быстрый доступ к настройке. Такое разделение позволяет избежать дублирования стилей и селекторов, сохранение значений в переменные. Также, поскольку есть возможность импорта всех созданных файлов SASS в один. Обычно я называю его main.sass, то в конечном итоге получается один собранный и минифицированный CSS файл.

Файлы, написанные на SASS или LESS требуют компиляции. Ее можно осуществлять либо на этапе сборки проекта, либо используя специальные программы, такие как prepros.

Сборка проектов

Для сборки проектов, компиляции файлов препроцессоров, минификации CSS и JavaScript файлов можно использовать один из сборщиков, как Grunt, Gulp или Webpack.

Grunt и Gulp являются системой организации задач, сборка осуществляется при помощи плагинов. Webpack является системой сборки [6], одним из преимуществ Webpack перед Grunt и Gulp является то, что первый анализирует код CSS, JavaScript, анализирует зависимости и компилирует выходной пакет.

Система контроля версий

В качестве системы контроля версий стандартом является Git. Он позволяет синхронно работать с файлами разным разработчикам [3]. Также можно отслеживать изменения, внесенные в файлы. Благодаря системе контроля версий можно делать так называемые ветви, не затрагивая основной проект. Можно экспериментировать, например, над другим вариантом верстки шапки. После удачного эксперимета полученные изменения внести в основную ветку, слить бранчи. Если эксперимент не оправдал себя, то эту ветку можно удалить, не потеряв при этом других изменений в проекте. Git избавляет от необходимости хранить копии файлов, как index_1, index_final и т.д. вместо этого сохраняются внесенные изменения и обозначаются как коммиты, и можно вернуться к любому шагу при помощи команды, как, напрмер, reset --hard. Репозитории обычно хранят в облаке на bitbucket или github, что также позволяет одному человеку работать с проектом с разных устройств.

Итог

Теперь у читателя должно сформироваться представление о том, какие технологии сейчас актуальны для изучения в области front-end. Для чего нужна так или иная технология, чем она отличается от других подобных продуктов. Задача этой статьи сделать обзор, после прочтения которого у читателя сложится общее представление о современных технология, применяемых в разработке веб-страниц сегодня.

Список литературы:

1. Андрей К., Туториал по Jade для начинающих, 2016 [Электронный ресурс], режим доступа – https://habrahabr.ru/post/278109/ (дата обращения 28.04.2017)
2. Антон С., Создание веб-сайта. Курс молодого бойца, 2015. [Электронный ресурс], режим доступа – https://habrahabr.ru/post/273795/ (дата обращения 28.04.2017)
3. Евгений А. Ежедневная работа с Git, 2013 [Электронный ресурс], режим доступа – https://habrahabr.ru/post/174467/ (дата обращения 28.04.2017)
4. Сергей П., Текстовые редакторы для верстальщика, 2015. [Электронный ресурс], режим доступа – https://htmlacademy.ru/blog/40-editors-for-the-coders (дата обращения 28.04.2017)
5. Сергей П., Что такое Less и Sass?, 2015 [Электронный ресурс], режим доступа – https://toster.ru/q/175853 (дата обращения 28.04.2017)
6. Gulp vs grunt vs webpack: comparison of build tools / task runners, 2017 [Электронный ресурс], режим доступа –   https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners (дата обращения 28.04.2017)
7. Maria P. Tame Unruly Style Sheets With These Three CSS Methodologies, 2017 [Электронный ресурс], режим доступа – https://www.sitepoint.com/tame-unruly-style-sheets-three-css-architecture-methodologies/ (дата обращения 28.04.2017)