Задать вопрос
aliksend
@aliksend
Software Engineer

Есть ли смысл использовать формы?

Доброго времени суток

TL;DR. Актуально ли при создании современного веб-приложения использовать сервер для обработки запроса и рендеринга HTML, в том числе использовать тег form со всеми его возможностями, или от этого стоит отказаться в пользу сервера, реализующего статику и API, а на клиенте использовать асинхронные запросы/websocket?

Когда-то в веб-приложениях для отправки данных на сервер можно было использовать только HTML-формы. Известно, что они ограничены лишь запросами GET и POST. Но, к примеру, в Rails для осуществления методов PUT/PATCH/DELETE используется задание соответствующего значения полю _action, которое приходит на сервер вместе с данными. И сервер занимается рендерингом страниц, обработкой запросов и всем остальным, клиенту достаточно показывать интерфейс пользователю. Позже стали добавлять асинхронные формы и всякие turbolinks, которые на тех устройствах, которые это поддерживали, обеспечивали более быструю работу за счет того, что страница не загружалась полностью, а загружались лишь необходимые данные, причем асинхронно, и отображались без обновления страницы. Но и для старых устройств всё осталось доступным и работало как и раньше.

Сейчас в 2017 году модно создавать веб-приложения, рендеринг которых происходит на стороне клиента, а сервер нужен лишь для отдачи статики и обеспечения API. Я тоже создавал подобное приложение, и использовал тег form лишь потому что этого требовал Bootstrap.
Меня интересует вопрос: нужно ли использовать формы в современном frontend? Я могу одинаково хорошо использовать формы с полем _action для указания необходимого действия (и не только PUT/PATH/DELETE), и Ajax-запросы, и взаимодействие через websocket. Нужны ли формы только для обратной совместимости со старыми устройствами, или у них есть ещё какое-то предназначение? Обратная совместимость добавляет работы: сервер должен одинаково реагировать на пользователя, который может получить ответ мгновенно в виде JSON, а отображением займётся клиентский фреймворк, и на того, для которого нужно отрендерить HTML-страничку, потому что в его браузере выключен JavaScript. Но настолько ли это актуально сегодня?

В настоящее время я работаю над приложением с использованием библиотеки vue.js на фронтенде, мне не особо нужна поддержка старых устройств, но я вижу преимущества рендеринга некоторых частей страницы на сервере: гораздо проще обрабатывать авторизацию, нет "мигания" содержимого страницы, когда оно прогрузилось, а фреймворк ещё нет, что особенно заметно на медленном интернете (вы ведь тоже вставляете все свои скрипты в конце элемента body?) и другие вещи.
Что же лучше использовать в наше время? Понятно что и у того и у того подхода есть преимущества и недостатки, поэтому логично использовать симбиоз: что-то рендерить сервером, а что-то клиентом. Но нужно точно понимать кто за что отвечает. Например взять тот же тег form, нужен ли он в наши дни, или его лучше заменить асинхронными запросами к API?
Как вы считаете, что должен делать сервер, а что клиент? Как бы вы проектировали своё приложение? Моё приложение достаточно простое, но есть люди, которые разрабатывают большие приложения, я думаю им эта тема также будет интересна. Хочется узнать ваше мнение.

Спасибо
  • Вопрос задан
  • 2143 просмотра
Подписаться 7 Оценить 10 комментариев
Пригласить эксперта
Ответы на вопрос 4
teke_teke
@teke_teke
programador
делайте на формах. не пихайте js везде, где попало. рендерите страницу на сервере. отдавайте клиенту готовую.

javascript может быть отключен, да. более того, мне кажется, сейчас его даже чаще отключают или блокируют js скрипты и запросы, потому как больше людей становится осведомлёнными про уязвимости и потерю приватности при включенном js.
Ответ написан
@laxikodeje
Зависит от задачи.
Ну скажите на милость, зачем вы будете делать сайт фирмы ПродамВсеОптомВам на AJAX, когда туда заходит 3 человека в год?
Что вы там выгадайте, кроме затрат времени рабочего?

По сути вы ставите вопрос:

Стоил ли в 2017 году все сайты делать по технологии одностраничников SPA.
Ответ - НЕТ.

Вопрос - стоит ли вам специализироваться только на SPA, если вы уж так не любите сервера - ваше дело, если если достаточно заказчиков - отчего бы и нет.
Ответ написан
Комментировать
Как по мне, лучше все делать на сервере. Зачем нагружать и садить батарею смартфона/ноутбука, если с этим может справится сервер где-то в нидерландах за 5 баксов в месяц? Да и тем более, у многих "китайфоны", которые после двух месяцев эксплуатации еле дышат.
У меня уже был спор по этому поводу с фронтендщиком, но в итоге каждый остался при своем мнении. Возможно я чего-то не понимаю
Ответ написан
yurakostin
@yurakostin
Front-end developer
Код должен быть семантичным. Это на тему того, что если элемент должен представлять элемент формы, то нужно верстать элемент формы, а не то, что вам кажется более подходящим для этого случая.

И вообще Вадима Макеева на вас нет.
"Доступность или смерть(жизнь?)". Вы должны учитывать ситуации, когда js действительно отключён. Это довольно сложно бывает сделать в связи с тем, что торопит бизнес, в связи с тем, что не всё зависит от вас.

Прогрессивное улучшение, постепенная деградация применимы, я думаю, и в этом случае.
Представьте, что у вас есть форма.

При включённом js вы валидируете данные на клиенте, чтобы не делать лишних запросов.
При валидных данных вы отправляете ajax запрос чтобы не перезагружать страницу и сразу показывать пользователю результат.
При этом вы также валидируете данные на сервере.

При выключенном js данные валидируются только сервером и результат отдаётся путём перехода на другую(или эту же) страницу.

На сервере фактически ничего не меняется, но зато для пользователя есть небольшая плюшка в виде отсутствия ожидания пока сервер обработает данные и ваша страница будет загружена заново.

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

Форма это форма. Если вам нужно значения двух инпутов отправлять с помощью js, то не нужно верстать два поля, кнопку submit и вешать обработчик click на кнопку. У всех элементов есть своё назначение. Оборачиваете, как и надо, ваши инпуты и кнопку в form и вешаете обработчик на событие submit. Всё. Никаких проблем. Js у вас или нет - всё будет работать.

Снова много букв в моём ответе. Пардоньте..
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы