Building Polyfills · Web Platform APIs for the Present and Future by Satrom, Brandon -- Read -- Imperial Library of Trantor

Index

Building Polyfills Preface

Who This Book Is For How This Book Is Organized Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

Foreword I. Building Polyfills

1. The Current State of Web Polyfills

Polyfilling: Past, Present, and Future What Is a Polyfill (and What Is It Not)? Types of Polyfills

The Shim The Opt-In Polyfill The Drop-In Polyfill The Forward Polyfill

Why Polyfills Still Matter

2. Principles and Practices of Polyfill Development

Building Responsible Polyfills

The Polyfill Vision Statement

Principles of Responsible Polyfill Development

Read the Spec Respect the API, If Possible Mind (Only) the Gaps Think Like A Browser Developer Build With Performance in Mind Plan for Obsolescence

3. Building Your First Polyfill, Part 1: Getting Started

The HTML5 Forms Polyfill

Why Use a Library?

Setting Up Your Polyfill Project

Choosing a Source Control Solution Setting Up the Initial Project Structure

Specifying the API

Initializing an Opt-In Polyfill

Deciding What to Build Adding Basic Features

Creating a Sample Form Color Support To Feature Detect or Not to Feature Detect Adding Opt-In Overrides to Your Polyfill

Beefing Up Your Polyfill with Additional Features

Adding Support for the Number Type Refactoring Type Support Adding Input Types 3-n

Building Utility Polyfills Polyfilling Visual Features With CSS Testing Your Work Across Browsers

Installing the Evergreen Browsers Testing in OldIE Cross-Browser Testing and Verification with Online Services

4. Building Your First Polyfill, Part 2: Build Workflows and Cross-Browser Testing

Setting Up Your Project Workflow

Package and Dependency Management Build and Workflow Management Automated and Cross-Browser Testing Continuous Integration

Jump-Starting Your Workflow

Configuring npm Configuring Grunt

Adding Unit Tests to Your Polyfill

Configuring Unit Tests with Jasmine Red to Green: Making the First Tests Pass Running Jasmine Tests via Grunt Configuring Jasmine for the Browser and the Console

Automating Cross-Browser Polyfill Testing Configuring Cross-Browser Tests with Karma

Making Karma, Jasmine, and the Browser Play Nice Automating Polyfill Development with Grunt Tasks Performing Remote Testing with Travis CI

The Bottom Line: Use What Works for You!

5. Building Your First Polyfill, Part 3: Performance and Edge-Case Testing

Building for Performance

1. Set Up Performance Benchmarks 2. Don’t Execute Code Too Early or Too Often

The first perf tweak: caching feature tests Using JSPerf

3. Iterate Until You’re Happy, Then Iterate Some More

The second perf tweak: caching DOM elements The third perf tweak: ordering of arguments The fourth perf tweak: minimizing loops

Running Performance Benchmarks Tune It But Don’t Overdo It

Dealing with Browser-Specific Edge Cases Mobile-Specific Considerations

File Size Matters Always Test on Devices

II. Prollyfilling and the Future of the Web Platform

6. The Future of Polyfilling

Polyfilling: Not Just For Older Browsers Prollyfilling: Extending the Web Forward Prollyfills In Action: Prollyfilling CSS

Using HitchJS to Experiment with CSS Building Your Own Hitches

Prollyfills in Action: ServiceWorker Prollyfills in Action: Web Components

Templates Shadow DOM Custom Elements HTML Imports Creating Custom Elements with AngularJS Creating Custom Elements with Polymer

Strategies for Polyfilling Experimental APIs

Expect the API to Change Don’t Be Afraid to Try Something New

7. Building Your First Prollyfill

Prollyfills vs. Polyfills: What’s the Difference? The Resource Priorities Prollyfill Specifying the API and Deciding What to Build Setting Up Your Prollyfill Project Adding Prollyfill Features

The First Test: Feature Detection The Second Test: Initial lazyload Functionality The First Refactor: Cleaning Up the Tests The Third Test: Modifying the Public API The Fourth Test: Supporting Additional Element Types The Second Refactor: Completing Element Type Support The Fifth Test: Completing Initial Support The Final Test: Supporting the lazyloaded Event

What’s Next?

Suggesting an API Modification Building for Performance

About the Author Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →