Building Polyfills

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.

Using Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at http://bit.ly/kendo-ui and http://bit.ly/slacker-js.

This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Building Polyfills by Brandon Satrom (O’Reilly). Copyright 2014 Brandon Satrom, 978-1-449-37073-2.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/building-polyfills.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

First and foremost, thanks go to my wife Sarah, whose faith in me is equal parts unflagging and humbling. I am ever grateful for her encouragement to take on these kinds of projects, while also keeping me honest and engaged with my family. It is because of her that I don’t have to apologize for countless nights of missed dinners and time lost with our family, because no such sacrifice was required. I hope you’ll agree that the quality of this work did not suffer, as a result.

I’m also grateful to my boys, Benjamin and Jack, whose smiles and playful spirits remind me of what really matters each and every day. Thanks for all of the writing interruptions for hugs and kisses, boys! Also, to Matthew Satrom. Though this book was completed before you were born, you were constantly in my thoughts. I can’t wait to meet you in early 2014!

Thanks also to my fantastic colleagues at Telerik, especially Burke Holland, who reviewed every single line of this book, ran and critiqued all of the code samples, and provided immensely helpful feedback when I was deep in the weeds of polyfilling. Thanks also to Addy Osmani who, in addition to writing the foreword, provided early input on the proposal and table of contents for this book. Any “aha!” moments you have while reading this book are due to the insight of these two gentlemen, while any exclamations to the opposite effect are solely the fault of its author.

I also want to thank Brian Kardell for his helpful insights about the origin of the term “prollyfill” and his work on both HitchJS and as chair of the Extensible Web W3C Community Group. Thanks for all of your hard work extending the Web forward, Brian.

Finally, I want to thank my editors, Simon St. Laurent and Brian Anderson. This project started as a vision in Simon’s head, and I’m grateful to have been given the opportunity to turn that vision into reality. I am grateful to have had Simon’s keen insight, experience, and guidance early on in this project. Brian helped shepherd this project from its very raw stages all the way through to the end, and I am in his debt for keeping things on track, helping me manage my deadlines, and driving this book to completion. Thank you both.