Get best of the week

前端工具包：有用的实用程序和功能，可加快开发速度



前台打开记事本，编写几行代码，在浏览器中检查并通过FTP上传到服务器的日子已经一去不复返了。现代用户界面开发已变得更加复杂。 JavaScript生态系统正在快速发展和变化，以至于很容易混淆。在本文中，我将告诉您Parallels前端团队使用什么来优化性能。

我敢肯定，目前在世界某个地方，有两家前端供应商正在认真争论哪种项目更适合该项目使用。第三个连接到它们-帧的热心对手。他声称您需要使用普通的JavaScript编写代码，因为所有这些渐进式pribluds只会膨胀具有不必要依赖关系的代码，并且通常是为无法编程的人设计的。他们的讨论可能一无所获。一个小时后，每个人都会悄悄地分散工作。每个人都会保持自己的意见，并会像往常一样工作。

在我看来，这样的争执要比关于早先出现的争执更为严重，那就是鸡还是鸡蛋。因为不存在用于无问题前端开发的唯一真正有效的解决方案。我同意无需使用Angular，React，Vue.js和类似框架即可完成所有基本功能。但是，如果目标是合作，并且您不仅创建一个大型应用程序，而且创建一个团队，那么使用它们会更容易。

当然，您可以没有它们，但是它们可以避免浪费时间创建标准，设置结构（您始终知道它在哪里），简化例程并加快开发速度。如果我们假设语言是字母，那么该框架可以被视为带有陈词滥调对话框的短语集，从而可以轻松地建立交流。

在本文中，我将分享团队和我在创建用户界面时使用的有用工具。它们极大地简化了联合开发和进一步的项目支持。

***
我认为一开始值得介绍一下自己。九年前，即2011年，我进入了IT世界。他最初是在一个小型组织中的完整堆栈。然后他从事混合移动应用程序，他负责WebView中逻辑部分。几年后，他来到了Parallels。在这里，我在Cloud团队中工作，该团队是公司所有产品的Web解决方案提供商。大量的业务功能需要我仔细考虑并实施前端任务。现在专注于开发“我的帐户”门户。

从上面的文本中您可能已经了解到，此Web应用程序界面的创建并非没有其框架。我们选择了Vue.js。为了使与他一起工作愉快，他们还部署了其他工具。这就是帮助我们尽可能优化开发流程的原因。

Vue CLI


此命令行实用程序包括许多有用的功能，旨在用于快速项目开发。粗略地说，它创建了一个标准的启动框架，使您可以专注于创建应用程序，而无需在初始阶段就考虑组装的工具和配置。以后可以根据项目需要对其进行自定义。

Vue CLI为核心Web开发技术提供支持。开箱即用的工具包括Webpack，Babel，TypeScript，ESLint，Sass。此外，还内置了对使用Mocha和Nightwatch进行单元和端到端测试的支持。

Vue开发工具


浏览器扩展，允许您实时调试应用程序。它可以访问组件的属性和方法，所有事件的列表。您可以通过网页完全控制应用程序的状态，而不必等待分区看到结果。

适用于Chrome和Firefox。其他浏览器没有官方扩展，但是您可以通过Electron应用程序运行Vue Devtools。然后，该工具将可在任何环境中使用。

策普林


该服务使布局转移到开发变得方便。与任何大型公司一样，我们有一组UI组件。以前，它在PSD文件中，因此，访问它非常混乱。而在Zeplin有这样的事情，被称为全球风格指南。

您可以在其中收集用于构建企业界面的所有规则。对于每个UI组件，都会自动生成CSS代码-表示组成该元素的每个块的颜色，大小，缩进和其他属性。也就是说，不再需要每次都从头开始实施样式，这大大加快了工作速度。PSD时代结束了。

另外，还有所有更改的历史记录。您可以轻松跟踪初始阶段的情况以及最终情况。

Git URL作为依赖项


这是我们正在使用的npm功能。我们需要共享一组UI组件，以便公司内的同事可以访问它，并可以根据需要使用它。解决此问题的最明显方法是npm软件包。但是我们不希望在公共注册表中使用它，所以本地npm服务器并不是一个好主意，因此我们使用了git + npm捆绑软件。

因此，每个Parallels员工都可以访问UI代码库，并且由于它是git，因此也解决了版本控制问题。由于更新不会有任何问题，不会有任何损坏。

哨兵


为了收集客户端发生的错误和日志，而无需等待投诉，我们将Sentry连接了起来。该工具跟踪自定义浏览器中的代码执行。

如果发现错误，则会自动将完整的报告发送给我们，该报告既反映了事件的本质，又反映了事件之前的操作列表。根据这些数据，很容易找到原因并修复所有问题。

这也使我们可以减轻技术支持的负担，使我们的同事免于不必要的打扰。

关于成瘾的危险


最后，一点建议。尝试自己编写实用程序。最近，具有现成解决方案的图书馆变得非常流行。关键在于，前端招标甚至依赖于“单行”功能，它们可以闭眼书写。这有什么威胁？失败。

一个有启发性的故事发生在四年前。一个人从npm注册表中删除了他的11行程序包，因此破坏了大约一千个项目。由于缺少名为“ left-pad”的微型模块，全世界的开发人员在尝试部署其应用程序时开始收到错误消息。

因此，不要偷懒，不要将代码替换为一堆依赖项。依靠自己并自己编写小型实用程序，并且仅将现成的库解决方案用于复杂功能-它们确实有助于避免浪费时间。

More articles:


All Articles