TechPrufer
Get started
Meta
Meta logoMeta · Feature trail

HTML5 Web Platform Adoption

5 posts · Feb 2010 – Jan 2026

What this trail covers

Meta's adoption of HTML5 features has evolved to include a unified mobile web experience (m.facebook.com) that dynamically adapts to thousands of devices using a framework powered by XHP, Javelin, and WURFL. This enables the use of modern CSS3 and HTML5 APIs like local caching and history management for high-end devices, while providing a functional experience for feature phones. The framework allows engineers to build features once and have them render correctly across diverse devices, simplifying development and improving user experience. This includes crowdsourcing mobile device capabilities to augment the WURFL database, enabling more accurate device detection and feature support identification for image inlining, CSS spriting, and Unicode characters.

All Meta trails
  1. CSS at Scale With StyleXThis post introduces StyleX, a new styling system for CSS at scale that combines CSS-in-JS ergonomics with static CSS performance. It enables atomic styling of components, deduplicates definitions to reduce bundle size, and provides a simple API for developers. StyleX is now the standard styling system across Meta's major products.
  2. React at Meta Connect 2024This post details the use of React and React Native to build several Meta products showcased at Meta Connect 2024, including Instagram and Facebook for Meta Quest, the Meta Horizon mobile app, the Meta Horizon Store, and the Meta Spatial Editor. It highlights the benefits of React Native for building mixed reality applications, enabling rich animations, novel interactions, and code sharing with existing web experiences. The post also discusses performance optimizations in the Meta Horizon app, the use of Relay for early network queries, and the adoption of StyleX and React Strict DOM for cross-platform code sharing in the Meta Horizon Store. For the Meta Spatial Editor, it showcases the use of React Native for Desktop with native component integration for a custom 3D rendering engine. The post emphasizes the ongoing evolution of React and React Native infrastructure, including the React Compiler and New React Native Architecture, to enable cross-platform code sharing and improve developer experience.
  3. Facebook open sources rich text editor framework Draft.jsIntroduced Draft.js, a React-based rich text editor framework. Addressed limitations of <textarea> for rich text input by building a controlled ContentEditable component. Leveraged immutable data structures for editor state, cursor position, and undo/redo history, enabling efficient memory usage and functional state transitions. Open-sourced the framework to the community.
  4. Why we chose to move to HTML5 videoThis post details the migration of Facebook's video player from Flash to HTML5. It highlights the benefits of HTML5 for development velocity, testability, and accessibility. It also outlines the challenges encountered, including getting logging right, dealing with browser bugs (specifically Chrome's SPDY implementation), addressing performance regressions in older browsers, and mitigating page load time increases. The post concludes by stating the positive impact on metrics and user experience, such as faster video start times and increased engagement.
  5. Announcing XHP-JS: Building efficient user interface components with Hack, React, and XHPIntroduced XHP-JS, a library that allows client-side logic to be added to XHP components and React components to be created from Hack code. This enables interoperability between Hack's asynchronous operations, React's client-side efficiency, and XHP's server-side UI component abstraction. Demonstrated asynchronous rendering with `asyncRender` and `XHPAsync`, interactive components with `jsCall` and `XHPJSCall`, and integration of React components using `XHPReact`. Provided methods for integrating XHP into existing projects and using Bootstrap components with XHP.
  7. React Native: Bringing modern web techniques to mobileThis post introduces React Native, a framework that allows developers to use React and JavaScript to build native mobile applications for iOS and Android. It addresses the challenges of native mobile development, such as slower iteration cycles and fragmented technology stacks, by leveraging the declarative programming model of React and executing JavaScript off the main thread asynchronously. The goal is to combine the user experience of native mobile platforms with the developer experience of web development using React, enabling a 'learn once, write anywhere' paradigm.
  8. @Scale 2014: Recap of Web TrackThis post summarizes web track sessions from @Scale 2014, highlighting advancements in web development. Key contributions include: Wikipedia's migration to HHVM resulting in a 50% reduction in rendering time and a 2x performance boost; Khan Academy's use of React for interactive learning interfaces and the open-sourcing of KaTeX; YouTube's adoption of WebP for image compression, reducing bandwidth by 20-30%; Twitter's overview of adaptive systems and UI components; Google's presentation on advanced Chrome DevTools for debugging; Facebook's introduction of Flow, a static type checker for JavaScript, and discussion on scaling JavaScript development; and Netflix's insights into asynchronous programming using Iterator and Observer patterns.
  9. Under the Hood: The JavaScript SDK – Truly Asynchronous LoadingIntroduced and implemented the FIF (Friendly iFrames) technique for the Facebook JavaScript SDK to achieve truly asynchronous loading, preventing the SDK from blocking the window.onload event and improving page load performance. This involved creating an iframe, loading the script within its onload event, and providing a mechanism (inDapIF global variable) for the SDK to detect and adapt to this loading method.
  10. Under the Hood: The JavaScript SDK – The use of polyfillsIntroduced a transpilation process for the JavaScript SDK, converting ES5 code to ES3 using 'jspatch' and an 'ES5' proxy function. This approach avoids runtime modifications and global object augmentation, ensuring compatibility with third-party JavaScript environments. Detailed the 'ES5' function's arguments and the method cache mechanism for safely accessing native implementations or fallbacks.
  11. Building the WordPress pluginThis post details the development and launch of the Facebook for WordPress plugin, highlighting its integration with Facebook's Open Graph actions (specifically `news.publish`) and the subsequent simplification of the approval process by shipping it as a global Open Graph action. It also describes technical challenges encountered, such as the dependency on cURL (addressed by using WordPress's abstraction layer), namespace collisions with other PHP SDKs (resolved by ensuring the correct SDK version was included), and the need to update the PHP SDK to support extending short-lived access tokens (implemented via `setExtendedToken`). The post also mentions the open-sourcing of the plugin on GitHub.
  12. Optimizing for the MacBook Pro with Retina displayIntroduced a server-side guessing mechanism for device pixel ratio (DPR) based on previous client behavior and a client-side cookie update mechanism to correct DPR. This allows for serving higher-resolution images on Retina displays while maintaining standard image sizes for non-Retina displays, optimizing bandwidth and visual quality.
  13. One Mobile Site to Serve Thousands of PhonesThis post details the evolution of m.facebook.com from multiple mobile sites (m.facebook.com and touch.facebook.com) to a single, adaptive experience powered by XHP, Javelin, and WURFL. It highlights the technical challenges of supporting thousands of devices with varying capabilities and introduces a new UI framework that allows engineers to build features once and have them render optimally across different devices, leveraging HTML5 APIs and CSS3 for richer experiences on capable devices while maintaining functionality on feature phones. The post also showcases how a button component is rendered differently based on device capabilities.
  14. HTML5 Games 0.1: Speedy SpritesIntroduced JSGameBench, a benchmark suite focused on HTML5 game performance, specifically sprite rendering. The benchmark measures the number of sprites drawn at 30fps against a background with both axis-aligned and rotated sprites. It also outlines next steps for JSGameBench development, including mobile abstractions, networking, prediction and synchronization, and full reference engines. Additionally, it provides feedback to browser developers on areas for improvement, such as mobile auto-rotate control, hardware compositing, accelerated matrix/transform properties, and cross-browser consistency.
  15. Crowdsourcing Mobile Device CapabilitiesThis post details Meta's use of crowdsourcing and programmatic experiments to augment the WURFL database with mobile device capabilities. It describes an estimation problem formulation to derive device capability statistics from noisy input, including iterative sub-device clustering and point estimation algorithms. The evaluation of point estimation algorithm parameters used cross-validation on crowd-sourced data, optimizing for minimized false positive rates while maintaining recall. The contribution also highlights the collaboration with Luca Passani to contribute this new information back into WURFL.
  16. Using HTML5 TodayThis post details the initial adoption of HTML5 features, including an HTML5 video player for iOS/iPad, the Geolocation API for the 'Places' feature on mobile, the History API for AJAX-driven page loads with readable URLs, and experimentation with Web Storage for caching. It also mentions plans to experiment with WebSockets for real-time web apps.
  17. XHP: A New Way to Write PHPIntroduced XHP, a PHP extension that augments PHP syntax to understand XML document fragments natively. This enables automatic escaping of PCDATA, server-side detection of markup errors, and the ability to store XHP nodes as objects for functional decomposition. XHP also allows for the definition of custom elements to simplify complex components.