Jak powstał React? Historia trzech developerów, którzy wyszli poza schemat

2 września 2021 Joanna Pasterczyk

Kiedy Facebook po raz pierwszy pokazał światu Reacta, mało kto się nim interesował. Teraz to jedna z najpopularniejszych bibliotek JavaScriptu. Jak wyglądała historia powstania Reacta i dlaczego biblioteka zawdzięcza swoją popularność Instagramowi?

React to biblioteka JavaScriptu, która skraca developerom czas poświęcany na tworzenie rozbudowanych aplikacji webowych. Założeniem Reacta było szybkie pisanie interfejsów użytkownika, opartych o komponenty. Biblioteka ta prezentuje też deklaratywne podejście, jednokierunkowy przepływ danych oraz jest wszechstronna.

Spis treści

React. Zaczęło się od Instagrama

Zanim przejdziemy do historii powstania i rozwoju Reacta, zróbmy lekki background. W 2012 roku Facebook kupił Instagrama za miliard dolarów. Wtedy ta aplikacja zrzeszała wokół siebie tylko 30 milionów użytkowników (teraz jest to 800 milionów aktywnych użytkowników każdego miesiąca. Więcej o Instagramie dowiesz się z naszego artykułu), zatrudniała kilkanaście osób, a Facebook już wtedy był liderem w dziedzinie portali internetowych. Plany na przyszłość Facebooka po raz kolejny zaskoczyły pracowników, kiedy Mark Zuckerberg powiedział, że “mobile is next big thing”.

Pete Hunt, czołowy promotor Reacta, w rozmowie ze stackshare.io opowiedział, że wtedy Facebook pracował nad aplikacją Facebook Camera (pozwalała ona na łatwą edycję zdjęć i dzielenie się nimi ze znajomymi – z poziomu aplikacji). Nad nowym produktem pracowało wielu świetnych inżynierów, co dziwiło Hunta, który uważał, że nie ma sensu poświęcać czasu na aplikację, z której będzie korzystać niewielka część użytkowników Facebooka. “Wtedy zrozumiałem dlaczego to Mark Zuckerberg jest CEO Facebooka, a nie ja” – powiedział Hunt. Zuck świetnie przewidział to, co stanie się za kilka lat.

Nie tylko przewidział, ale też powziął pierwsze kroki w kierunku ustabilizowania pozycji lidera. Mimo że Facebook poświęcił sporo pracy i jeszcze więcej pieniędzy na własną aplikację, kupił Instagrama, aplikację która powoli podbijała serca użytkowników. Kilkunastoosobowy zespół Instagrama dołączył do blisko dwóch tysięcy pracowników Facebooka – z czego tylko 600 z nich było developerami. Nowi pracownicy dostali osobne pomieszczenie, by samodzielnie pracować nad rozwojem produktu. Potrzebowali jednak pomocy w rozwoju webowej wersji aplikacji – instagram.com.

ZOBACZ TEŻ: 8 dobrych praktyk pracy w React.js

Teraz wróćmy na chwilę do Pete’a Hunta, który właśnie wziął udział w hackathonie organizowanym przez Facebooka. Podczas rozmowy z uczestnikami powiedział, że jego zdaniem Facebook powinien mieć możliwość publikacji filmów. Pomysł spodobał się, ale Facebook przyjął go z dystansem, choć pozwolił, by pracował nad nim tylko Hunt, 23-letni uzdolniony developer, który wcześniej stworzył na przykład funkcję powiadamiania blogerów o tym, że ktoś skomentował ich artykuł. Zabrał się do pracy, choć “nie miał pojęcia, czy pomysł był dobry, ale na pewno był cool”, jak stwierdził w wywiadzie.

