javascript组件

Here’s a question I’ve heard a few times recently:

这是我最近几次听到的一个问题：

“What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?”

“如果我们在React / Vue / Angular /中创建组件库，而用新的组件技术替代它，该怎么办？”

That’s not a question of if. It’s a question of when. These technologies have become wildly popular, but they’re not the end game. Like all technologies, something better will eventually come along and replace them.

这不是一个问题。 这是什么时候的问题。 这些技术已经变得非常流行，但并不是最终的结果。 像所有技术一样，最终会出现更好的东西并取代它们。

But that fact is largely irrelevant. Establishing a library of reusable components for your company today remains absolutely critical.

但是，这一事实在很大程度上是无关紧要的。 今天，为您的公司建立可重用组件库仍然至关重要。

Here’s why.

这就是为什么。

今天快一点 (Move Faster Today)

Reusable components help your team move faster by creating higher level abstractions. Components eliminate decision fatigue by programmatically enforcing a standardized approach. Just consider an opinionated form TextInput component.

可重用组件通过创建更高级别的抽象来帮助您的团队更快地移动。 组件通过以编程方式实施标准化方法来消除决策疲劳。 只需考虑一个带有形式的TextInput组件。

It can eliminate all the following decisions:

它可以消除以下所有决策：

1. Should I put the label above the input or beside it?
   我应该将标签放在输入上方还是旁边？
2. Should I display validation errors to the right or below the input?
   我应该在输入的右侧还是下方显示验证错误？
3. What color should the error be?
   错误应该是什么颜色？
4. How should I mark required fields?
   如何标记必填字段？
5. Should I validate required fields on blur or upon submit?
   我应该在模糊或提交时验证必填字段吗？
6. How much padding should I place between the label and the input?
   标签和输入之间应放置多少填充？

The list goes on. These aren’t questions your designers and developers should be asking every time they create a new form.

清单继续。 这些并不是您的设计师和开发人员每次创建新表单时都应该问的问题。

增强一致性 (Enforce Consistency)

Reusable components enforce user interface consistency. Your company likely has many developers. Yet your job is to build an app that looks like it was built by one developer.

可重用组件可增强用户界面的一致性。 您的公司可能有很多开发人员。 然而，您的工作是构建一个看起来像是由开发人员开发的应用程序。

To do that, it’s critical to use reusable components. Copy/paste isn’t a design pattern. If designers and developers have the freedom to start from scratch again and again, your application will quickly become a patchwork of different looks, feels, and technologies.

为此，使用可重用组件至关重要。 复制/粘贴不是设计模式。 如果设计人员和开发人员能够一次又一次地从头开始，那么您的应用程序将Swift成为各种外观，感觉和技术的拼凑而成。

提高绩效 (Improve Performance)

In a client side rendered app, every time you use a component you improve performance. Why? Because it minimizes the application’s bundle size and memory footprint. Using a component a second time requires no additional download, and hardly any extra memory.

在客户端渲染的应用程序中，每次使用组件都会提高性能。 为什么？ 因为它最大程度地减少了应用程序的捆绑包大小和内存占用。 第二次使用组件不需要额外的下载，几乎不需要任何额外的内存 。

Without a component library, your team is highly likely to include duplicate JavaScript that solves the same problems in slightly different ways which will bloat the bundle and slow performance. Even worse, they’re likely to grab another competing library and thus require users to download multiple full libraries that do the same thing.

没有组件库，您的团队很可能会包含重复JavaScript，这些JavaScript会以略有不同的方式解决相同的问题，从而使捆绑包膨胀并降低性能。 更糟糕的是，他们可能会抢夺另一个竞争的库，从而要求用户下载多个执行相同操作的完整库。

减少维护 (Less Maintenance)

More code leads to more maintenance. More maintenance leads to higher costs and more people which creates additional communication overhead that slows you down even further. Reusable components minimize the amount of code you need to create and maintain today.

更多代码导致更多维护。 更多的维护会导致更高的成本和更多的人员，从而造成额外的通信开销，从而使您进一步放慢速度。 可重用组件最大程度地减少了您今天需要创建和维护的代码量。

以后更容易更新 (Easier Updates Later)

Finally, yes, eventually the component tech you’re using today is going to be legacy. But by creating a reusable component library today, you minimize the surface area that needs updated later.

