Разработка лэндингов

Недавно сделал своей супруге лэндинг-страницу по теме логопед во Всеволожске.

Поскольку мой блог — технический, я опишу то, как и чем я это делал. В процессе разработки помимо само собой подразумевающегося (HTML, CSS, JS) я выбрал следующий арсенал: Less, AngularJS, Grunt, RequireJS.

Многие спросят: «Зачем для лэндинга AngularJS»? Ответ тут простой. Во-первых, конкретно для этого сайта я соглашусь, что возможностей AngularJS чересчур много. Но в будущем я хочу разработать такую базу компонентов, из которых можно будет достаточно просто сконструировать лэндинговую страницу любого состава. Нужна модульность, чтоб можно было какие-то модули для конкретной реализации подключать, а какие-то отключать. Из коробки AngularJS может покрыть очень большой спектр моих потребностей, поэтому я его и выбрал с расчётом на будущее. Во-вторых, фрэймворк в какой-то мере определяет архитектуру приложения. В-третьих, мне Angular очень симпатичен и достаточно хорошо знаком, поэтому сложностей в разработке не возникло вообще.

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

Less… Ну тут лично я не вижу вообще, что объяснять. Писать на голом CSS при наличии CSS-препроцессоров — это пустая трата времени, сил и нервов. С препроцессорами гораздо безопаснее рефакторинг, поскольку тебе не надо по всем файлам бегать и менять селектор. Препроцессоры позволяют значительно расширить возможности нативного CSS. В общем, если вы вдруг еще не используете CSS-препроцессоры — скорее исправляйте это недоразумение. Вот увидите, вам это очень понравится!

Grunt я использую для сборки — проверка, сжатие скриптов и стилей, составление нужного списка файлов, архивирование для копирования на production-сервер и др. Использую плагин Grunt’а, который по одному главному файла приложения по RequireJS-зависимостям собирает JS и некоторые HTML и CSS-файлы в один optimized.js. И это мне очень нравится! Результирующий собранный и сжатый файл весит менее 300 КБ без zip-архивирования и менее 100 КБ с архивированием. Учитывая, что эта статика будет кэшироваться, в её состав входят некоторая разметка и стили и нынешние скорости интернета достаточно высоки, размер получился классный!

Backend-часть у меня пока примитивная и состоит только из одного API-метода, отправляющего данные из формы обратной связи на наши адреса. По этой причине описывать там пока нечего :)

Помимо всего выше описанного я использовал npm и bower для управления зависимостями. И еще старался применять соглашение по именованию селекторов по БЭМ-методологии.

Вот и всё! Краткий обзор того, что и зачем я использовал при разработке лэндинга готов! На мой взгляд, получился достаточно милый, симпатичный и приятный адаптивный (хорошо смотрится на разных устройствах и дисплеях) сайт. Если вам понравился результат моих трудов, и вам тоже хочется — пишите! :) А пока ещё раз упомяну про сайт логопеда во Всеволожске и группу ВКонтакте. Если вступите в группу — будем очень рады :)

До новых статей!