Posts tagged with frontend

Engineering at MetaNov 11, 2025

StyleX: A Styling Library for CSS at Scale

Why it matters: StyleX offers a robust solution for managing CSS at scale, providing performance benefits of static CSS with the developer experience of CSS-in-JS. It ensures maintainability, reduces bundle sizes, and prevents styling conflicts in large, complex applications.

StyleX is Meta's open-sourced styling system, combining CSS-in-JS ergonomics with static CSS performance for large-scale applications.
It functions as a build-time compiler, extracting styles to generate collision-free, atomic CSS, significantly reducing CSS bundle size.
StyleX addresses historical CSS challenges at Meta, such as specificity wars and large bundles, by enforcing constraints for predictable and scalable styling.
The system enables expressive, type-safe style authoring in JavaScript, supporting composition and conditional logic while compiling to static output.
Its core is a Babel plugin that processes style objects, normalizes values, and outputs optimized, atomic CSS classes for efficient rendering.

#frontend #dist

Read original

GitHub EngineeringNov 6, 2025

TypeScript’s rise in the AI era: Insights from Lead Architect, Anders Hejlsberg

Why it matters: TypeScript's journey from a pragmatic fix to GitHub's most-used language underscores its value in building scalable, maintainable systems. Its type safety and tooling are now essential for modern frontend development and increasingly vital for reliable AI-assisted coding.

TypeScript, created by Anders Hejlsberg, addressed JavaScript's scalability challenges for large codebases by adding static typing and tooling.
It became GitHub's most-used language in 2025, demonstrating significant adoption and a 66% increase in contributors.
Its 'superpowers' of type safety, improved IDE support, and refactorability made it the default for major frontend frameworks.
The compiler was rewritten in Go, achieving a 10X performance boost while preserving functional compatibility.
TypeScript's open-source evolution on GitHub provides a transparent history of its development.
Its typed nature is crucial for the AI era, making AI-assisted coding more reliable and maintainable.

#frontend #mlp #culture

Read original

Airbnb EngineeringOct 30, 2025

GraphQL Data Mocking at Scale with LLMs and @generateMock

Why it matters: This innovation significantly streamlines frontend and mobile development by automating the creation of realistic, type-safe mock data. It frees engineers from tedious manual work, accelerates feature delivery, and improves the reliability of tests and demos.

Airbnb introduces @generateMock, a new GraphQL client directive, to automate the creation and maintenance of realistic, type-safe mock data.
The solution combines GraphQL schema validation, rich product context, and Large Language Models (LLMs) to generate convincing mock data.
Engineers can use @generateMock on any GraphQL operation, fragment, or field, providing optional hints and design URLs to guide the LLM's data generation.
Integrated with Airbnb's Niobe CLI tool, it generates JSON mock files and helper functions (TypeScript/Kotlin/Swift) for seamless consumption in tests and demo apps.
This approach eliminates the tedious manual process of writing and updating mocks, enabling faster parallel client/server development and ensuring data consistency.

#frontend #mobile #mlp

Read original

Slack EngineeringApr 14, 2025

Optimizing Our E2E Pipeline

Why it matters: This article demonstrates a practical approach to significantly improve CI/CD pipeline efficiency and developer experience. By intelligently caching and reusing build artifacts, engineering teams can drastically reduce build times and infrastructure costs.

Slack's DevXP team optimized their E2E testing pipeline by addressing redundant frontend builds in a large monorepo.
Previously, frontend code was built for every pull request, consuming 5 minutes per run even without relevant changes, leading to significant time and resource waste.
The solution implemented conditional builds, using `git diff` to detect actual frontend changes before initiating a new build.
If no frontend changes were detected, the pipeline reused existing production frontend assets stored in AWS S3 and served via an internal CDN.
This optimization resulted in a 60% reduction in build frequency and a 50% decrease in overall build time, saving thousands of engineering hours and terabytes of storage.

#sre #finops #frontend

Read original

Slack EngineeringJan 7, 2025

Automated Accessibility Testing at Slack

