Главная  /  Материал

CMS в одном файле

31 августа 2019, 10:55  Просмотров: 151

Вы видели CMS сайта или магазина изнутри? Обычно это сотни и тысячи файлов, десятки папок, внутри которых лежат другие папки, внутри которых лежат другие папки... Множество файлов стилей, шаблоны, и километры кода. 

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

100 килобайт кода


Некоторое время назад я сформулировал для себя задачу: создать движок сайта, который умещается в один файл и весит при этом меньше 100кб. На сколько это реально? На многих сайта серьезных CMS один логотип весит больше... Сейчас я знаю, что это возможно:) Во всяком случае, для создания блога, информационного сайта, сайта новостей и т.п.

Современные сайты активно используют jQuery и Bootstrap - я пошел по этому же пути и подключил к сайту эти фреймворки. Это позволило радикально расширить возможности верстки и доступный функционал. На всякий случай напишу, что если вы не поняли ничего в этом абзаце - просто забудьте его:) Это никак не помешает пользоваться сайтом.

Пробежимся по функционалу


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

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

К моменту первой установки для реального проекта мой движок умел:

  • добавлять материалы с разными статусами
  • вставлять в текст картинки по ссылке и с загрузкой на сервер
  • создавать фотоальбомы
  • добавлять видео по ссылке
  • добавлять к материалам два типа тегов: гео и смысловые
  • искать материалы по одному или нескольким тегам
  • искать по тексту - фразы и ключевые слова
  • выводить календарь с подсветкой дней публикаций
  • подстраиваться под разные экраны и устройства

Сейчас движок умеет уже намного больше, но все-еще весит меньше 100кб и умещается в одном файле! И я ставлю задачу оставаться в этих искусственно созданных для себя рамках. Потому что это возможно:)

Оптимизация оптимизации


Мне было интересно, возможно ли создавать компактный код и при этом соответствовать требованиям к скорости работы, удобству и не нагружать сервер. Для тестирования сайтов вебмастера обычно используют специальные инструменты. Самым популярным и авторитетным является Lighthouse. По результатам тестов сайту назначается балл. Чем он выше - тем лучше у сайта дела. Я тестировал в нем множество сайтов, улучшая их и оптимизируя. Но на этот раз я задался вопросом: а можно ли получить самый высший балл во всех этих тестах? Реально ли это?

Я протестировал с помощью Lighthouse все свои страницы в соцсетях, протестировал пару блогов на Wordpress, протестировал пару новостных сайтов и собрал статистику. Результаты были предсказуемо неоднозначные: ни один из сайтов не смог набрать даже 90 баллов из 100 сразу по всем тестам, хотя в некоторых тестах заветная сотка достигалась. Что ж, тем интереснее:)

Сейчас я могу констатировать: набрать 100 балов сразу во всех тестах Lighthouse возможно и я это сделал. Мне пришлось менять верстку, адаптировать цвет ссылок и контраст для слабовидящих, подключать PWA, сжимать все, что сжимается - но результат того стоил: цель достигнута:) Лет 15 назад я впервые услышал от авторитетного разработчика фразу, что "лучший валидатор - это браузер клиента". Наверное, до сих пор так и есть, но я любопытный и упертый:) Мой движок может набрать 100 баллов из 100 и меня это очень радует.


Популярное на сайте:

0,00252, 1,3 Mb