原文地址：blog.ionicframework.com/build-your-…
原文作者：twitter.com/maxlynch
发表时间：2019年1月15日
在前端世界里，很少有什么东西像设计系统一样火热，设计系统是指建立一个设计规范或可重复使用的组件库，可以在一个团队或公司中共享。设计系统强制执行风格和品牌准则，减少工程师的设计疲劳，并将组件工程整合到一个单一的组件集和构建它们的团队中。基本上，它们帮助团队大规模地管理设计。
像Hubspot、Salesforce和Intuit这样聪明的公司已经投入了相当多的资源，不仅建立了自己的内部设计系统，还与前端设计界的其他公司分享他们的知识。
我不会去说服你设计系统是有价值的，因为证据很容易找到。相反，假设你同意你的公司需要一个设计系统，我想谈谈为了建立一个设计系统需要做出的艰难决定。
设计还是代码？
首先，你需要决定你的设计系统是否只是一个设计规范，还是一套真正的代码组件。
在设计系统的实现上，基本上有两大流派。
第一种是以设计规范为中心，设计师在Figma或Sketch等原型设计/UX工具中建立资产，然后把这些设计资产和概念放在指南中，规定工程师应该如何实现这些设计，但不附带任何工程实现。最著名的例子是谷歌的Material，它首先是作为一个设计规范而存在，该规范的具体平台实现作为衍生作品提供。
另一派观点是，你的设计系统应该是一种真正的代码资产，工程师在构建应用时可以从中提取。一般来说，这些组件是以跨平台、网络优先的方式构建的，因此它们可以在你的团队关心的所有平台上使用。
对于大多数组织来说，只有一个设计规范是不够的，而且给工程师留下了太多的责任，让他们在使用这些组件构建应用的同时，还要忠实地实现规范。相反，如果有一个共享的真实代码组件库，一个团队可以维护，任何应用开发团队都可以拉下来使用，而不必考虑这些组件的实际设计和实现，那么团队将会更加成功。
如何构建一个真实的代码设计系统？
一旦你决定构建出一套可复用的组件，而不仅仅是一个设计规范，那么问题就变成了如何实际构建？
在网络世界里，有各种方法来构建一套共享组件。最早的一种是Bootstrap所流行的方法，正确的HTML标记与CSS类和jQuery的结合，就会形成一个结构化的前端设计框架。大多数Bootstrap用户都知道（我们也知道，我们为Bootstrap打造了一个设计工具），这个过程可能会变得很笨重，而且留下了太多的错误空间。
在过去五年左右的时间里，出现了一个更好的选择：在特定的前端框架中构建一个设计系统，比如Angular或React或Vue。在这种方法中，组件可以以这样的方式构建和发货，工程师只需要导入和使用它们，通常不能对底层组件进行任何修改，也不能使用组件犯任何错误。
为什么你应该重新考虑在Angular、React或Vue上构建你的设计系统？
虽然在Angular、React或Vue中构建设计系统比Bootstrap中使用的过于开放的方法要好不少，但它有一个主要的缺陷：只有当你公司的其他部分已经在该单一框架上标准化时，它才会发挥作用!
虽然这些框架对于构建应用程序来说是非常棒的，而且大多数团队都应该使用一个框架，但是当涉及到构建一套将分布在各个团队中的组件时，它们可能不适合大多数企业，其中许多团队正在或将来可能会做出自己的技术决策。
此外，鉴于这些框架发展迅速，应用开发团队可能会决定独立于其他团队转移到较新版本的框架，这可能会引入组件分布的兼容性问题。
这其实与这些框架的优劣无关，而是一个简单的事实，即一个挑选了比如Angular的团队，不能只用React组件的方式一流。即使你的公司已经标准化了单一的前端技术栈，我们都知道，行业变化很快，今天看起来是一个稳妥的选择，可能在几年后就会发生重大变化。
一个组件模式统治一切
如果说Angular、React或Vue不是构建一套可重用组件的正确选择，那么什么才是呢？
答案是Web Components，这是一套在所有现代浏览器中都可用的标准化API，它使得构建丰富的、由JavaScript驱动的组件成为可能，并将它们作为简单的HTML标签发布，任何Web开发人员或设计师都可以使用它们，而不管他们选择在上面使用什么框架或库。
Web Components是标准化的技术，并且在现代浏览器中得到了原生支持。这些组件几乎可以在当今所有的移动设备和桌面浏览器上运行，由于它们是直接嵌入到浏览器中的，所以你不需要特定的前端框架就可以使用它们。对于那些不支持它们的浏览器，可以使用polyfills来填补空白（稍后再谈）。
有例子吗？
Web组件支持相对较新（2018年是第一个可行的年份），因此希望在上面标准化其设计系统的团队可能很难在野外找到例子。
一个大的例子是Ionic Framework第4版，这是一个基于Web的UI设计系统，帮助团队为iOS、Android、桌面（Electron）和Web（Progressive Web Apps等）构建应用。
从历史上看，Ionic是以一套预制的AngularJS，然后是Angular 2+组件的形式出货的。任何使用AngularJS或Angular的团队都可以导入Ionic的组件，并在他们的应用中使用它们。当Angular是唯一的游戏时，这很好用，但前端生态系统迅速发展，突然间团队使用的不仅仅是Angular。Ionic发现自己是孤立的，无法帮助最多的Web开发者构建应用。
为了解决这个问题，Ionic团队决定，对于像Ionic这样的设计系统来说，正确的决定是不与特定的框架 "绑定"，要求任何Ionic的用户都必须配合使用该框架。相反，这些组件应该使用可以在任何框架中工作的技术来构建，并且最好是建立在网络标准API之上，可以持续几十年。
令人着迷的是，Ionic的问题与我们听到的公司团队的问题是多么的相似，这些公司的团队也是在单一框架之上构建自己的设计系统。几年前有意义的东西，随着前端生态系统的发展，他们的应用开发团队想要尝试新的框架，甚至升级现有的框架，最终成为了错误的解决方案。
我们非常相信Web Components是解决这个问题的正确方案，所以我们投资建立了像Stencil这样的工具，让使用Web Components构建和发布设计系统变得更加容易。Stencil不仅使构建Web组件变得简单，而且它还能自动为需要它们的浏览器管理polyfills，并将组件分组为 "集合"，可以一起加载以提高性能。它生产的组件在文件大小上也非常小，超过了现代Progressive Web App时代的性能标准。与框架不同，钢网只是提供了一种结构化的方式来生成Web组件，以达到构建设计系统的目的，它很可能不会被用来作为你的其他App的 "框架"。
但不要只相信我们的话。Web Components用于设计资产的实际使用量正在悄然上升，很明显，这是一种对顶级技术公司极具吸引力的方法（以GitHub为例）。
Angular Elements、Vue Web Components等呢？
前端世界里有两个令人兴奋的项目是Angular Elements和Vue的Web组件输出支持。这些项目允许Angular和Vue输出Web Components，框架在生成的组件中 "自成一体"，或者在外部与框架链接。
我很乐观地认为，这些项目将为那些在这些框架上构建了现有组件系统的团队提供一个很好的中间地带，并希望将它们从框架中 "解锁 "出来，供那些希望在这些框架之外消费组件的团队使用。
这些项目需要注意的是：目前，它们要么捆绑在框架本身（Angular），要么要求框架作为一个全局变量（Vue）。对我们来说，这使得它们对于希望尽可能精简和框架无关的设计系统来说不是一个理想的选择。此外，这些项目不会自动为客户管理polyfills，这意味着你需要自己管理这些项目，并确保你只为需要它们的客户提供服务。
尽管如此，我们乐观地认为这些项目将随着时间的推移而改进，并使这些框架成为设计系统的良好选择，尽管今天还没有准备好。
用Web组件构建你的设计系统
在Ionic，我们的业务是打造一个领先的实战代码设计系统，让团队可以使用标准化的Web技术来构建跨平台的应用。每天我们都会和越来越多的企业交流，他们希望在Ionic的基础上 "打造自己的Ionic"，并向我们寻求帮助，了解如何做到这一点。
当我们与团队交谈时，很明显，解决这个问题的旧方法是无法扩展的。他们希望投资于一种组件模型，这种模型可以与他们团队选择使用的任何技术一起工作，并且无论前端生态系统发生了什么，都能稳定地持续很多年。
当我们提出使用Web组件来解决这个问题时，这些团队往往会很感兴趣，并表示这正是他们正在寻找的东西。
如果您也很感兴趣，那么使用Web Components开始构建是很容易的。
开始使用Web组件
有很多关于使用新的Web组件API进行构建的教程。我们建议从Google的Custom Elements概述开始，了解相关的低级API。之后，查看Stencil、LitElement或SkateJS，了解一些简化使用低级API的工具/库。
用Ionic构建你自己的Ionic
最后，因为Ionic Framework 4本身就是一个设计系统，所以可以把它作为自己设计系统的基础。而且因为它是建立在Web组件的基础上，所以它具有上述的所有优点。
这就意味着您不需要投入大量的资源来构建一套自定义的组件并对其进行优化，您可以使用业界领先的Ionic Framework 4作为您自己设计系统的基础。我们已经投入了大量的时间来暴露每个组件的主题和定制功能，使得您可以很容易地修改和快速应用您的品牌，而不需要拆开组件来做。
另外，Ionic Framework 4组件可以在iOS，Android，桌面与Electron，以及任何网络运行的地方（如Progressive Web Apps）工作。你可以免费获得所有这些。
如果你是一个团队或公司，想在Ionic Framework之上建立自己的跨平台设计系统，我们可以帮助你。请联系我们，我们很高兴看到Ionic是否可以帮助您的团队使用开放的网络技术和Ionic Framework 4构建和扩展设计系统。
无论如何，我们希望您能考虑使用Web Components来构建您的下一个设计系统，以便所有的Web开发人员都能使用它，无论他们选择使用什么框架和库。
