Библиотека, облегчающая разработку форм на сайтах (v3)

[nazarpc]

поддержка отправки файлов через iframe для старых браузеров

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

[PaulZi]

http://caniuse.com/#feat=xhr2

[polRk]

Молодец! Отличная работа!

[Alexufo]

Отлично. Давно подобное напрашивается. Обязательно буду смотреть.
Офигеть. 5 часов в эфире и всего +6 голосов за статью. Года три назад сотня была бы точно.

[dfuse]

Потому что года три назад никто ничего не знал про Angular, React и прочие, а также про HTML5 File Api, WhatWG Fetch и тд. Зачем в 2016 году библиотека по работе с формами — не ясно.

[PaulZi]

Разве Angular, React и HTML5 File API предоставляют возможность отправлять формы через AJAX, без кучи `new XMLHttpRequest()` для каждой формы? Даже если отмести все старые браузеры (а далеко не всегда это возможно) и выкинуть из библиотеки `ajax-iframe-transport` и `form-attributes-polyfill`, всё равно остаётся много полезного функционала — ajax отправка форм без единой строчки кода, стилизация состояния отправки, возможность навешивать обработчики отправки форм после других скриптов и др.
Если вы найдёте простой способ это реализовать на react и angular без написания аналогичного скрипта — будет очень интересно посмотреть.

[dfuse]

Смотрите

var f = new FormData(), d = document, byId = d.getElementById;
f.append('text', byId('text').value); // текстовые значения
f.append('file', byId('file').files[0]); // файлы из формы
f.append('file2', new File([JSON.stringify(...whatever...)], 'request.json', {type: 'application/json'})); // произвольное барахло
fetch('url', {method: 'post', body: f}).then(...).catch(...);

Вот и все, и работает почти везде.

Про стилизацию я вообще молчу — она у всех разная, на реальном сайте я быстрее напишу CSS с нуля, чем буду накручивать любой коробочный. А любые визуальные фидбеки отправки я навешу в одно действие в .then и .catch.

[PaulZi]

Я могу такой же короткий пример написать на ультра-старом jQuery, но ваш пример не решает и половины проблем, которая решает библиотека. А как только вы их решите, ваш ультра короткий и лаконичный код распухнет как минимум до 4 кбайт, который надо будет тащить из проекта в проект.
PS В конструктор FormData пожно передать саму форму, тогда append() вообще не надо.

[dfuse]

jQuery еще подключить надо. А вышеописанное — стандартная библиотека, которая есть везде, совместимая с любым React/Angular/PlainVanilla.

Библиотека решает надуманные проблемы, ничего общего не имеющие с реальным миром и реальными сайтами. Любой серьезный проект так или иначе будет иметь код, отвечающий за весь трафик, включая формы. А для проекта на коленке сгодится и прямое использование стандартных средств браузера. Получается, ни туда, ни сюда библиотека.

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

[Gitkan]

Тут есть другой критерий полезности/нужности — насколько часто встречаются формы на современных сайтах? Если это форма постинга в блог или форма отправки заказа в интернет-магазине, то все задачи решаются соответствующими движками из коробки. Но если у разработчика специфический заказ и у него на каждой странице по несколько форм (какая-нибудь не к ночи будет сказано online-ERP система), то библиотека и может быть полезна.

[PaulZi]

По поводу стилизации, по умолчанию просто добавляются CSS-классы в форму — стилизуй как хочешь. Кроме того, есть поддержка js-шаблонов, и на крайний случай, всегда можно подцепиться на события `submitstart` и `submitend` и застилизовать произвольным образом. То есть ничего «коробочно» не навязывается.

[dfuse]

А как насчет валидации (клиентской и серверной), а также распихивания ошибок по полям? Вы поймите, прошли те времена, когда юзеры брали скрипт и впендюривали его на страницу, сейчас все живут в некой экосистеме, будь то Angular, React, Knockout, Ember или любая другая, где есть уже шаблоны, есть событийная модель и тд и тп.

[hlogeon]

Angular, React и HTML5 File API предоставляют возможность отправлять формы через AJAX

Не могу со 100% уверенностью сказать за остальные помимо Angular(ибо я занимаюсь back-end), но со 100% уверенностью говорю, что Angular позволяет. Более того, вполне себе позволяет создавать целые сервисы и директивы с формами с вытекающими отсюда плюшками в виде реюзабельности и наследования. Думаю, что React тоже это позволяет.

[kesn]

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

[hlogeon]

Если никогда не задумывались, быть может, оно Вам и не надо? :D

[YemSalat]

Ни одного теста не увидел в репозиториях. Это я плохо смотрел или у вас их правда нету?

[PaulZi]

К сожалению, нет.

[alivmax]

В наше время это уже не актуально.

[PaulZi]

Смотрите выше.

[Varkus]

когда читаю, как в очередной раз, вместо того, чтобы хорошо знать язык сайтокодеры подключают очередные файлы к странице — печалюсь: это не сайт перегружен всяким барахлом, а телефон у вас тупой, браузер медленный, пальцы кривые, рожей не вышел и т.д.
P.S. вероятно это будет уже 5й коммент подряд не одобренный администрацией.

[kesn]

Если вы про библиотеку автора — то прошу пояснить, что же конкретно в ней плохо. В ней собраны юзкейсы, которые встречаются постоянно. Why not?

[PaulZi]

Что-то я не понял, что вы хотели сказать своим комментарием? Откройте какой-нибудь мега современный сайт на angular/react (например tinkoff.ru) и прочем и посмотрите сколько там скриптов подключается. Современные сайты действительно имеют много JS-кода, без него сейчас красивого и удобного сайта не сделать.

[Xtray]

Если имеют много JS, это же не значит, что это хорошо. Удобный сайт спокойно может без JS обойтись. Ну, или самый минимум, десяток-другой строк кода, без каких-либо фреймворков. А красота — вообще субъективна, а потому — да, и красивый сайт тоже можно без JS сделать.