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

Frontend аудит сайта – adme.ru

Сегодня опять сайт широкой тематики – adme.ru. Основное направление сайта, как редакторы сами его определяют, это творчество и все, что с этим связано. Ходовой товар, правильно делают, давайте посмотрим, что творится у них “под копотом” 🙂

adme-ru

CSS

Сайт совершенно не адаптивный. То есть не то чтобы “не до конца, но рассчитан не некоторые размеры экрана”, нет, нет – в стилях вообще не прописан media-query. Это по-своему неожиданно, потому что верстка в принципе простая и на первый взгляд сделана как раз для адаптивности.

В стилях достаточно много каскадов, хотя с другой стороны, из них используется только четверть, так что каскады может не так сильно и влияют. Хотя конечно не понятно зачем столько стилей тащить с сервера. Подозреваю что проблема в легаси коде, но все равно хочу призвать выпиливать все это:

adme-ru-css-usage

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

И “important” в стилях тоже не стоит применять. Без него можно справится. Особенно странно “important” выглядет в сцепке с ховером. Это что же до него за каскад стоит, что без этого бронебоя не обойтись?

adme-ru-css-important

Плюс дизайн сайта нистолько прост (это, кстати, плюс), что жалко, что его не используют для поддержки адаптивности. Вроде как немного нужно поправить, чтобы на смартфонах смотрелся хорошо. А если еще и заиспользовать PWA, то вообще отлично будет, тем более, что что-то мне подсказывает, что большая часть просмотров со смартфонов идет от андроидов. Имеет смысл изучить этот вопрос.

JS

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

Заглянем что там внутри. Тут два основных файла:

Думаете потому что один сидит в хедере, а второй в футере? Нет, не угадали! Может раньше так и было, но теперь оба сидят в футере, собственно туда им и дорога конечно.

Основной код находится в файле “js-common”, файл “js-common-footer” и меньше и в нем код больше напоминает настройки, обрывки данных для разных категорий, ничего особо интересного нет. Единственное чем этот файл примечателен это тем, что он в глобальном скопе объявляет "use strict"; на 403 строке.

Ба-бах! Разработчики, как будто говорят – мы уверены в своем коде и в библиотеках, которые подключаем, у нас не могут внезапно всплыть несостыковки из-за глобальной директивы. Ну, может у них и правда все так круто, я не знаю 🙂

Весь функционал js на фронте построен вокруг jQuery, который использует кастомные плагины. Это хорошо видно из файла “js-common”.

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

Для начала посмотрим на основной объект, который обеспечивает ООП:

adme-ru-lixil

Я не знаю с чем связанно название “Lixil”, вполне возможно сокращение от чего-то, кстати, если есть догадки, то пишите в комментариях. Итак, у объекта есть три метода: “extend”, “mixin”, “export”:

Что такое пространство имен. Это подход в программировании, который обеспечивает упорядоченное объявление объектов, так что бы не захламлялось глобальный скоуп и чтобы не было пересечения имен. При таком подходе объявление новых объектов будет выглядеть следующим образом.

Создаем новое пространство имен и добавляем ему свойства:

Создаем базовую функуию, от которой будем наследовать все остальные:

Добавляем методы, которые должны быть доступны дочерним объектам:

Теперь мы можем применить наследование:

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

Вполне возможно, что имело бы смысл добавить хотя бы Backbone, для более слаженной работы с данными.

Основная проблема в работе только на базе jQuery в том, что приходится писать код императивно – то есть вы сами после каждого действия указываете системе какие изменения (в основном визуальные) должны произойти. Выглядит это вот так:

adme-ru-imperative-approch

В декларативном же подходе вы определяете модель данных и относительно ее изменений, происходит изменение в приложении. Яркий пример такого подхода – это React вместе с Redux (или любой другой вариант декларативной модели).

Разумеется каждая команда выбирает свой путь, по которому будет идти в разработке, что не мешает нам высказать свое оценочное суждение 😉

Ссылки по теме:
Essential JavaScript Namespacing Patterns
Declarative programming

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