Как избежать чрезмерных зависимостей в коде сложного веб-приложения?

Question

[Сергей Марков]

Суть моей проблемы: если нужно написать что-то более сложное, чем отправка формы обратного звонка с лендинга, то заканчивается все монолитом кода с такими зависимостями, что как в анекдоте: "Только ничего не трогай".

Получается говнокод, который изобилует кучей неочевидных связей между html, css, js и php на основе id, классов, параметров функций и т.д. Оно как бы нормально, но, я думаю, не в таком количестве... Как это происходит. В начале работы я очень хочу сделать максимально универсальный и гибкий код. Пишу. Вроде все хорошо. Потом:

1) Например, принимаю данные с формы: собираю их по классам полей через jquery. Делаю это так: в обработчик кнопки отправки передаю this, то есть, получаю из функции доступ к элементу кнопки. Потом через closest получаю саму форму и через find ищу нужные поля. Это единственная технология, к которой я пришел, чтобы не иметь жесткой привязки к id полей...

2) И тут, например, добавляется еще одна форма. Вроде похожая, но немного другая. И получается или новая js-функция (а дальше и php) или внедрение в существующую функцию некоего модификатора. Например условного id формы и внутри разруливание в зависимости от этого модификатора...

3) Дальше больше. Все это переносится в php, нарастает больше и больше и под конец проекта (а он на самом деле весьма маленький и должен делаться гораздо лучше) код выглядит так, что хочется тихонько выделить файлы, нажать delete и начать заново, но КАК?

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

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

Answer 1

[alvvi]

На самом деле суть проблемы: вы плохо знаете JS. Сейчас объясню:

1) Например, принимаю данные с формы: собираю их по классам полей через jquery. Делаю это так: в обработчик кнопки отправки передаю this, то есть, получаю из функции доступ к элементу кнопки. Потом через closest получаю саму форму и через find ищу нужные поля. Это единственная технология, к которой я пришел, чтобы не иметь жесткой привязки к id полей...

Ну вот о чем здесь речь? А как же селекторы по аттрибутам (name?), или в конце концов классам? А как же $.fn.serializeArray, которая при наличии элемента формы сама получит все поля и вернет нам содержащий их массив? Да и слушать нужно событие submit, которое диспатчится на самом элементе формы, где уже можно через e.currentTarget (== this в jQuery) получить форму и просто вызывать один метод вместо кучи .find()

И получается или новая js-функция (а дальше и php)

Вынести функцию-хендлер отдельно и сделайте ее универсальной для обеих форм. (при чем тут php ???) Это при условии, что вторая, как вы сказали

Вроде похожая, но немного другая

Все это переносится в php

Не надо переносить фронтенд код в php.
Делайте сборку фронтенда отдельно, php отдельно, нет никакой причины по которой они должны общаться друг с другом, js работает со сгенерированным html. Если вам вдруг нужна переменная с бэкенда, есть куча способов передать ее без переноса фронтенд кода куда-либо.

И отвечая на вопрос из заголовка

Как избежать чрезмерных зависимостей в коде сложного веб-приложения?

Переходите на компонентый подход. Не важно, что это, БЭМ, ES6- и/или CSS- модули, решений множество. Если у вас есть универсальный компонент формы со своими зависимостями, стилями и скриптом, то проблем в коде сложного веб-приложения становится значительно меньше.

Comments

[Сергей Марков]

$.fn.serializeArray

Спасибо большое за подсказку! Да, честно говоря, первый раз об этом слышу, нужно изучить.

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

Проблема в том, что в коде сайта вообще (комплексно в html, js и php) получается дикое количество не очевидных связей. JS привязан к id элементов, php к js и тому подобное. Получается, что малейшее изменение, например, верстки (класс поменяли) приводит к отказу в самом неожиданном месте, так как логическая цепочка взаимодействия разных частей приложения сделана через... хм )

Очень хочется научиться этого избегать. То есть, тут нужны какие-то универсальные технологии, вроде того, что вы подсказали по jquery и, что самое главное, универсальная структура всего проекта. Вот как ее сделать? Наверняка есть какие-то каноны.

[alvvi]

Сергей Марков, я думаю вам надо смотреть в сторону БЭМ, ES6-модулей и в целом компонентного подхода. Это все конечно в основном фронтенд, но и на бэкенде бывает полезно.
Вы лучше расскажите про ваш стек, есть ли у вас на фронте что-то кроме jQuery? Используете Webpack или какой-либо другой бандлер/сборщик? Что на бэкенде?

[Сергей Марков]

Используете Webpack или какой-либо другой бандлер/сборщик? Что на бэкенде?

Нет, у меня все примитивно ) На фронте только jquery, бекэнд - php и mysql. Html и css вручную. Но даже при таком подходе получается дикая каша. Собственно она получается на проектах любого масштаба, просто на маленьких можно быстро проследить зависимости.

[alvvi]

Сергей Марков, тогда понятно, почему у вас каша)
Компонентный подход на фронте + MVC-фреймворк (а может и какой другой, я не особо шарю в бэкенде и его архитектурных паттернах) помогут вам решить проблемы с зависимостью, в перспективе еще и скорость разработки поднимут. (хотя поначалу и будет казаться совсем совсем наоборот)

[Павел Корнилов]

Как вариант - использование методов объекта JSON вместо сериализации. Преимущество - нативные и читаются легче.
А форму отлично собирает нативный new FormData(form).

[Сергей Марков]

@alvvi, хотя поначалу и будет казаться совсем совсем наоборот

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

Answer 2

[Одиночка Айс]

Все написанное ниже является частью личного опыта автора и не является панацеей, любители похоливарить идут лесом:

1. Приведите себя к единому стандарту разработки. Себя лично, исходя из своего опыта, а не озираясь на всякие Gulp, LESS и прочую хрень, отчасти помогающую в разработке (на самом деле редко).
2. Постарайтесь выделять закономерности в своем коде и его обработке, например, использование одних и тех же классов, структуры верстки. К примеру, для 99% форм у меня есть класс form, которым я оформляю 90% css и делаю ajax именно через этот класс.
3. Для PHP просто называйте поля одинаково из проекта в проект, поможет как для валидации данных, так и вообще для написания единого обработчика, покрывающего 80-90% случаев.
4. Почитайте про KISS, DRY, SOLID, очень помогает поставить мозги на место.