Nową funkcję Facebooka – możliwość publikacji filmów – napisał w Pythonie, ale, jak twierdzi, później przyszła “decyzja z góry”, by codebase był napisany w jednym języku: PHP. Musiał więc wszystko przepisać. Przy okazji, Pete Hunt dowiedział się, jak wyglądała praca w Facebooku nad nowymi funkcjonalnościami. Na przykład, nad usługą dzielenia się zdjęciami, czyli wysyłania ich w wiadomościach, albo publikacją zdjęć bezpośrednio z galerii w smartfonach, pracowało 4-5 developerów. “Największy portal do dzielenia się zdjęciami miał czterech, może pięciu ludzi, którzy pracowali nad tą funkcją, rozumiesz?” – dziwił się Hunt.

“Pamiętajmy, że to były czasy “przedchmurowe”, więc Facebook samodzielnie musiał zarządzać centrami danych” – dodał. Duża część inżynierów pracowała nad feedem Facebooka, czyli nad algorytmem pokazującym posty, które lubimy. Hunt po kilku miesiącach pracy nad możliwością publikacji filmów został poproszony o dołączenie do teamu pracującego nad szybkim uploadem zdjęć. Kilka miesięcy później większość devów rozwijała aplikacje mobilne.

Kilka eksperymentalnych rzeczy, czyli jak powstał React

Wróćmy do Instagrama. Gdy Facebook kupił tę aplikację, Hunt przez długi czas rozmyślał, dlaczego ludzie polubili właśnie Instagrama, a nie Facebook Camera, nad którą Facebook długo pracował i która jego zdaniem była świetna. “Do dzisiaj nie jestem pewny, czy to zrozumiałem” – mówił w rozmowie. Instagram był jednak tylko aplikacją i do zdobycia pełnego zaufania użytkowników potrzebował równie dobrej aplikacji webowej, za pomocą której można by było komentować zdjęcia znajomych, a nie je tylko przeglądać.

Hunt, by wykonać swoje zadanie, potrzebował JavaScriptowego frameworka. “Poszedłem więc do zespołu inżynierów, zwanych User Interface Engineering, i zapytałem, jakiego JavaScriptowego frameworka użyć do poprawienia funkcjonalności Instagrama”. Na co odpowiedzieli: “Mamy kilka eksperymentalnych rzeczy: BoltJS, JS HTML i React”. Hunt wspomina, że developerzy Facebooka pracowali wtedy także nad frameworkiem Javelin, ale nie był nim zainteresowany.

“Przyjrzałem się każdemu z nich, rozmawiałem ze specjalnymi zespołami, które rozwijały te frameworki i zdecydowałem się na Reacta”. Dlaczego zainteresował się właśnie tą biblioteką? “Napisaliśmy prototypowy profil użytkownika Instagrama w Reactcie i wyglądał bardzo dobrze. Powstał szybko, działał naprawdę dobrze i nie miał zbyt wielu bugów” – mówił w rozmowie. React sprawdził się przy prostej rzeczy, jaką jest podgląd profilu użytkownika, dlatego zespół podjął decyzję o wykorzystaniu go do rozwijania dalszych funkcji.

Najpierw dopracował profil Instagrama, później News Feed, czyli algorytm pokazywania nowych zdjęć opublikowanych przez użytkowników aplikacji. Reacta wykorzystał także tworząc w Instagramie możliwość powrotu do poprzedniego okna. Jeśli znaleźliśmy w feedzie ciekawe zdjęcie, weszliśmy w nie, by przyjrzeć mu się bliżej, a potem postanowiliśmy wrócić do poprzedniego okna, to zobaczyliśmy dokładnie to samo miejsce, w którym znaleźliśmy to zdjęcie.

Hunt z zespołem byli bardzo zadowoleni z Reacta, ponieważ spełniał ich oczekiwania. Dzięki niemu dało się szybko i sprawnie zaprogramować dowolną funkcjonalność, która bez problemów działała na komputerach milionów użytkowników. Hunt kolejny raz sprawdził, jak świetnie działa React, gdy podczas pierwszych miesięcy pracy nad instagram.com dostał PSD z nowym widokiem news feeda. I z tym nie miał problemu, tym bardziej że: “React był bardzo innowacyjny, robił rzeczy w zupełnie inny sposób, niż dotychczas to robiono”. Frameworkiem zainteresował się także zespół Facebooka, który chciał w tym czasie przerobić kilka produktów reklamowych.

