Nasz świat jest dość stary. Wiek Ziemii szacuje się na około 4,5 miliarda lat. Pomimo to następujące po sobie wydarzenia dość mocno się zazębiają, tworząc piękną i długą, a przede wszystkim spójną historię. Jest wielce prawdopodobne, że nie wszystkie współczesne organizmy poradziłyby sobie w atmosferze ziemskiej sprzed miliardów lat. Możesz pomyśleć, że wyczarowałem nawiązanie z kapelusza - co to ma wspólnego z dzisiejszym tematem?

Tak jak człowiek nie dałby rady żyć na Ziemii 3,5 mld lat temu, tak napisany dziś program nie zadziałałby na przeglądarce z lat 90. Niby to samo środowisko, a jednak pewne jego aspekty uległy totalnym zmianom. Z czego to wynika? Przede wszystkim z rozwoju. Ekosystem i atmosfera naszej planety się zmienia. Tak samo zmieniają się języki programowania i ich specyficzne implementacje w przeglądarkach. Ba, same przeglądarki z tego samego okresu mogły mieć różne podejścia do tych samych tematów.

Co to jest polyfill?

Wejdźmy w ten temat głębiej. Przeglądarki wydawane na przestrzeni lat dość luźno opierały implementowane standardy języków o najnowsze wytyczne. Problem nie dotyczył tylko Javascriptu - chociaż jego najczęściej. Przykładowo w IE7 nie było dostępnej właściwości css `text-shadow`. Podobny efekt można było jednak osiągnąć wykorzystując odpowiednie filtry dostępne w IE.

Zabieg, który został tutaj wykorzystany to tak zwany Polyfilling, czyli użycie kodu, pozwalającego na wykorzystanie danej funkcjonalności, nawet gdy nie została ona zaimplementowana.

Spotkać się z taką sytuacją możemy w dwóch przypadkach: w starych przeglądarkach, które nie są już rozwijane, a także w nowych, gdy producenci nie są w stanie nadążyć z wprowadzaniem nowości ze standardów języków (lub świadomie tego nie robią). O ile pierwszy przypadek jest ważny z perspektywy biznesowej, to drugi poprawia tzw. developer experience - dając więcej możliwości pisania - w nowszy sposób i z wykorzystaniem nowych możliwości technicznych.

Polyfill (w polskiej literaturze możemy się spotkać ze słowem uzupełniacz) to kod, który ma za zadanie zaimplementować nową funkcję, która nie istnieje lub nie jest obsługiwana. Taki kod zapewnić powinien kompatybilność wsteczną dla starych przeglądarek. Co ciekawe w języku angielskim nie istnieje takie słowo - jest to neologizm, który został użyty pierwszy raz w 2009 roku w książce Remy’ego Sharpa „Wprowadzenie do HTML5”.

Shim i Shiv

Warto wspomnieć, że w 2009 istniał już termin shim, który mógł z powodzeniem zastąpić nowy termin ukuty przez Sharpa. Sharp stwierdził jednak, że potrzebuje narzędzia, które będzie działało bardziej automatycznie. Shim to kawałek kodu, którego zadaniem jest naprawienie niedziałającej funkcjonalności - poniekąd osiąga to, ale wymaga określonego nakładu pracy. Rezultat nie jest automatyczny, a tego oczekiwał Sharpe.

Aby zrozumieć czym jest shim należy się cofnąć troszkę w czasie do momentu, kiedy tworzyliśmy layouty oparte o tabelki. Aby zachować pustą komórkę, która reprezentuje odpowiednią przerwę, należało ją czymś wypełnić - białe znaki nie wchodziły w grę, w związku z czym dodawało się przezroczyste gify o wymiarach 1 piksel na 1 piksel. Takie pliki często nazywały się właśnie shim.gif - zapewniało to oczywiście wsparcie wsteczne, ale nie działo się automatycznie - wymagało ręcznego dodania takiego pliku. Swoją drogą na podobnym mechanizmie opiera się narzędzie do zbierania danych: Facebook Pixel.

Shiv działa w oparciu o podobne założenia, natomiast jest to najczęściej plik javascriptowy, który ma zadanie nadpisać istniejący interfejs. Najbardziej znanym kodem Shiv jest HTML5shiv, który swojego czasu nadpisywał interfejs html w przeglądarkach Internet Explorer, tak aby można było korzystać z nowej składni w starszych przeglądarkach.

Jak zbudowany jest Polyfill?

Dobry polyfill powinien działać tylko wtedy, gdy nie istnieje dana funkcjonalność w przeglądarce. Na pewno nie powinien zostać wczytany, gdy przeglądarka obsługuje to, co dodaje polyfill. Zatem pierwsze co powinien zrobić to zacząć od warunku. Sprawdzenie bezpośrednio czy dana funkcjonalność (w szczególności istniejąca w globalnej przestrzeni) istnieje jest dość ryzykowne, ponieważ może zwrócić błąd - jeśli jej nie ma. Spróbujmy stworzyć polyfill’a dla funkcji confirm.

Tak postawiony warunek zwróci błąd na starszych przeglądarkach. Przydaje się do ogarnięcia tego problemu operator typeof.

To samo możemy osiągnąć odwołując się do obiektu z poziomu obiektu globalnego. Przykładowo:

Warto zwrócić uwagę, że obiekt window nie zawsze będzie dostępny, na przykład na środowiskach innych niż przeglądarki. Z tego powodu zaleca się unikanie takiego bezpośredniego odwołania.

Inaczej sprawa ma się z funkcjami, które przypisane są do specyficznego prototypu. Spójrzmy na najpopularniejszą funkcję w prototypie tablicowym: map.

Kod, który znajdzie się wewnątrz takiego polyfill’a nie powinien tworzyć żadnych efektów ubocznych, ponieważ dodanie takiego kodu do aplikacji niesie spore i przykre konsekwencje. Co więcej, funkcja, która ma zostać uzupełniona powinna dokładnie odzwierciedlać działanie pierwowzoru, przyjmować dokładnie takie same argumenty. W przeciwnym wypadku może prowadzić to do wielu nieprzyjemnych i trudnych do wychwycenia błędów.

Adresy?

Polyfill od 2009 roku zagościły na naszym środowisku na dobre. Nie musimy ich tworzyć za każdym razem od początku. Jest bardzo dużo bibliotek, które od lat tworzą polyfille wszystkiego. Pierwszym przykładowym zbiorem polyfilli było JQuery, które pośrednio dodawało obsługę wielu funkcjonalności, tak aby strony mogły działać wszędzie tak samo.

Dzisiaj zestawy polyfilli znajdziemy chociażby w Babelu. Ciekawym projektem jest polyfill.io, który pozwala nam stworzyć plik tylko z tymi polyfillami, których potrzebujemy w swoim projekcie.

Podsumowanie

Ziemia zmienia się dużo wolniej niż świat programowania. Czas adaptacji życia jest wydłużony w stosunku do dość dynamicznie zmieniającego się świata programowania. Koncepcje polyfilli, podobnie jak wcześniejsze shim i shiv, mają zapewnić kompatybilność wsteczną, tak aby nawet stare środowiska były w stanie zapewnić namiastkę nowoczesności i pozwoliły otworzyć to, co bez nich zrzuciło by biały ekran i czerwoną notatkę w narzędziach developerskich.