网站建设公司前端框架开发流程详解。在博纳网络深圳
网站建设公司，前端团队有着在后端开发之前就进行多次迭代的绝佳优势。我们先对想要创建或更新的功能设定长期的目标，然后一拿到经过确认的原型，就交给开发团队去实现。在过去的项目中，我们也许说过：“好了，这就是我们希望输出的标记格式，请尽可能保持一致。”我们会使用一组 Mustache 或者 Twig 模板来创建标记，然后告诉开发团队去创建能够输出同样标记的 PHP、Ruby、Angular、React 或 Ember 模板。这种方式的问题在于，有一半的开发时间都浪费在让后端输出的标记跟我们的原型保持一致上了。因为我们总是在解决“CMS 中输出的标记与我们的原型不同”的问题。
即使我们真的做到了让那些标记跟原型保持一致，往往也会担心原型和 CMS 代码不同步的问题。有可能其中一边发生了变化，另一边却没有，最终慢慢导致我们的原型不被信任。我们不能确定原型与正在开发的产品是否一致，对功能的迭代又是直接在 CMS 代码上做改动。这个问题的原因在于，CMS 和原型开发工具使用的是不同的 HTML 模板，即使它们共享了 CSS 和 JavaScript 文件。在对博纳网络网站建设公司对客户网站的主题进行重构时，我们有机会彻底解决这个“最后一公里”的问题。
网站建设公司前端框架开发流程详解之征服最后一公里
我们的问题是，Drupal 有一个非常固执的渲染引擎，因为标记必须通过 Drupal 才能渲染，所以如果不运行 Drupal，就很难制作标记的原型。因此，我们决定颠覆一下 Drupal 的渲染途径，并加入自己的解决方案。我们想要一个可以在原型工具、Drupal、WordPress，以及其他任何希望采用我们的设计系统的平台上都能使用的解决方案。我们从 Twig 模板语言入手，因为它成熟且稳定，还拥有 PHP 和 Node 编译引擎。既然我们已经有了一个通用的渲染引擎，它允许在原型工具中使用跟实际开发中一致的模板文件，那么就再也不用担心系统之间转换模板的问题了。一旦在样式文档中创建了一个样例，我们就可以把用于那个样例的数据集记录下来，交给后端开发人员来实现。在某种程度上，我们创建了一个设计系统的 API，或者一个样式服务，它为用户提供了一个简单、清晰、跨平台的接口，用于接收数据输入和输出相同的 HTML。
一系列标准的产出
数据和模板的关系很快成为我们的设计系统中非常重要的部分。开发人员开始要求提供模板变量的列表、可变的内容类型，以及它们当中哪些是必选项。这些要求很重要，我们也希望给开发人员提供尽可能完整的信息。于是，就有了和所有的组件和布局一同提供的一系列标准产出。一系列标准的组件产出如下。JSON模式该模式定义了组件的各种属性（变量）、内容类型，以及其中哪些是必选项。模板文件Twig 文件接收由 JSON 模式定义的一组数据。可选数据被放在 if 语句之后，而数组数据则会被遍历。Sass partial所有的组件样式都来自单一的 Sass partial 文件 。它会被编译到主样式 style.css 中，或者作为一个独立的 CSS 文件被加载进来。可视化的回归测试
这个文件描述了每一次运行回归测试时，需要测试的所有的浏览器宽度和组件状态。在加入任何新的代码前，一定要通过这些测试。
网站建设公司前端框架开发流程详解之测试数据
这个文件允许构造测试专用的数据来达到完整的测试覆盖率，以及测试一些边界情况。文档文档文件是为文档工具 Hologram（https：//github.com/trulia/hologram）提供数据的 markdown 文件，它提供组件的描述并列明其功能。此外，文档页还提供组件的可视化表示和在线编辑器，以供测试不同的内容和创建该内容集合的分享链接。网站建设公司前端框架开发流程详解之文档数据
文档数据是文档页用来创建初始视图的原始数据。上述所有这些文件对于功能开发而言都是宝贵的产出，但其中有一个文件是整个流程的奠基石，因此也通常首先创建，那就是 JSON 模式。在这些产出中，没有哪个文件比 JSON 模式更好地描述了这项功能的需求和能力。每当一个组件的功能发生变化时，都是先由模式引起的，然后才扩展到组件的其他文件。正因为模式文件如此重要，所以这个开发流程称为模式驱动的设计系统。好了，
深圳网站建设公司本文关于“网站建设公司前端框架开发流程详解”知识就分享到这里。如果您要找网站建设公司定制高端网站，联系我们在线客服，获取免费解决方案。谢谢关注，博纳网络编辑整理。