Why it matters: This article highlights the practical challenges and solutions in integrating automated accessibility testing into existing frontend development workflows. It provides valuable insights for engineers looking to enhance their testing strategies without disrupting core framework functionalities.

Slack integrates automated accessibility testing into its development process to supplement manual testing and ensure compliance with Web Content Accessibility Guidelines (WCAG).
Automated testing is viewed as a valuable addition to a comprehensive strategy, not a replacement for human judgment, as it has limitations in catching nuanced accessibility issues.
Initial attempts to embed Axe accessibility checks directly into the React Testing Library (RTL) framework with Jest were abandoned due to complexities with Slack's custom Jest setup.
The team pivoted to using Playwright, Slack's end-to-end (E2E) test framework, integrating Axe via the @axe-core/playwright package.
Directly embedding Axe checks into Playwright's Locator object methods proved challenging because Locator ensures individual element readiness, not full page rendering, which is crucial for accurate accessibility audits.
Workarounds involved leveraging Playwright's flexibility and Axe Core's customization features, such as filtering rules and specific accessibility tags, for selective application of checks.

#frontend #culture

Read original

Instagram EngineeringNov 1, 2019

Making instagram.com faster: Code size and execution optimizations (Part 4)

Why it matters: Optimizing JavaScript execution and parsing is critical for web performance on low-end devices. By focusing on pre-compression size and deferring execution, engineers can significantly reduce Time to Interactive even when network speeds are not the primary bottleneck.

Prioritized reducing pre-compression JavaScript size over post-compression size, as parsing and execution on the CPU are often the primary bottlenecks on mobile devices.
Implemented inline requires using the Metro bundler to defer module execution until first use, resulting in a 12% improvement in Time to Interactive (TTI).
Transitioned to serving ES2017 bundles to modern browsers, reducing the overhead of transpiled code and polyfills for features like async/await.
Established Critical Bytes Per Route as a key metric to monitor and limit the amount of eagerly executed JavaScript on the critical path.
Utilized dynamic imports to move non-visible or interaction-dependent UI components out of initial page bundles to improve initial load performance.

#frontend #mobile

Read original

Instagram EngineeringOct 11, 2019

Making instagram.com faster: Part 3 — cache first

Why it matters: Cache-first rendering provides immediate UI feedback but creates complex state sync challenges. This approach shows how to use Git-like rebase patterns in Redux to ensure user interactions aren't lost when merging stale cached data with fresh server responses.

Implemented cache-first rendering by storing a subset of the Redux store in IndexedDB to allow immediate page hydration.
Addressed race conditions where user interactions on cached data, such as likes or comments, could be overwritten by incoming server responses.
Developed a staging mechanism that treats cached state as a local branch and server data as master, performing a rebase-like operation for state updates.
Created a staging API using stagingAction and stagingCommit to queue dispatched actions while network requests are pending.
Used a Redux reducer enhancer to apply queued actions to the fresh server state before committing it to the main store.
Achieved significant performance gains, including a 2.5% improvement in feed display time and an 11% improvement in stories tray display time.

#frontend #data

Read original

Instagram EngineeringOct 8, 2019

Implementing Dark Mode in iOS 13

Why it matters: This article provides a blueprint for large-scale feature adoption across legacy codebases. It demonstrates how to leverage native platform APIs while maintaining backward compatibility through clever wrapping and conditional compilation, ensuring a seamless transition for users and developers.

Adopted a 'stand on the shoulders of giants' philosophy by sticking closely to Apple's UIKit APIs for ease of use and maintainability.
Developed thin, backwards-compatible wrappers around iOS 13 APIs to support developers still using Xcode 10 and devices on iOS 12.
Utilized dynamic colors and images that automatically adapt to light/dark modes, elevation levels, and accessibility settings.
Implemented a semantic color palette to reduce complexity for product teams and ensure consistent UI across the application.
Created a custom IGTraitCollection struct to bridge the gap between different iOS versions and handle interface style changes safely.
Addressed technical hurdles like color equality issues by ensuring dynamic color instances remained comparable within the system.

#mobile #frontend

Read original

Page 3 of 3

Prev 1 2 3Next