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

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

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

drom

CSS

По стилям есть вопросы только с именованием. Все сделано по БЭМ’у, но встречаются вот такие моменты b-media-cont b-media-cont_margin_huge. Тут не понятно почему есть модификатор на модификаторе “_margin_huge”. Или второе подчеркивание уже не признак модификатора, а просто разделение? Может и так, но сложно читается.

Я не нашел каскадов – это очень правильно.

 

JS

Сразу обращаем внимание на первую строчку в js файлах:

drom-use-strict

Кажется, что такого в строчке "use strict"; – все же по феншую. Но не совсем, дело в том что объявление этой директивы в глобальном скопе в потенциале может быть проблемным. Так как при таком подходе браузер будет от всех библиотек на странице этого стандарта, а они могут не соответствовать. В общем подход хороший, но чреватый.

Распространенный подход при работе с jQuery – хранить состояние приложения и данные в DOM’е. В данном случае, есть функция, которая собирает данные из html элемента.

drom-data-in-tags

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

Кстати, обратите внимание на то, что глобальная функция parseInt используется со вторым параметром, в данном случае это “10”. Ребята определенно используют eslint для проверки кода, что очень хорошо. Собственно то, что используется проверка стилей кода понятно и по первым строкам файла, но parseInt с двумя параметрами это такой явный почерк 😉

В коде очень не хватает шаблонизатора, часто встречаются вот такие куски:

drom-template

Такой код сложно редактировать и править. Его сложно переносить в другую часть приложения и он просто выглядит оторванно от своего окружения: js, js, js и тут бах и html, потом снова js пошел. Вместе с этим сайт подгружает шаблонизатор jinja, но где он используется не понятно.

Плюс настораживает вот этот момент:

drom-template-br

Два переноса строки? Для того чтобы появилось место ниже? Хорошо бы это решить через css.

Заключение

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

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