体检系统前端源码_给您的前端进行健康检查

体检系统前端源码

by Ewa Mitulska-Wójcik

伊娃·米图尔斯卡(EwaMitulska-Wójcik)

给您的前端进行健康检查 (Give your Front End a Health Check)

You’ve built out all your user stories and your app is working. Now’s it’s ready to submit as done, so you can move on with your life.

您已经建立了所有用户案例，并且您的应用正在运行。 现在可以完成提交了，因此您可以继续生活。

Not so fast!

没那么快！

You need to give your code a health check first.

您需要先对您的代码进行健康检查。

A professional singer wouldn’t start singing until she’s checked both her mic and her speakers. You shouldn’t deploy until you’ve checked your front end, back end, and everything in between.

一位专业歌手只有在检查完麦克风和扬声器后才能开始唱歌。 在检查完前端，后端以及介于两者之间的所有内容之前，请勿部署。

I’m an impatient person, but coding makes me slow down. Being a developer teaches me to think at least twice, ask questions until the code works, and wait a moment before celebrating success.

我是一个不耐烦的人，但是编码会使我慢下来。 作为一名开发人员，教会我至少要三思而后行，提出问题，直到代码生效，然后稍等片刻，庆祝成功。

Iteration is the key because good product is never done. The key is to iterate on the versions you are proud of, and not on those that are far from ready to go live.

迭代是关键，因为永远不会完成优质的产品。 关键是迭代您引以为傲的版本，而不是迭代尚不可行的版本。

So treat this as a final checklist before going live.

因此，在上线之前将其作为最终检查清单。

1.ReactSwift (1. Be responsive)

How does your app behave when you resize the browser window? Where do you have your breakpoints in code? Is it fluid enough to fit all sizes without bigger problems?

调整浏览器窗口大小时，应用程序的行为如何？ 您的代码断点在哪里？ 它是否具有足够的流动性以适合所有尺寸而没有更大的问题？

There are an endless variety of screen sizes. It’s impossible to have all of the devices within reach but, it’s easy to emulate their behavior.

屏幕尺寸不尽相同。 不可能将所有设备都伸手可及，但是很容易模拟它们的行为。

Spending some time in Code Review Room, I’ve noticed that many people focus on developing for desktops when they should actually be testing their app on mobile devices first.

我花了一些时间在Code Review Room中 ，我注意到许多人实际上应该首先在移动设备上测试其应用程序时专注于为台式机开发。

Browser tools allow us to emulate the display on various screen sizes and orientations. Use them, they are free.

浏览器工具使我们可以在各种屏幕尺寸和方向上模拟显示。 使用它们，它们是免费的。

In Chrome, you can go to a debug view by right clicking any element on the page and selecting “inspect element”, then going to mobile view and emulating different devices.

在Chrome浏览器中，您可以通过以下方式进入调试视图：右键单击页面上的任何元素，然后选择“检查元素”，然后进入移动视图并模拟不同的设备。

2.考虑特殊情况和应用状态 (2. Consider special cases and app states)

Empty, error, success, waiting, 404 page, or duplicated button clicks while waiting for API response — how does your app react to them? Do you care about these states that are far from ideal situation you coded for? Do you have helpful feedback to your users for when they encounter these? Have you tested for these special cases? Do you listen and respond in your app, or do you do all the talking?

在等待API响应时出现空白，错误，成功，正在等待，404页或重复的按钮单击-您的应用如何对此做出React？ 您是否关心这些与您编写的理想情况相去甚远的状态？ 您的用户在遇到这些问题时是否有有用的反馈？ 您是否针对这些特殊情况进行了测试？ 您是在应用程式中聆听和回应，还是所有谈话内容？

Design, code, and test for all states. Checking user flows can help you a lot to get rid of these easily forsaken points and dead ends. Simply test your work with some users, or at least do it on your own.

设计，编码和测试所有状态 。 检查用户流可以极大地帮助您摆脱这些容易遗忘的问题和死胡同。 只需与某些用户一起测试您的工作，或者至少自己完成。

Put yourself in users’ shoes by imagining various scenarios that may happen, and remember that this app is completely new for this person.

通过想象可能发