最后，是的，最终您今天使用的组件技术将成为传统。 但是，通过今天创建可重用的组件库，可以最大程度地减少以后需要更新的表面积。

It’s far easier to migrate a carefully componentized app because you can replace existing components one component at a time. That’s not so easy when your application is a patchwork of different technologies and patterns. Reusable components minimize the surface area you’ll need to update later.

迁移经过仔细组成的应用程序要容易得多，因为您可以一次替换一个组件中的现有组件。 当您的应用程序是不同技术和模式的拼凑而成时，这并不是那么容易。 可重复使用的组件可以最大程度地减少您以后需要更新的表面积。

投资少 (Low Investment)

A component library doesn’t actually require that much work. For instance, if you choose React, you need not, (and typically shouldn’t) start from scratch. There are literally dozens of mature component libraries to choose from and 100’s of standalone components as well.

组件库实际上并不需要那么多的工作。 例如，如果您选择React，则不需要(通常也不应)从头开始。 实际上，有数十种成熟的组件库可供选择，还有100多种独立组件。

Use a popular component library as your starting point and tweak it to your needs. Trust me, this need not take long and the benefits are significant.

使用流行的组件库作为起点，并根据需要进行调整。 相信我，这不需要花很长时间，而且好处是巨大的。

Alternatively, you could choose to create plain CSS components as your foundation. An example of this approach is Stacks from StackOverflow. The advantage to this approach is twofold:

另外，您可以选择创建简单CSS组件作为基础。 这种方法的一个示例是StackOverflow中的Stacks 。 这种方法的优点是双重的：

1. If you move to a new technology in the future, the plain CSS foundation that you’re using behind the scenes in your JavaScript components can be reused.
   如果将来使用新技术，则可以重用JavaScript组件在幕后使用的普通CSS基础。
2. If your company is currently using multiple component approaches such as React, Angular, and/or Vue, then this CSS approach can be used as the foundation for all.
   如果您的公司当前正在使用诸如React，Angular和/或Vue之类的多种组件方法，那么此CSS方法可以用作所有方法的基础。

The disadvantage? You have to build your components from scratch so that they utilize your plain CSS component foundation.

劣势？ 您必须从头开始构建组件，以便它们利用您的普通CSS组件基础。

My preference? Leverage an existing JavaScript component library as your foundation to minimize the amount of code you need to write to get rolling.

我的偏好？ 利用现有JavaScript组件库作为基础，以最大限度地减少滚动所需的代码量。

摘要 (Summary)

Don’t let the rapid innovation in JavaScript scare you away from investing in a reusable component library for your company. Yes, today’s technology will eventually be replaced, but change is the only constant in technology. For all the reasons above, reusable components are worth embracing today.

不要让JavaScript的快速创新吓到您远离为公司投资可重用组件库的麻烦。 是的，今天的技术最终将被替代，但是变化是技术中唯一不变的。 由于上述所有原因，可重复使用的组件今天值得拥抱。

Looking for more details on how to get this done? I recently published “Creating a Reusable React Component Library” on Pluralsight. (free trial)

寻找有关如何完成此操作的更多详细信息？ 我最近在Pluralsight上发布了“ 创建可重用的React组件库 ”。 ( 免费试用 )

寻找更多关于React的信息？ ⚛️ (Looking for More on React? ⚛️)

I’ve authored multiple React and JavaScript courses on Pluralsight.

我已经在Pluralsight上撰写了多篇React和JavaScript课程 。

Cory House is the author of multiple courses on JavaScript, React, clean code, .NET, and more on Pluralsight. He is principal consultant at reactjsconsulting.com, a Software Architect, Microsoft MVP, and trains software developers internationally on front-end development practices. Cory tweets about JavaScript and front-end development on Twitter as @housecor.

Cory House是JavaScript，React，干净代码，.NET等课程的多本课程的作者，并且还提供了有关Pluralsight的更多课程 。 他是Microsoft MVP的软件架构师reactjsconsulting.com的首席顾问，并就前端开发实践对国际软件开发人员进行培训。 Cory在Twitter上以@housecor表示关于JavaScript和前端开发的推文 。

翻译自: https://www.freecodecamp.org/news/yep-javascript-moves-fast-build-your-component-library-anyway-a50576ab3031/

javascript组件