You read that right. The Github front-end team spent the better part of a year reducing the size of the project dependencies by 30KB.

What is the reduction? JQuery.

Technology is still technical debt

Over the years, Github has grown into a company with hundreds of engineers.

As a large company, some people are assigned to work on performance optimization.

However, the Wolf is much meat, which can be so much optimization point?

Is it hard to find new performance benefits or trouble with your old code?

So the team looked at technical debt.

Lu Xun once said, if the technology used by our predecessors prevents future generations from building the wheel again, it will become a technical debt.

So which debt should be picked to pay? JQuery is the perfect choice. Here’s why:

  • Extensive reliance, this change up workload has absolutely

  • JQuery represents the old generation of Web development. Replace it with a new one. The contrast is obvious!

  • JQuery is 30KB, a fly is meat

Let’s do it. Let’s evaluate the workload.

Workload Max Max Max

The new guy says to himself, “This amount of work, I estimate conservatively, gradually replace, one week development, one week beta, two weeks live?”

The group leader pa of clap a table: “that must be 996 of small workshop just so stem! We’re big companies that do things professionally, and it’s about steady iteration, incremental decoupling.”

First choice: we need to set up metrics to track the number of jQuery calls per line of code.

Real-time monitoring to ensure the steady decline of indicators.

Secondly, someone should develop a Lint (see eslint-plugin-jquery) and popularize it to the whole team so that no one can continue to use jquery methods.

Newbie asks: “What if someone adds eslint-disable to bypass the rule?”

The group leader smiled slightly, “young man, on the way.”

We also had to develop a Github robot that would notify team members whenever someone submitted new code that included the ESLint-Disable rule, so we could intervene to review the code as soon as possible.

Finally, as jQuery is a modular library, to ensure steady removal, we need to maintain a custom version of jQuery.

Whenever it is determined that a module is no longer in use, remove it from the custom version and provide a smaller version.

For example, when $. Ajax is completely replaced with fetch, ajax modules can be removed.

“I don’t think it will work without half a year’s work after this operation.” The group leader leaned back in his chair and shook his head slightly.

Sublimation theme

You think this is it? Naive ~

What we have done ahead can only be described as steady progress in our work. What follows is the most important KPI.

With jQuery removed, the project must have a lot of native JS.

Repetitive code is abstracted and encapsulated, right?

“You mean the upper frame! Vue or Angular?” The new man replied.

“A little! The pattern is small!” The group leader heaved a sigh.

“Embracing standards, of course. Vue’s template syntax also evolved from the Web Components standard.”

“We will! Led! When!!! Generation!”

From now on, all reusable functional Components are packaged as Web Components.

For example, the copy and paste function should be wrapped as clipboard-copy:

<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">Click on the copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
Copy the code

Following HTML conventions, clicking the Clipboard-Copy component copies the id selector pointed to by the for attribute to the clipboard.

The sample code

The specific implementation

In addition, Shadow DOM is enabled to seal the component without affecting other components.

You ask compatibility? Small! The pattern is small again!

Companies like us are there to push browser vendors forward.

The result is github Elements, a Web Components library with 1.4 K star

Afterword.

After more than half a year of effort, the Github team successfully eradicated jQuery from the project dependency, reducing the dependency volume by 30KB.

If you review the Github page code, you’ll occasionally see Web components, such as:

Are you out of touch with the big company methodology?