At 世界杯押注, 我们知道模式库(也称为组件库), UI libraries, 或者代码套件)是在组织的产品之间加强一致性的优秀工具. 它们是设计和代码的核心真理来源，它们减少了重复的世界杯押注.
If you’ve read Greg’s post on the benefits of using pattern libraries，那么您就知道模式库使组织中的许多不同人员受益. 其中之一当然是开发人员，他们监督团队的执行和维护 design system.
For the last few years, 我们与一家金融服务产品公司合作，帮助他们集成我们为他们创建的模式库. We’ve seen how different teams use patterns, how they evolve, and how we can remove many common pain points. Here’s some of what we’ve learned.
Historical Challenges
In the past, we included a Build Kit’s assets wholesale, 开发人员会复制和粘贴他们想要使用的模式. We noticed across many teams that this didn’t scale well at all. Updates were cumbersome and manual, if possible at all, 而做出改变的负担往往太大，以至于无法期望这些改变发生. To answer these challenges, 我们开始将模式库作为一个单独的包进行部署——这样就可以拉下一个版本的库，并使用所需的任何和所有元素.
New solutions often come with new challenges. 与使用库的团队一起世界杯押注，使我们能够识别机会，使每个人的生活更轻松一点. We identified a few challenges with updates and maintenance:
Pattern Updates: All or Nothing
模式的每次更改都意味着整个模式库的更新版本. 这意味着产品的开发团队有一些世界杯押注要做. They had to assess all the changes made since the last update, 权衡一下他们是否能毫无争议地拿下整个新图书馆. Compounding the problem, 如果依赖于共享库的多个产品团队不能达成一致, then no team could make efficient use of the update.
例如，梅根的团队正在全力进行产品改革. 作为更新的一部分，他们为导航设计了一个更易于访问、更通用的模式. As the product owner, 梅根与设计团队一起完善了导航设计和功能. 设计团队会通知其他产品团队，以确保设计能够满足他们未来的需求.
与此同时，Keith的产品团队正在修复一些表单模式的错误. 修复程序已经准备好进行测试，他们期待着将修复程序迁移到生产环境中.
梅根的团队已经准备好安装导航了，但有个问题. 如果他们在Keith的错误修复之前将新的导航(v2)引入模式库, then Keith’s team is forced to accept v2 of the navigation as well. They’re not ready for the extra work workload just yet. What’s the organization to do?
在旧的设置中，如果不进行所有更改，就无法在版本3中进行任何更改. Product Team A might not be ready for some of those changes!
Unused Code
任何给定的产品都不可能使用库中的所有模式. 这意味着如果一个开发人员为了方便而包含了整个库, a lot of unused HTML, CSS, and JavaScript made its way to the user’s browser, increasing load time. Why make users wait for something they’ll never see?
Implicit Dependencies
库中的许多模式都是由其他基础模式构建的. In code, 当您知道自己需要什么时，最好使用显式依赖项, it’s clearer when it’s missing. If your navigation component includes a search bar component, 如果您没有包含自己的搜索栏，它可能会出现故障.
Meaningless Versioning
当发布模式库的新版本pattern library v1时.2.3 meant nothing. 仅从版本号来看，还不清楚是什么地方发生了变化，也不清楚变化的程度. 这意味着团队需要做更多的世界杯押注来确定他们要在项目中引入哪些更新.
实际上，我们已经找到了手动方法来规避其中的一些问题. But they introduce extra cognitive work and code complexity. What if there was a better way?
Break It Down
我们希望梅根和基思的团队都能快乐而富有成效! My colleague Amanda 知道必须有一种方法使模式库更易于管理和使用. So, we set out to solve some of these pain points. 在世界杯押注，我们将组件设计为独立的和可重用的，并以同样的方式开发它们. Why not deploy them in the same manner? 将模式作为一个自给自足的包发布似乎解决了我们的许多问题, and we leveraged a library called Lerna.js to help us do just that.
Use Only What You Need
With the new structure, the pattern library is like shopping: pick right off the shelf, and use only what you need. Don’t need a footer? No need to install it! 需要最新版本的模态，但没有时间更新其他东西? Go right ahead!
The new, flexible deployment allows teams to pick what they need, and make granular updates as they become available!
Update Without Disruption. Version Numbers With Meaning
Patterns now receive regular updates and major changes as needed.
We use versioning conventions (Semver)来显示一个变化是小的、大的还是潜在的破坏. 这有助于团队通过更新他们正在使用的组件进行推理.
No More Code Bloat
只使用你需要的代码意味着更少的代码，更少的代码意味着更好的用户体验. 组件之间共享的依赖项只安装一次，避免了重复.
Explicit Dependencies
当您安装一个组件时，它会自动安装它所依赖的基础组件. 现在，当您安装导航时，搜索栏被列为依赖项! 所有需要的逻辑和样式都安装在导航旁边. No more worrying about what might be missing!
In the past few years, 大型JavaScript库维护者已经开始向小型库的方向发展, isolated packages. 直到最近，这种范式才被应用到UI模式库中. We’ve drawn inspiration from the likes of GovAU in leveraging new tool sets to make small packages easy to manage.
Conclusion
毫无疑问，随着用户需求的变化，梅根和基思的产品将继续变得越来越复杂. We develop pattern libraries to manage complexity. 我们的代码和系统必须经得起未来的检验，这样Meghan和Keith才能自由地专注于他们关心的事情:他们的用户和产品.