Pierwsze użycie Reacta w Facebooku

Jeden z inżynierów zapytał wtedy Hunta o opinię dotyczącą Reacta i czy jest z niego zadowolony. Był, co przekonało Facebooka do spróbowania wykorzystania Reacta. W tym miejscu historia zatoczyła koło, bo zespół zajmujący się produktami reklamowymi potrzebował sprawnego frameworka i wybrał ten, którego twórcą był… developer zespołu zajmującego się produktami reklamowymi. Pomysłodawcą Reacta byli Jordan Walke i Tom Occhino, którzy wiedzieli, że klienci spędzają zbyt dużo czasu na tym, żeby opublikować reklamę na Facebooku i chcieli to zmienić. Do tego celu nie chcieli jednak wykorzystywać dostępnych frameworków, które nie podołałyby zadaniu.

React swoje początki miał jednak wcześniej. Facebook w 2010 roku ogłosił powstanie XHP – rozszerzenia PHP. Rok później Jordan Walke stworzył FaxJS, który Facebook wykorzystał do swojego silnika wyszukiwarki. Celem FaxJS było “rozwiązanie tych samych problemów, ale w zupełnie inny sposób” – czytamy we wpisie z okazji zdobycia 50 tysięcy gwiazdek na githubie. Walke i Occhino, pracując nad FaxJS, stworzyli fundamenty Reacta, na przykład props, state czy możliwość rewaluacji dużych pozycji na diffy, server-side rendering, ale też podstawowy koncept komponentów.

Wierzyli, że funkcjonalne API FaxJS oferuje możliwość stworzenia lepszego i bardziej skalowalnego interfejsu użytkownika. Zaimportowali więc bibliotekę do codebase’u Facebooka w marcu 2012 roku, zmienili też nazwę na FBolt, by wszyscy wiedzieli, że to rozszerzenie frameworka BoltJS. Walke i Occhino nadal nie byli jednak zadowoleni z nazwy swojej biblioteki, dlatego zmienili ją na React.

“Zawsze byłem zafascynowany tym, w jaki sposób dany język potrafi rozwiązać nasz problem. Byłem otwarty na nowe języki, które były szybsze niż inne. Stąd wzięła się moja fascynacja językami SML. Prototyp Reacta został oparty na SML” – mówił Jordan Walke, pomysłodawca Reacta. Pracował więc nad Reactem po godzinach, nocach i podczas weekendów, aż w końcu przekonał Facebooka do tego, by wykorzystać go przy rozwijaniu News Feeda, a później do usprawnienia mechanizmu lajkowania i komentowania postów. React sprawdził się, więc jego pomysłodawcy postanowili powiedzieć o nim światu.

Co by było, gdyby nie społeczność?

Jordan Walke i Tom Occhino podczas konferencji JSConf US w maju 2013 roku ogłosili powstanie Reacta i udostępnienie go społeczności programistów – jako projekt open source. Mało kto był nim zainteresowany, pojawiały się krytyczne głosy, które mówiły, że korzystanie z Reacta to krok w tył, a nie w przód.

Społeczność developerów była jednak innego zdania i chętnie dzieliła się swoimi spostrzeżeniami – publikowała repozytoria na GitHubie i udzielała się na forach czy na Quorze, co przyniosło uwagę innych developerów. Drugą przyczyną sukcesu Reacta była multiplatformowość; w 2013 roku udostępniono go na Ruby on Rails, JSFiddle oraz Python Applications. W grudniu 2013 roku David Nolen przedstawił OM, oparty na Reactcie. W publikacjach opowiadał, jak wspaniały jest React, co pomogło przynieść kolejnych użytkowników. W 2013 roku do grona firm pracujących na Reactcie dołączyli: Trello, Slack, Docker, Airbnb, Khan Academy oraz New York Times.

