webpack

2 posts

slack

Optimizing Our E2E Pipeline (opens in new tab)

Slack optimized its monorepo E2E pipeline by avoiding frontend rebuilds when a pull request contains no frontend changes. Using `git diff` to detect relevant changes and serving recent frontend artifacts from S3 through an internal CDN, the team reduced build frequency by 60% and cut end-to-end pipeline time from roughly 10 minutes to 2 minutes. The changes also lowered storage and compute costs and improved test reliability. ## The Cost of Unnecessary Frontend Builds - Slack’s E2E pipeline validates frontend, backend, database, and service changes before merging into `main`. - Previously, every run rebuilt the frontend, even when a pull request changed only backend or unrelated files. - A typical pipeline included: - About 5 minutes for the frontend build - Deployment to QA - More than 200 E2E tests taking another 5 minutes - With hundreds of pull requests merged daily, redundant builds caused: - Thousands of unnecessary builds each week - Nearly a gigabyte of S3 data per build - Terabytes of duplicate stored artifacts - Significant developer and cloud-compute costs ## Conditional Frontend Builds - Slack used `git diff` with three-dot notation to compare the checked-out branch against `main`. - If frontend files had changed, the pipeline ran a new frontend build. - If no frontend changes were detected, the build step was skipped. - Git analyzed the repository’s more than 100,000 tracked files in only a few seconds. ## Reusing Prebuilt Assets - When a new build was unnecessary, the pipeline located a recent frontend build already stored in AWS S3. - The selected artifact was still in production, ensuring the E2E tests used sufficiently current frontend assets. - An internal CDN served those assets to the QA environment. - S3 naming and asset-management conventions made it possible to find an appropriate artifact in under three seconds on average. ## Results and Additional Benefits - Frontend build frequency fell by 60%. - Average E2E pipeline time dropped from about 10 minutes to 2 minutes. - Monthly savings included hundreds of hours of compute and developer waiting time. - S3 usage decreased by several terabytes per month. - Test flakiness reached its lowest measured level, partly because asset delivery became more consistent. - The work also exposed legacy systems and generated a backlog of future maintenance improvements. Slack’s experience demonstrates that pipelines should not automatically repeat expensive steps when their inputs have not changed. Detecting affected files and reusing trustworthy build artifacts can substantially improve speed, reliability, and cost without requiring a wholesale rewrite of the CI/CD system.

figma

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog (opens in new tab)

Figma’s first Plugin Show & Tell highlighted the creativity and practical value emerging from its newly opened plugin ecosystem. The livestream featured five developers demonstrating tools for design-system quality checks, spell checking, icon management, documentation, typography, and even voice control. Figma encouraged developers to explore its Plugin API, build tools for their own workflows, and participate in future community events. ## Community Plugin Showcase - The event was created to: - Promote community-built plugins. - Encourage developers to experiment with the Figma Plugin API. - Give users an early look at upcoming tools and features. - The recorded livestream included live demos from five plugin developers. ## Design Quality and Productivity Tools - **Toybox Roller**, presented by Jono Kolnik, helps identify and correct design errors and inconsistencies against an organization’s design system. - **Tekeste Kidanu’s Spell Check plugin** brings spelling assistance into Figma. - Tekeste also demonstrated integrating **Cleanmock** directly into Figma. ## Icons, Documentation, and Object Management - **Iconify**, presented by Vjacheslav Trushkin, provides access to hundreds of icon sets for use in both design work and production workflows. - Jackie Chui demonstrated several utilities: - Improvements to **Find & Replace**. - A plugin for adding documentation links to components. - **Paste to Fill**, which converts pasted content into image fills. - A forthcoming tool for managing margins and object sizing within frames using configurable presets. ## Typography and Voice Control - Andrew Goodwin showed a plugin for selecting and applying typography rules. - He also demonstrated a voice interface for controlling Figma. - The project aimed to map the entire Figma Plugin API to voice commands, allowing users to operate many Figma features verbally. ## Resources for Plugin Developers Figma directed developers to several resources: - Setup guides explaining plugin architecture, canvas communication, browser APIs, and development workflows. - Official Plugin API documentation. - Figma Plugin DS, a dependency-free HTML, CSS, and JavaScript design system modeled after Figma’s interface. - Open-source plugin examples on GitHub. - FigPlug for TypeScript, React/JSX, asset bundling, and manifest generation. - A community Slack workspace for questions and collaboration. The event demonstrates that Figma plugins can automate repetitive work, connect external data and services, and tailor Figma to specialized team workflows. Developers interested in extending Figma should start with the API documentation and open-source examples, or build a private plugin for internal needs.