Building Polyfills: Web Platform APIs for the Present and Future (2014)

Preface

If you play a game of word association with a room full of frontend developers, polyfill will no doubt receive mention from more than a few participants. This word—traditionally a synonym for fallback, spackle, or patch—was unfamiliar to many developers until just a few years ago, but has become a staple of conversations about modern and open web technologies. And while polyfilling has traditionally operated as a practice for delivering modern features to nonmodern browsers (oldIE, meaning IE6–8, is increasingly a synonym for older browsers), the concept has expanded over the last few years to include the addition of new and experimental platform features to all browsers, including the newest and most cutting-edge.

Before our eyes, the practice of polyfilling is evolving from an adoption technique to a full-blown design pattern that allows developers to “spackle” their browsers with whatever semantics they wish. AngularJS, a very popular and fast-growing app framework, encourages this practice by enabling developers to use directives to add custom HTML tags and components to their applications.

Design by polyfill extends beyond frameworks as well. One such example is the Web Components effort, a set of specifications in the W3C designed to make the creation of custom semantics and encapsulated components a feature in the browser itself. With Web Components, if you want a<calendar> component, you need only create one yourself, or grab one from a third party. It’s a powerful idea, and if the concept takes off, it will unlock a new set of capabilities for web developers while adding new depth and richness to the applications we create.

Who This Book Is For

When it comes to the art of patching browser capabilities via polyfills, developers fall into two camps: those using polyfills to provide modern web platform capabilities in their sites, and those building polyfills for the broader web community. The book is primarily focused on the latter camp, and is intended to serve as an introduction to polyfilling, to provide a set of principles and practical guidelines for building reliable polyfills, and finally, to provide a road map for the future of polyfilling itself. However, even if you’re a JavaScript developer not especially interested in building polyfills, there’s a lot of useful content in this book in the realm of test-driven development (TDD), JavaScript build workflows, and performance optimizations.

At present, countless articles and book chapters exist that cover the subject of polyfilling. However, in nearly every case, these articles are targeted at polyfill consumers, not the intrepid developers who build these libraries. One notable exception is Addy Osmani’s guide for polyfill developers, an introductory read that I highly recommend. Beyond Addy’s article, there are few resources, online or in print, that cover the topic of polyfills from the viewpoint of the developer. A lack of definitive resources for building these libraries means that we must strike out on our own, or slowly dig through other libraries for patterns and ideas.

My sincere hope is that this book will close the gap by serving as a field guide for polyfill developers. We’ll start with a cursory introduction to polyfilling on the web platform, and I’ll share some principles and guidelines for building polyfills that developers can rely on. Once the guidelines have been established, we’ll shift the discussion to an in-depth walk-through of building a real-life, reasonably complex polyfills.

Once I’ve covered the ins and outs of building polyfills, the last two chapters will shift to focus on that emerging trend on the web platform: the forward polyfill, or prollyfill. This pattern, as I’ve mentioned already, enables developers to test and work with emerging concepts, sometimes ahead of the browser vendors themselves. By the time we’re done, you’ll have all the tools you need to build reliable polyfills for the present, and the future, of the Web.

How This Book Is Organized

This book is organized into two parts. In the first part, we discuss the ins and outs of polyfill development, starting with the current landscape of polyfilling in Chapter 1. In Chapter 2, I’ll introduce some principles and practices for the polyfill developer, guidance that I hope you’ll find useful regardless of the type of polyfill you plan to build. Then, in Chapters 3 through 5, we’ll dig deep into polyfill development with a real-life library. In Chapter 3, I’ll introduce our sample project, an HTML5 Forms polyfill, and we’ll build out several features for this library. In Chapter 4, we’ll talk about testing and build workflows, and I’ll introduce you to some tools that can make your life easier as a polyfill developer. Finally, we’ll wrap up Part I with a discussion on polyfill performance in Chapter 5, where I’ll walk through a couple of cases in which we can improve the speed of our polyfill.

In Part II of this book, we’ll turn our focus to the future of polyfilling, the prollyfill. In Chapter 6, I’ll introduce the concept of prollyfilling and walk through examples of this important variation on the polyfill. Finally, in Chapter 7, we’ll close out the book with another walk-through and build a prollyfill for a cutting-edge web platform specification. Once we’re done, you should be well equipped to jump into the present, and future, of polyfilling.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

TIP

This element signifies a tip or suggestion.

NOTE

This element signifies a general note.

WARNING

This element indicates a warning or caution.