停止生成客户端表单

2020-05-25 23:33:13

客户端显示验证错误,或者成功地将用户移动到其旅程中的下一步。

不要那么快,首先,对于formik.js,您至少需要下载15KB;如果它基于redux-form,则需要下载26KB;如果表单包含单个与日期相关的验证,则可能需要下载70KB;对于包含可观察支持的rx.js,可能需要下载30KB,以及谁知道有多少多重填充。

该表单在此阶段可能无法在Safari中呈现,因为它不是Chrome,而且没有人在其中进行测试。

或者更糟的是,表单将呈现在服务器上,但JavaScript将无法运行,从而导致用户填写整个表单时,最后只会看到一个惰性的提交按钮,没有其他选择,只能刷新并丢失他们的工作。

客户端可能会执行一些实时或就地验证,这很烦人,通常被认为是糟糕的用户体验。

在进行实时验证时,当用户使用箭头键在任意位置插入文本时,表单可能会防止复制和粘贴,或者当用户使用箭头键在任意位置插入文本时,表单可能会扰乱用户的光标位置,或者通过根本不让用户键入某些字符来阻止用户写入这些字符。

在这种情况下,通常什么都不会发生,因为JavaScript初始化失败,或者API需要一段时间才能响应,并且没有加载微调器,或者表单中的某个地方有验证错误但看不到,或者用户提交表单的方式(键盘、Enter键、鼠标单击,自动通过密码管理器)是开发人员没有预料到的。

有时,用户在填写表单时失去了互联网连接,因为他们在火车上的Wi-Fi连接参差不齐,而现在您的提交按钮只会触发无限加载旋转器,或者更糟糕的是,它会通过关闭表单而不保留用户键入的内容来删除他们所做的所有工作

客户端可能会做一些更多的验证,这是没有价值的,因为服务器无论如何都需要重新验证所有内容,因为服务器不能信任客户端,并且客户端无法验证服务器可以验证的所有内容,例如电子邮件地址的唯一性;即使客户端急于验证电子邮件地址的唯一性,您仍然需要在提交时重新验证,因此这是没有意义的。

是的,您可以打赌这个Ajax调用是用redux-saga 5KB、async.js 7KB、同构获取3KB、swr.js 3KB、异步/等待Babel插件和PolyFill(花了某人1周的时间配置)和Promise PolyFill构建的。

如果请求没有返回,并且开发人员考虑过,用户可能会收到一条消息,但在此阶段通常出现的唯一消息是隐藏在开发控制台中的红色消息。

客户端显示验证错误,或者成功地将用户移动到其旅程中的下一步。

如果您不相信这是现实,可以使用Internet Explorer11或Safari和AdBlocker上网一周。保持您的开发控制台处于打开状态,并注意JavaScript错误。

服务器会将用户发送到带有验证错误的同一页面,或者发送到他们旅程中的下一步。

如果Web服务器宕机了,倒霉的是,我猜用户会做其他事情?

如果他们的连接不好,他们可能会从浏览器看到一条“您已脱机”的消息,但他们的所有工作仍在进行中;他们可以在恢复连接后刷新页面以继续提交,或者按下“上一步”按钮并保留他们的答案以便稍后再试,所有这些都不需要开发人员的任何额外工作

服务器会将用户发送到带有验证错误的同一页面,或者发送到他们旅程中的下一步。

香草形状更难打破。当只有1个请求且没有动态客户端代码乱运行时,发生的事情要少得多。

您宝贵的和定制的就地验证、状态管理、异步查询、离线后备在大多数情况下都不是必要的,也不会造成积极的危害。

普通表单已经实现了最重要的开箱即用特性:当用户失去连接或服务器宕机时,它们不会丢失用户状态。

但我怀疑您或您的用户在您的应用程序中的每个表单都需要它们。

几乎每个网站都有表单。其中只有很小一部分需要是客户端呈现的表单。

即使这样,在Soundcloud的情况下,他们仍然可以针对他们不经常访问的设置页面,并将这些页面呈现为一个带有普通表单的多页应用程序,同时音乐在主选项卡中继续不间断地播放。

下面是一些表单,谢天谢地,它们是以普通优先的方式实现的,并且可以选择逐步增强为更好的形式:

最后,我遇到过一些不适合在客户端使用的表单示例,这些示例为我呈现并破坏了这些表单:

为较老的Sky宽带路由器编写的管理面板,自豪地以角度1编写,在现代浏览器上,无论是否使用JavaScript,表单都不会执行任何操作。

Interactive Brokers上的注册表单要求我提供相当于2个屏幕的数据,但当我在Safari中提交时却什么也没做。

在Twitter上编辑您的个人资料信息,如果您在脱机状态下提交表单,Twitter会放弃您所做的编辑。

客户端框架可以为您节省大量时间,但是如果您将所有时间都花在重新构建Web平台的每个部分上,那么这是徒劳的。

每一个前端开发人员都应该选择一个服务器端框架,并学习如何构建普通的Web表单。它们为用户工作得更好,也更容易构建。

我推荐Ruby on rails。正如一位朋友所说,它“在刑事上被低估了”。