Комментарии 49
Нет форматирования кода.
Это не делает html плохим. Форматирование кода вовсе не нужно! Есть такие штуки как HTML minifier, которые специально удаляют форматирование кода.
Пользователю конструктора сайтов, который хочет сэкономить деньги и нервы, абсолютно до лампочки какие там генерируются классы и какая там вложенность. Он получает то что хочет и это работает!
Есть конструкторы, которые дают возможность экспортировать код, а есть те которые не дают. Несмотря на их схожесть задачи и требования к ним немного различаются. Хотя те и другие преследуют цель ускорения и удешевления разработки. Те, в которых нет экспорта кода, то к ним нет вопросов. Там может быть любой код, потому что с ним человек не как ни работает, это как машинный код. Но если конструктор отдает код, то это предполагает, что есть высокая вероятность, что его будут вручную дорабатывать. Обычно такие конструкторы(с экспортом кода) больше предназначены для веб-студий и фрилансеров, а не для конечных пользователей.
Есть куча всяких бьютифаеров в виде плагинов для редакторов. Так что кому если понадобится форматированный код, тот может легко его получить. В общем это не проблема.
Другое дело, что удаление форматирования не решает ровным счётом ничего. Думаню не нужно пояснять, почему.
Всё остальное — правда. Но есть ещё одна причина, и очень жирная — конструкторы никак не учитывают производительность сгенерированного кода.
Мне кажется основная этому причина это отсутствие подходящего инструмента, потому что они больше заточены под конечного пользователя, а не под веб-студии.
+1 форматирование не признак. С таким же успехом можно говорить что признак плохого js на сайте, если его прогнали через uglify minify.
Конструкторы сайтов больше созданы для end user'ов, а не программистами для программистов.
А вот один большой недостаток есть который в статье не выделили — accessibility. Сейчас это можно сказать "модно" а конструкторы генерят сайты красивые, но абсолютно не юзабельные людьми с ограниченными возможностями (position absolute тут и вправду главный грех, ибо screen reader's парсят страницы иначе)
Конструкторы для веб студий тоже потихоньку начинают появляться. У веб студий тоже есть проблемы со стоимостью разработки сайтов, она слишком высокой получается, и становиться все менее конкурентно способной.
Посудите сами, ведь многие пользуются компонентными фраймворками bootstra4, material-ui и им подобные и в них тоже код уже готовый, но они же хорошие, созданы правильными программистами. А в случаи с кодом показанный Вами программисты даже не знали о сборщиках и оптимизаторах, которые такой код превращают в правильный.
Но я уверен что рано или поздно правильная команда возьмется и сделает правильный и очень крутой редактор интерфейсов, это возможно и даже не очень сложно.
Есть еще одна этому причина, это выбранный подход к созданию конструктора. Например если у элементов сделан тот же position:absolute, то по определению код не может быть хорошим. Так же если конструктор сделан, как программа на компьютер, там тоже будет сложно получить хороший код, потому что по сути этой программе придется эмитировать некоторый функционал браузера. Особенно если сайт нужен с responsive дизайном.
Думаю этот проект не особо легкий, как минимум по причине того, что хороших проектов подобного плана немного. С технической стороны это конечно реализуемо.
Видите, сложного вообще ничего нет, кроме как провести анализ имеющихся редакторов, выявить основные ошибки, понять почему они были допущены и на основе собранных данных собрать команду. Я уже много думал над этой темой и реально знаю решение, только это огромные затраты по времени, на которое нужны деньги. Ну а если в двух словах, то причиной отсутствия таких редакторов, это неправильно подобранные люди. Но совсем скоро эту проблему решат, по сути атмосфера уже сформировалась и возможно кто-то уже делает это.
Если так, то знание этих технология необходимо лишь в одном случае, если это программа на десктоп, а не сервис в браузере. Если писать конструктор сайтов как программу, то его будет еще тяжелей сделать, по причине того, что средой отработки сайта является браузер, а не оболочка рабочего стола. Как знаю хороших реализаций конструкторов сайтов, как программа особо нет.
Наш конструктор сделан, как сервис, который отрабатывается в браузере, поэтому для самого конструктора необходимо только javascript. Серверная часть может быть написана на чем угодно, это не имеет особого значения, потому что работа пользователя и создание сайта происходит непосредственно на javascript.
Адрес сервиса http://hollpee.ru
А вот сервис реально классно выглядит. Не увидел английского, но он наверное есть, ведь кто будет на русском стили писать :) И больше не знаю что сказать… Реально удачи и развития. Мне кажется что он может принести людям счастье.
По Css:
Такие стили margin, padding, background, font должны записываться в сокращенном виде.
Позволю себе не согласиться. Если, конечно, перечислены все значения (например, все 4 значения margin-а), то да — надо сокращать. Но если не все…
Отказаться от сокращений надо для того, чтобы случайно не перезатереть ранее установленные значения. Если только Вы не хотите явно задать нижний отступ равный 0.
По HTML:
6) У некоторых тегов можно убрать класс.
Вот такие вот конструкции со временем только больше запутывают.
Лучше не усложнять селекторы, а как раз таки обходиться одними классами.
Для стабильности, да лучше не убирать, для чистоты лучше убрать. Тут уже каждый в зависимости от ситуации решает как лучше.
И в тех примерах которые вы привели ничего сверх ужасного нет, все стили которые описывают внешний вид и стандартное поведение находятся в классах, а кастомные вещи уже в id.
P.S. Если вы посмотрите на код который получается, если в Word 2003 сохранить страницу как HTML, то вас припадок хватит =)
Я приводил скрины кода сервисов, которые позиционируют себя, как сервисы для замены ручной верстки, поэтому, и требования к экспортируемого кода с этой позиции. Если Wix позиционирует себя как конструктор для конечного пользователя, то и вопросов к нему нет по этому поводу.
Насчет времени разработки, то я сам являюсь разработчиком такого сервиса, поэтому смотрю на это именно с этой позиции.
Мне всё же кажется у людей которые писали указанные генераторы были причины сделать именно так (возможно лень одна из них), и нельзя однозначно называть данный подход совсем уж плохим, а надо попытаться понять почему так сделано.
Причины такой реализации, есть субъективные и объективные. Объективная, то что если элементы имею свойство position, в значение absolute, то использование классов в принципе тяжело реализуемо. Субъективная причина, то что так легче и быстрей в реализации, использовать id, а не class.
Если сервис позиционируется для конечных пользователей, то качество коде не имеет не какого значения, почти все именно такие конструкторы сайтов. А вот если сервис позиционируется как замена ручной верстки, то и должен рассматриваться и с этой точки зрения(качества кода), таких сервисов совсем не много.
потому что верстальщикам и программистам приходится все чаще и чаще сталкиваться с результатом работы подобных сервисов. Также приходится испытывать конкуренцию с их стороны – как минимум в сегменте недорогих сайтов.
Позволю себе не согласиться с данным тезисом.
Да, за последний год два или три раза обращались люди с просьбой перенести сайт, сделанный в конструкторе, на собственный хостинг. Плюс небольшие доработки и верстка пары-тройки новых страниц в том же стиле. Во всех случаях удавалось довольно легко убедить заказчика, что переверстать с нуля будет выгоднее для него (быстрее и дешевле). Главным аргументом был ценник за работу по переделке.
Так что с результатом работы таких сервисов сталкиваться не приходится от слова совсем, а о конкуренции речь вообще не идет (либо я не понял в чем заключается конкуренция).
Я думаю если бы пользователь создал сайт в сервисе, экспортировал код и установил его на свой хостинг. Я больше имел ввиду именно такие сервисы, в которых можно экспортировать код сайта. А потом когда ему потребовалась доработка, то прейдя к Вам с этим заказом, его было бы уже сложней уговорить полностью переделать сайт, потому что сайт был у него уже на хостинге, а ему нужна была только доработка. А в Вашем случае нужен был перенос сайта т.е создание сайта с нуля, только такого же как у заказчика был на конструкторе.
У генераторов есть читаемый вход и не читаемый, но исполняемый выход… так было всегда:
Архитектура Фон-Неймана против гарвардской архитектура? Да вы что? Вы видели его производительность?
Команды в ассемблере которые записывают несколько подряд идущих команд в машинных кодах? Да вы что, это же не производительно!
Языки программирования. Вы видели какой некрасивые последовательности машинных команд они выдают! Да я в разы оптимальнее напишу!!!
Графическая оболочка? Да вы что! Только командная строка!!!
Браузеры как системы интерфейсов с пользователем? Вы еще скажите, что каждому пользователю надо по 100 мегабайт оперативки!!!
Есть бизнес и есть всё остальное. Программисты часто забывают, что бизнесу не нужен их совершенный чистейший заоптимизированный код. Им нужны бабки. И чем быстрее и дешевле бизнес получит сайт, тем ему лучше.
Из моей практики: Был у меня частый клиент-левочёк. Ему надо было новый лендинг раз в пару недель-месяц. Перый лендинг я написал ему за 1 тысячу рублей. Там было то взять готовый шаблон и поменять 2 картинки. Так и повелось. Лендинг — касарь, еще — еще касарь. Лендинги становились всё сложнее. Доллар укреплялся, Касарь оставался неизменным, рублевым. В конце концов, когда я потратил 8 часов на его очередной лендинг, я отказался от его работы. Посоветовал ему конструкторы. Сейчас он запускает лендинги пару раз в неделю и платит гораздо меньше.
Есть вообще страшный случай. У меня есть на поддержке стайка «предпринимателей» которые каждый хочет свой «уникальный» сайт, еще и не один. А вот денег у них в принципе нет. На конструкторе у них эта возможность есть. И им глубоко пофигу на красоту кода. Они даже не знают как открыть инструменты разработчика и что это такое.
Для Ваших клиентов, код не нужен. Чистый код нужен для веб студий, который можно будет при необходимости доработать. Там и ценик немного выше, чем тысяча рублей.
Первый скрин с кодом в начале статьи, это тоже код сгенерирован в конструкторе сайтов, который я разрабатываю. Преимущество этого сервиса, не только в коде, есть преимущества и для клиентов, которым нужен сайт за 1 тыс рублей. Но статья именно про качество кода, поэтому и заострил на нем внимание.
- Мне кажется, то, что вы перечисляете — не причины, а проявления. Т. е. это причины вашего мнения, что их код плох, а не самой этой ситуации.
- О причинах самой ситуации можно догадываться или спросить разработчиков одного из генераторов. Вероятно, это были осмысленные «архитектурные» решения каких-то конкретных проблем на тот момент.
- У получившегося кода есть и другие стороны, кроме перечисленной вами: насколько просто написать back-end, который их генерирует, насколько это расширяемо; если генератор писался года 3 назад, то насколько его легко переписать, и т. п. Т. е. с точки зрения верстальщика код, конечно, плохой. Но возможно, с точки зрения владельцев бизнеса — код оптимальный, т. к., допустим, их ресурс ограничен, и стратегически более оправдано инвестировать его в получение новых клиентов, а не в отчистку кода.
Если честно, то что влияет на чистоту кода в конструкторах, это же влияет и на простоту работу в нем. Именно поэтому не смотря на большое количество конструкторов, в большинстве случаев они не удобные. Причины этому те же, что и причины плохого кода.
Одну из следующих статью напишу про конструкторы сайтов с точки зрения бизнеса. В этой статье была затронута только техническая сторона создаваемого сайта в таких сервисах. Статья больше была предназначена для верстальщиков и программистов, потому что была опубликована в разделе «Разработка». Следующая будет опубликована в разделе «Маркетинг», потому что она будет про бизнес, а не про технологии.
Например, у тега «p» можно убрать класс и в CSS прописать селектор .parent > p.
Замечательно, вы повысили специфичность селектора. Теперь, чтобы стилизовать какой-то конкретный тип параграфов нужно везде писать:
.parent p.danger
А чтобы стилизовать каиой-то конкретный предупреждающий параграф:
.parent p.danger.deprecated
всё большая специфичность заставляет в каждом переопределении стилеи повышать специфичность.
Ну очень "чистый и поддерживаемый" код получается.
Напишу как это у нас сделано в сервисе.
Если в родители есть один p, то конструктор записывает .parent > p. Если несколько p, то класс не очищается. Так же есть возможность поставить в редакторе, что бы класс не очищался в любом случае.
В сервисе когда создаете сайт, то в редакторе работаете всегда с классами, когда код выгружается, то сервис решает если можно убрать класс, то он его убирает, если нет то нет.
Например на первом скрине именно такая ситуация. В родителе mode-row есть два потомка p, у одного также есть дополнительный класс. И прописывается 2 селектора
1) .mode-row > p. Это общий
2) .hlp-site .title-mode-marketer. Это дополнительный. Дописывается .hlp-site, что бы перебить верхний селектор.
Сервис еще разрабатывается, поэтому открыты для обратной связи.
Например есть список товара, 20 наименований. Вам нужно изменить цвет заголовка. Если в конструкторе используются id, то Вам придется этот цвет изменять у всех 20 заголовков. Если будет использоваться class, то всего у одного.
Основная проблема конструкторов это то, что в них тупо нельзя сделать то что нужно. От верстальщиков требуют пиксель перфект, а в конструкторах сайты делают те кто не знает что ему нужно. То есть сверстать сайт в конструкторе по макету это крайнее сложная и не окупаемая по времени задача.
Возможно что уже есть, или скоро появятся супер конструкторы которые будут уметь делать все, но чтобы научится работать на таком конструкторе придется потратить больше времени и сил чем тупо выучить html+css.
В дальнейшем буду писать статьи о некоторых моментах, которые нельзя сделать не в каком сервисе. Например в нем можно сделать тему практически под любую CMS.
Почему конструкторы сайтов выдают плохой код?