Let’s try Build Summary Integration by ZEIT Now

Deploy Summary is a badass new feature by ZEIT Now . This integration analyzes your deployments, detects changed pages, and keeps a comment updated in your “pull request,” or PR. Yep, I know that it sounds a bit Sci-fi , but the future is here.

Our team had the opportunity to be early testers. So, now we don’t want to miss the chance to share our feedback with you.

We created two publics — Github and Gitlab repositories — just in case you wanted to try this out by yourself . The only thing you will need to do is to create a PR and cross your fingers. :grinning:

The Deploy Summary docs are very straightforward. After following them, you should be able to see something like this:

Here, the fun begins because after submitting a PR, you will see how the magic flows.

Creating your first PR

After doing some modifications in the index.js of our Next application and submitting the PR, a comment is generated containing a screenshot with the changes.

Current version

Adding our first component

Url: Destination Space

Our first preview

If you add more commits to the PR, the screenshot is going to be updated automatically. In the example, I will go ahead and tweak the design a little bit (it’s just a line of code, no worries)

Doing some updates

• Url: New Design …
• PR: New Design Colors

More commits in the same PR

Let’s see what happens if I update multiple routes.

Updating multiple routes

• Url: Multiple …
• PR: Multiple routes

Benefits

• Quickly spot the visual impact of a given change.
• It will accelerate the Code Review process.

One more thing…

At the very end of the documentation, there is a paragraph that can be used to represent the impact the feature has not only on us but the web community as a whole.

“In addition to a growing list of supported framework , we will be soon exploring new ways of enhancing your workflow : imagine getting diff screenshots, lighthouse scores or calculated bundle sizes right next to your changed code.”

What could be the real impact of this sentence?

In the current front-end ecosystem, while working in a component-based architecture, it is natural to start importing modules that can hurt your application performance. Yep… there are some plugins, but having all these tools as part of your regular workflow without doing anything additional is priceless. At Front10 in our component explorer, we add a performance indicator to all the principal components, which is super helpful for our team and clients.

Performance indicator of a component.

More critical than specifics is this idea of helping people enhance their workflows. Sometimes, we grow accustomed to poor routines, and because of this, our productivity gets hurt. Having these kinds of tools and frameworks can help take our potential to the next level.

This article was completed thanks to the team effort at Front10 , BTE.