情况
我最近一直在做一个 UI 开发似乎太耗时的项目。在这种情况下，就计算机科学或复杂性的角度而言，服务器端的“业务规则”比表示方面要复杂得多。
我发现自己因行为问题而挠头/撞墙，这些问题与直觉方法不同，一直是浪费时间和糟糕文档的黑洞，我可能试图获得一个简单的方法正确排列的 UI 元素。
我没有抱怨；我知道 Web 开发需要支持的复杂性和广泛的受众，但与编写具有复杂逻辑、数学、科学的代码所需的时间相比，完成看似容易的部分需要多长时间，我对此感到困惑等。
问题
对于将 Web 开发从概念变为现实并快速完成这一过程，或者至少以某种方式让您知道可能需要多长时间，您有什么想法和个人经验？我故意没有提到任何框架或语言，因为我真的很想在这里介绍您使用哪些 Web 开发堆栈，哪些工具或最佳实践可以帮助您更快地完成工作，以及您如何最终获得不会感觉完全脆弱的代码并且充满了黑客攻击。
欢迎夸张、语言偏好和所有想法，我至少想了解一下用于 Web 开发的成功率很高的东西，即使它不是最新最好的东西。
【问题讨论】：
标签： html
我个人发现将所有内容分解为小任务会有所帮助。
我喜欢的网页设计方式：
如果您将所有这些分解成小任务，当您完成每个任务时，您会更有动力继续工作。
就像我说的，我就是这样做的，而且似乎进展得很快，尤其是因为我每晚只有大约 1 到 2 小时的工作时间。
【讨论】：
这个问题的答案取决于你是独自工作还是带领团队。
如果您领导一个团队，您将希望按照以下方式分解职责：
设计师 - 这些人应该拥有图形模型的创建和 CSS 的创建/维护。他们应该将 CSS 作为一项责任，这样他们就知道不要创建无法在没有大量代码膨胀的情况下创建为网页的令人发指的图形模型。
标记 - 这些人应该拥有 HTML、可访问性、语义、RDFa 要求以及与前端数据结构相关的任何其他方面的创作。
UIT - 这些人应该拥有 JavaScript、效率要求、内容管理要求、内部流程和前端工具/流程治理，并且通常拥有所有客户端可见代码的最佳实践。
李>应用程序 - 这些人应该拥有服务器端应用程序代码开发、内容管理系统创建/维护和数据库访问要求。这些人是应用程序和服务程序员，为数据库和服务人员提供接口。
QA - 这些人员在认证环境中测试最终产品的所有业务要求。如果发现错误，则应更新并重新分配错误/票证。在 QA 签字确认为有效之前，工作不会完成。
企业主 - 企业主是负责编写初始项目要求并就项目部署做出最终批准决定的个人/团队。除了起草业务需求之外，此人不应与技术流程接触。
项目经理 - 此人确保项目不断向前推进，并按照任何截止日期完成里程碑。是这个人而不是企业主来干预技术流程以确保事情完成。此人必须独立于企业主行事，不得作为企业的工具。项目经理不得拥有或建议对技术人员的要求进行更改。如果必须对需求进行更改，这是从技术到项目经理再到业务所有者的单向流程。
开发流程应该是这样的：
1) 设计师创建图形模型，然后将错误/项目票证重新分配给项目业务所有者。
2) 经业务批准后，应将工单重新分配给标记人员，或根据特定更改请求拒绝设计。
3) 标记写入 HTML 和内容。任何应用程序或数据库需求都应在项目开始之前由业务部门指定，并且标记团队应为所有可能的场景编写代码。内容的结构应该完全反映视觉标记上的内容组织，而不考虑呈现。票证应重新分配给 Design for CSS creation。
4) 设计编写 CSS 以根据他们创建的图形模型添加演示文稿。设计团队必须有权访问 HTML 标记以根据需要添加类属性，但不应允许进行任何其他更改。应将票证重新分配给应用程序以完成所有服务器端要求。
5) 应用程序应该为数据库访问创建所有必要的要求。如果先前的要求令人满意，则应将工单重新分配给 UIT，或重新分配给 Markup 以进行更改/添加。
6) UIT 应该是编写用户界面和 AJAX 要求所需的 JavaScript 交互的最后一步。 UIT 还应该证明之前完成的标准符合性、效率和最佳实践的标记。如果工作不可接受，UIT 应该迅速拒绝该项目。如果需要额外的应用程序工作，则将其重新分配给应用程序，否则将票证重新分配给 QA。
7) QA 是最后的技术站。这些人测试最终产品的业务和功能需求。未经 QA 签字，项目无法发布到生产环境。如果业务需求失败，QA 不得签字。在 QA 签字后，工单应重新分配给企业主。
8) 业务所有者审查项目并确定是否满足所有要求。如果需要更改/添加，可以在此时提交。不得提前提交更改/添加，因为频繁的更改会延迟所有项目。企业主有责任确保他们的初始要求是完整和具体的。如果未对要求的完整性进行审查，则这是企业所有者的过错，此时可以提交更改。正是由于这种责任以及其他相关的业务责任，企业主应该因参与较少而获得更多报酬。
这是完成工作的最有效方式。职责分离非常重要，遵守流程非常重要。如果这两件事都失败了，整个流程就会失败，并且业务会导致开发成本显着增加。
如果您是单独行动而不是团队的一员，我仍然会遵循类似的流程并将角色业务所有者推给客户。如果客户想在项目完成之前进行更改/添加，那么他们可以通过修改原始需求合同的更改附录来支付更多的钱。你不会因为增加的劳动力而失去工资，因为客户无法下定决心。如果这令人不安，那么客户可以为取消合同支付更多的钱。这并不意味着它是生意。如果您的时间不是有价值的商品，那么您不应该独自经营。
【讨论】：
我使用 .NET 堆栈大约 5 年，ASP.NET MVC 堆栈大约 3 个月，旧 ASP 大约 4 年。
处理复杂性的关键是减轻它。在您的代码中，始终将复杂性抽象到合理的水平。例如，假设下订单有 10 个步骤。在这种情况下，在更高级别上，您将拥有一个方法“SubmitOrder”；在它下面可能有 10 个方法调用，用于插入适当的记录、处理库存等。在每个“业务”层中，您可以只处理这些业务问题，甚至在这些层之下，您将处理数据和机械细节。所有这些层的好处是你让每一层处理大部分工作，当你靠近 UI 时，你有一个对 UI 和应用程序需要的方式有意义的“界面”流。
【讨论】：
我认为您对 UI 开发有点误解。 UI 开发很困难，而且其重要性通常被低估。
有必要了解基础知识——在你跳到 HAML 之前，了解你的 HTML，这样你就知道你在抽象什么。在您开始使用 jQuery 之前，请花点时间学习 JavaScript 基础知识 - 您不需要成为专业人士，但是当您需要将一些数字相加时，您应该不去寻找插件。对如何使用 CSS 设置样式有很好的理解。要成为一名称职的 Web UI 开发人员，需要学习很多主题和技术。
也就是说，对于未开发的开发，Rails 是相当不错的。选择 jQuery。并且不要选择隐藏网络实际运作方式的平台。
【讨论】：
我使用 UI 设计师。它们非常适合这种事情。
【讨论】：
我围绕前端工作的实用性和有时简单性来制定我的应用程序要求。
【讨论】：
我的公司主要进行 .NET 开发，我们已经成功地将“net-tiers”模板用于数据访问层。模板被加载到 CodeSmith 代码生成器中并指向数据库。最终结果是您可能想到的任何东西。它将生成您的 DAL、Web 服务、winforms UI 库、Web UI 库、示例网站和管理工具等等。节省一些开发时间的好工具。看看吧。
就实际使用 UI 而言，我认为实际聘请专业人士可能会有所帮助。我们有一位专业的设计师与我们进行一些合同工作。我们所做的只是将 UI 连接到我们的 UI 组件和代码。
【讨论】：
加快获得您想要的 HTML 页面：
首先，确定一个设计并使用图形程序绘制您想要的外观（如果您有 UI 设计师，他们会执行此步骤）。然后，编写与您绘制的内容相匹配的静态 HTML 和 CSS。完成后，编写代码以输出与您决定的格式相匹配的 HTML。
我为 Web 应用程序的一组非常复杂的状态执行此操作，并发现首先手动编写 HTML 和 CSS，而不必与您的服务器程序搏斗，可以让它运行得更快。
【讨论】：
Web 开发人员最常犯的常见错误是他们开始编写标记时没有考虑自己在做什么以及它会是什么样子。后来当他们遇到任何问题时，他们必须多次重组标记，这也会影响设计，而且不是一种有效的方法。
优秀的开发人员有先设计后开发的习惯。我的意思是最好先在 Photoshop 中设计您的网站，然后再开始编码。这对他们帮助很大，因为他们知道自己在做什么以及以后可以做什么。
规划之后，让我们谈谈编码环境。我们有一个很好的网络开发设置，那么它将提高我们的生产力。主要部分是文本编辑器。拥有一个好的文本编辑器非常重要，因为我们的大部分工作都是在文本编辑器上完成的。文本编辑器在提高我们的生产力方面发挥着重要作用。好吧，2019年你不能使用记事本或记事本++。它们已经过时了。 2019年最好的编辑器是VSCODE和Sublime Text。
我个人使用 sublime Text 和一些插件。
Web 开发的另一个重要部分是版本控制。为此，您可以使用git。也有许多在线免费云存储，例如github、bitbucket 等，我们可以在其中保存我们的代码并从世界任何地方访问它。现在，很多人都是远程工作者，他们使用git 分享他们的工作。它不仅对 Web 开发有帮助，而且对每个软件行业都有帮助。这也允许您通过简单地创建分支来尝试不同的样式，而不会弄乱代码。
任何软件开发人员或 Web 开发人员最不知名但最重要的部分是在编码时使用 cmets，因为在小型项目中很容易找到特定的代码段，但是当您在大型项目中工作或使用团队然后 cmets 是必要的，因为其他开发人员可能不熟悉您的命名约定。如果我们使用 cmets，那么您就会知道这段特定代码的作用。
最后，我想对 Web 开发提出的另一件事是使用浏览器的开发人员工具。它们真的很棒，并且非常有助于发现错误。开发者工具包含控制台、实时代码预览、带有各种移动设备选项的响应式网站预览等等。
一些有用的网络开发插件是：
艾米特
美化
颜色选择器
文件图标
Git 排水沟
综合终端
希望你的问题得到答案
【讨论】：
开发人员是非常多产的人。他们不断改进他们的工具，以提高产量并更快地产生更好的结果。
十多年来，我一直在进行全栈 Web 开发。我现在遇到的最困难的障碍之一是我需要在短时间内专注于一系列任务，从设计用户界面到部署 Web 应用程序。
为了加快输出速度，我使用了许多技术和框架。对于 UI，在构建响应式 Web 应用程序时，我通常在我的大多数项目中使用 Bootstrap 4 和 Bulma。
随着我继续专注于开发各种 Web 应用程序，我发现在开发过程中我注意到了某些类似的主题：
考虑以下示例：
登录/注册/忘记密码的用户界面
类似仪表板的布局
用户配置文件的布局
配置形式
这个列表可以继续下去。
我相信大多数全栈开发人员在开发 Web 应用程序 UI 时都会遇到相同的 UI 模式。 因此，为了使上述过程更快，我们创建了一个简单的工具，允许您拖放 - 预制的 Bootstrap 4 组件，如带有封面图像的注册表单、登录表单、仪表板布局等...... 但是等等，已经有许多类似的 Bootstrap 构建器，那我为什么需要创建另一个呢？
大多数 Bootstrap 构建器都专注于创建网站，但我们选择专门为创建更快的 Web 应用程序 UI 而创建它。
还考虑了其他方面。
由于拖放有时是开发人员修改布局的一种限制选择，因此我们创建了一个内置的全功能代码编辑器，允许您生成大量 HTML、CSS 和 JS 文件来扩展 Web 的 UI应用程序。
总之，您可以利用以下优势。
希望您喜欢使用此工具更快地创建响应式 Web 应用程序 UI。
【讨论】：