Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Пишем модульный код для контентного сайта

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

conditioner

Собственно, не все сайт должны быть одностраничными. Особенно если речь идет об индексации и времени рендера для конечного пользователя. Ничто так быстро не рендерится в браузере как обычный html, а уж если нужно поддерживать разные устройства с разным объемом памяти, то вот тут и начинаются танцы с бубном.

Так вот в случае с контентым сайтом “js сахар” добавляется модульно, там где нужна интерактивность:

Таких модулей может быть несколько на странице, а может и вообще не быть, все зависит от контента. Сайт же у нас контентный, вот от него и пляшем. При таком подходе хочется, чтобы необходимый js загружался только когда он нужен, а не одним модулем на каждой страницу. Вот тут и возникаем проблема. Как это обеспечить?

Один файл со всем кодом писать не хочется – ибо он со временем разрастется и станет бегемотом. Как-то исхитриться и компоновать код под каждую страницу? А как это автоматизировать? Очень не хочется вести список модулей для каждой страницы и не забывать его постоянно обновлять. Нужно решение, которое бы позволяло подтягивать модули в зависимости от html, то есть весь необходимый функционал был бы описан в разметке страницы, а внешний модуль подтягивал бы релевантный код.

Итак, давайте посмотрим на вариант реализации. Разумеется, мне с самого начала хочется использовать webpack, а не городить какие-то другие решение. Все по тому что и привычно и хочется посмотреть как его применить. Структура папок будет вот такая:

Страницу долго придумывать не будем, просто возьмем прием работы бустрапа – Pricing example. Я просто взял весь внутренний код и начал работать с ним

content-js-site

Добавим немного интерактивности, пусть при наведении мышкой на карточку с ценой она увеличивается. Все исключительно на js, что бы показать работу. Для анимации будем использовать библиотеку animejs – достаточно простой вариант анимации не на базе css.

Теперь сама кодовая база. Основной файл, через который webpack будет компилировать все остальные будет index.js. В этом файле описываем как вебпаку нужно будет загружать модули – moduleImport. Это стандартный мета-синткас менеджера сборки.

Теперь сам модуль для анимации карточки – modules/priceCart.js

Теперь добавляем код модуля в сам html:

Вот, собственно, и все. Можно продолжать экспериментировать 🙂 Кстати, полный код находится вот здесь: https://github.com/artemdemo/content-js-site

Ссылки по теме:

Поделиться:
comments powered by Disqus