Rok 2014 był przełomem w rozwoju Reacta, gdyż zdobył wiele pozytywnych opinii. Na pewno dobrym ruchem w promocji tego frameworka było rozpoczęcie cyklu konferencji, meetupów o nazwie #reactjsontour. W styczniu 2014 roku React Developer Tool można było znaleźć w rozszerzeniach przeglądarki Chrome. Te wszystkie działania doprowadziły do tego, że coraz więcej osób znało Reacta i próbowało wykorzystać go w swojej pracy. W 2015 roku Netflix ogłosił, że korzysta z Reacta. W tym samym roku powstał też React Native, który pozwalał na łatwiejsze tworzenie aplikacji na system Android i iOS.

Następne lata przyniosły aktualizacje i kolejne konferencje skupione wokół Reacta. Dziś, jak wspomnieliśmy we wstępie, to jedna z najpopularniejszych bibliotek JavaScriptu. A za historią jej sukcesu stoi kilku developerów, którzy postanowili wyjść poza schemat. Stworzyli framework React, który rozwiązywał ich problemy. Chyba nie spodziewali się, że kilka lat później będzie rozwiązywał problemy milionów developerów na całym świecie.

React. Co powinien umieć junior?

Osoba zaczynająca swoją karierę powinna w pełni rozumieć i świadomie używać pętli, znać składnię ESNext, w podstawowym stopniu rozumieć asynchroniczność i pułapki z nią związane, nie mówią już o fundamentach, takich jak zakresy leksykalne, operacje logiczne.

Radosław Madecki, Senior Frontend Developer/architect w Clearcode uważa, że najszybszym sposobem na zrozumienie konceptów Reacta jest przerobienie swoich starych projektów. – Jest z tym związana jedna ważna korzyść – sama logika, struktura aplikacji jest nam już znana, rozumiemy, co się w niej dzieje. Możemy skupić się wyłącznie na przerzucaniu znanych nam funkcjonalności na sprytniejsze rozwiązania. Pomijamy ten irytujący etap, gdzie chcemy uczyć się narzędzia, a spędzamy czas na męczeniu się ze sprawami na ten moment pobocznymi – uważa Madecki.

Niezbędnymi elementami ekosystemu Reacta, która powinien zgłębić junior aspirujący do swojej pierwszej pracy lub zmiany biblioteki/frameworka są:

Komponenty funkcyjne oraz klasowe – spotkamy się z nimi podczas pracy, a te drugie są dość mocno deprecjonowane ostatnimi czasy. Komponenty funkcyjne od ponad roku dają nam możliwość zarządzania stanem, pracowania z efektami, co sprawiło, że przestały być tymi “prostymi/gorszymi”, ale klasowe wcale nie umarły. Dodatkowo nadal spotyka się głosy przemawiające za czytelnością starszego podejścia. To sprawa dyskusyjna, natomiast faktem jest, że jeszcze jakiś czas będziemy spotykać oba podejścia.
Hooks, praca ze stanem, propsami, cyklami życia komponentu – chodzi o wszystko z tym związane – destrukturyzacja, używanie useState, useEffect (który nie jest specjalnie prosty do opanowania przez początkujących), setState.
Renderowanie list, warunkowe – w teorii prosta sprawa, natomiast można ją rozwiązać na kilka sposobów – warto wypróbować różne, porównać ich czytelność, wygodę użytkowania.
React Router – podstawowa biblioteka (nie zawarta w samym React), która pozwala na tworzenie SPA – jednostronicowej aplikacji, a mówiąc prościej, takiej apki, która nie wymaga pełnego przeładowania przy zmianie widoków.

Źródła:

Źródła zdjęć:

Joanna Pasterczyk

Od ponad ośmiu lat pracuje jako redaktorka, dziennikarka i copywriterka, a od niedawna dba o treści oraz rozwój portalu poświęconego branży IT. Autorka wywiadów, tekstów eksperckich, newsów.