Building Polyfills

Book description

Add custom features to browsers old and new by writing polyfill libraries, JavaScript plugins that take browsers beyond their native capabilities. In this practical fieldbook, author Brandon Satrom introduces principles and guidelines for polyfill development, and then walks you through the steps for building a complex, real-world HTML5 polyfill.

You’ll also explore the future of polyfilling—or prollyfilling—that will enable you to test and work with emerging concepts, often ahead of browser vendors. By the time you finish this book, you’ll have the tools and hands-on experience you need to build reliable polyfills for today’s and tomorrow’s Web.

  • Learn the current state of polyfills, including shims, opt-ins, and drop-ins
  • Use principles and practices to build responsible polyfills that benefit the entire web development community
  • Build out several features for an HTML5 Forms polyfill library
  • Configure a build environment and run automated cross-browser testing
  • Optimize performance, handle edge cases, and fine-tune the speed of your polyfill
  • Get examples of prollyfilling libraries that push the boundaries of the Web
  • Write a sample prollyfill and compare it to current polyfill builds

Publisher resources

View/Submit Errata

Table of contents

  1. Building Polyfills
  2. Preface
    1. Who This Book Is For
    2. How This Book Is Organized
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  3. Foreword
  4. I. Building Polyfills
    1. 1. The Current State of Web Polyfills
      1. Polyfilling: Past, Present, and Future
      2. What Is a Polyfill (and What Is It Not)?
      3. Types of Polyfills
        1. The Shim
        2. The Opt-In Polyfill
        3. The Drop-In Polyfill
        4. The Forward Polyfill
      4. Why Polyfills Still Matter
    2. 2. Principles and Practices of Polyfill Development
      1. Building Responsible Polyfills
        1. The Polyfill Vision Statement
      2. Principles of Responsible Polyfill Development
        1. Read the Spec
        2. Respect the API, If Possible
        3. Mind (Only) the Gaps
        4. Think Like A Browser Developer
        5. Build With Performance in Mind
        6. Plan for Obsolescence
    3. 3. Building Your First Polyfill, Part 1: Getting Started
      1. The HTML5 Forms Polyfill
        1. Why Use a Library?
      2. Setting Up Your Polyfill Project
        1. Choosing a Source Control Solution
        2. Setting Up the Initial Project Structure
      3. Specifying the API
        1. Initializing an Opt-In Polyfill
      4. Deciding What to Build
      5. Adding Basic Features
        1. Creating a Sample Form
        2. Color Support
        3. To Feature Detect or Not to Feature Detect
        4. Adding Opt-In Overrides to Your Polyfill
      6. Beefing Up Your Polyfill with Additional Features
        1. Adding Support for the Number Type
        2. Refactoring Type Support
        3. Adding Input Types 3-n
      7. Building Utility Polyfills
      8. Polyfilling Visual Features With CSS
      9. Testing Your Work Across Browsers
        1. Installing the Evergreen Browsers
        2. Testing in OldIE
        3. Cross-Browser Testing and Verification with Online Services
    4. 4. Building Your First Polyfill, Part 2: Build Workflows and Cross-Browser Testing
      1. Setting Up Your Project Workflow
        1. Package and Dependency Management
        2. Build and Workflow Management
        3. Automated and Cross-Browser Testing
        4. Continuous Integration
      2. Jump-Starting Your Workflow
        1. Configuring npm
        2. Configuring Grunt
      3. Adding Unit Tests to Your Polyfill
        1. Configuring Unit Tests with Jasmine
        2. Red to Green: Making the First Tests Pass
        3. Running Jasmine Tests via Grunt
        4. Configuring Jasmine for the Browser and the Console
      4. Automating Cross-Browser Polyfill Testing
      5. Configuring Cross-Browser Tests with Karma
        1. Making Karma, Jasmine, and the Browser Play Nice
        2. Automating Polyfill Development with Grunt Tasks
        3. Performing Remote Testing with Travis CI
      6. The Bottom Line: Use What Works for You!
    5. 5. Building Your First Polyfill, Part 3: Performance and Edge-Case Testing
      1. Building for Performance
        1. 1. Set Up Performance Benchmarks
        2. 2. Don’t Execute Code Too Early or Too Often
          1. The first perf tweak: caching feature tests
          2. Using JSPerf
        3. 3. Iterate Until You’re Happy, Then Iterate Some More
          1. The second perf tweak: caching DOM elements
          2. The third perf tweak: ordering of arguments
          3. The fourth perf tweak: minimizing loops
        4. Running Performance Benchmarks
        5. Tune It But Don’t Overdo It
      2. Dealing with Browser-Specific Edge Cases
      3. Mobile-Specific Considerations
        1. File Size Matters
        2. Always Test on Devices
  5. II. Prollyfilling and the Future of the Web Platform
    1. 6. The Future of Polyfilling
      1. Polyfilling: Not Just For Older Browsers
      2. Prollyfilling: Extending the Web Forward
      3. Prollyfills In Action: Prollyfilling CSS
        1. Using HitchJS to Experiment with CSS
        2. Building Your Own Hitches
      4. Prollyfills in Action: ServiceWorker
      5. Prollyfills in Action: Web Components
        1. Templates
        2. Shadow DOM
        3. Custom Elements
        4. HTML Imports
        5. Creating Custom Elements with AngularJS
        6. Creating Custom Elements with Polymer
      6. Strategies for Polyfilling Experimental APIs
        1. Expect the API to Change
        2. Don’t Be Afraid to Try Something New
    2. 7. Building Your First Prollyfill
      1. Prollyfills vs. Polyfills: What’s the Difference?
      2. The Resource Priorities Prollyfill
      3. Specifying the API and Deciding What to Build
      4. Setting Up Your Prollyfill Project
      5. Adding Prollyfill Features
        1. The First Test: Feature Detection
        2. The Second Test: Initial lazyload Functionality
        3. The First Refactor: Cleaning Up the Tests
        4. The Third Test: Modifying the Public API
        5. The Fourth Test: Supporting Additional Element Types
        6. The Second Refactor: Completing Element Type Support
        7. The Fifth Test: Completing Initial Support
        8. The Final Test: Supporting the lazyloaded Event
      6. What’s Next?
        1. Suggesting an API Modification
        2. Building for Performance
  6. About the Author
  7. Colophon
  8. Copyright

Product information

  • Title: Building Polyfills
  • Author(s): Brandon Satrom
  • Release date: February 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449370695

You might also like


ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

by Ilya Grigorik, 和田 祐一郎/株式会社プログラミングシステム社



SVGエッセンシャルズ 第2版

by J. David Eisenberg, Amelia Bellamy-Royds, 原 隆文



Essential JavaScript™ for Web Professionals, Second Edition

by Dan Barrett

Build better Web sites with JavaScript—right now! Fully updated for the latest JavaScript standards and browser …


Accelerated DOM Scripting with Ajax, APIs, and Libraries

by Jonathan Snook, Aaron Gustafson, Stuart Langridge, Dan Webb

If you're a web developer with previous JavaScript and DOM scripting experience, Accelerated DOM Scripting with …