MerixGames

5 listopada 2015

/ case studies

Back To The Frontend, czyli podróż do przyszłości oczami Frontendowca

Marcin Wasilewski

21 października 2015 to znacząca data dla wielu fanów "Powrotu do przyszłości" na całym świecie. Tego dnia bowiem główny bohater filmu, Marty McFly, przenosi się do naszych czasów. Postanowiliśmy wykorzystać ten fakt i w tym dniu uruchomić stronę internetową Back to the Frontend. Jak wyglądał proces tworzenia witryny Back to the Frontend od kuchni?

Back to the Frontend – początki

Godzina 12:28, w pokoju na drugim piętrze naszego biura właśnie rozbrzmiał telefon.

- Marcin? Chyba nie śpisz?! – odezwał się głos w słuchawce.

- Nie-e, skądże! – odpowiadam przecierając oczy i jednocześnie starając się bezgłośnie ziewnąć.

- To bardzo ważne, przyjdź do salki konferencyjnej.

- Dobrze, już idę.

Był to Marcin, nasz COO i mój imiennik. Wziąłem pod rękę kartkę i długopis po czym udałem się piętro niżej. Z deskorolki zrezygnowałem… zjazdu ze schodów mógłbym nie przeżyć…

Ale cofnijmy się w czasie o kilka tygodni…

Pewnego pięknego dnia przypadkiem ujrzałem jak nasz grafik projektował logo bardzo przypominające te z „Powrotu do przyszłości”. Od razu go wypytałem co to jest i o co chodzi. Gdy powiedział mi, że w jednym z firmowych projektów będziemy wykorzystywać motyw filmu, który niezmiennie od najmłodszych lat zajmuje czołowe miejsce w moim rankingu, wiedziałem, że muszę go dostać.

Po kilku dniach niepewności, COO zaprosił mnie do siebie i przyznał, że również bardzo lubi ten film, dodając że „fanowi nie odmówi”. Wtedy już wiedziałem, że kolejne tygodnie będą bardzo ciekawe. Tak zaczęła się moja podróż z „Back To The Frontend.

Wewnętrzne projekty mają to do siebie, że niemalże nie mają ograniczeń, które pojawiają się przy projektach komercyjnych. No prawie, ponieważ w tym wypadku mieliśmy nieprzekraczalny deadline -  21 października 2015, czyli datę kiedy to główny bohater filmu (w drugiej części) przenosi się w czasie do przyszłości. Poza tym małym obostrzeniem mieliśmy wolną rękę co do formy przedstawienia strony, a także użytych technologii.

Motyw wybraliśmy, deadline (jakżeby inaczej!) ustaliliśmy. Problemem był jednak brak szczegółowego pomysłu.

Przekraczamy 88 mph, ale nie deadline

Kiedy dotarłem do sali konferencyjnej, czekał tam na mnie już niemały zespół: dwaj graficy, project manager i wyżej wspomniany COO. Zaczęła się burza mózgów. 

Szukając złotego środka i wizji, która wszystkich by usatysfakcjonowała, rozważyliśmy kilka pomysłów. Na naszą niekorzyść działał czas, gdyż musieliśmy być pewni, że zdążymy przed (i to bez wymówek) nieprzekraczalnym deadline’m. Najpierw pojawiły się pomysły stworzenia strony typu one-page ze scrollowalnymi sekcjami, dyskutowaliśmy też nad motywem widoku zza kierownicy DeLorean’a… 

szkice koncepcyjne

Niejednemu wydawać się może, że praca programisty w firmie informatycznej to jedynie sztywne podporządkowywanie się  poleceniom klientów, a czasem PM’ów. Co jakiś czas mamy jednak szansę na wyjście z cienia, tak jak miałem okazję w tym przypadku. Zasugerowałem widok izometryczny z boku na Hill Valley (czyli miasto przedstawione w filmie) z delikatnym efektem parallax. Po rozważeniu za i przeciw pomysł się przyjął, a dodatkowo wzbogaciliśmy go o elementy takie jak scrollowalne sekcje, umożliwiające przeczytanie treści wszystkich działów bez ciągłego powrotu do głównej oraz panel imitujący deskę rozdzielczą, na której umieściliśmy nawigację.

szkice koncepcyjne

Oczywiście nie mogliśmy zapomnieć o sławetnych 88 milach na godzinę! Prędkość miała zwiększać się wraz z oglądanymi sekcjami, po czym nastąpić miał przeskok do formularza kontaktowego. Wszystko brzmiało obiecująco! Ja zacząłem myśleć o logice aplikacji, a graficy wzięli się za urzeczywistnianie naszych koncepcji. Oczywiście całość utrzymaliśmy w klimacie drugiej części ”Powrotu do przyszłości”, ukazując, że przyszłość w frontendzie już nastąpiła.

Spine jak latająca deskorolka

Przy pracy nad "Back to the Frontend" mogłem wykorzystać doświadczenie nabyte podczas naszego zeszłorocznego projektu – Polish Christmas Guide, w którym również wykorzystywałem efekt parallax oraz animacje.

Tam gdzie tylko mogłem, korzystałem z natywnych rozwiązań, więc w tym projekcie najczęściej używałem animacji CSS’owych, a także wspomagałem się świetną biblioteką javascript’ową GSAP, która umożliwia w prosty sposób tworzyć płynne i w pełni kontrolowane animacje na elementach DOM’u. Światła imitujące podniebną autostradę, jak i piorun wyświetlane są na Canvas’ie. Jako że w 2015 roku Internet opanowały urządzenia mobilne, nie mogliśmy zapomnieć także o nich oraz o RWD, które dzisiaj jest już standardem. W przypadku urządzeń moblinych zdecydowaliśmy się na wyświetlenie wszystkich sekcji jedna pod drugą. Na dodatek strona wykorzystuje żyroskop (jeśli urządzenie je posiada) i umożliwia przesuwanie ilustracji poprzez obracanie telefonu!

różne warianty designu BTTF

Powiedzenie „do trzech razy sztuka” sprawdziło się i w przypadku tego projektu, ponieważ dopiero trzecia wersja designu strony została w pełni zaakceptowana ;) Mimo że całość została zaprojektowana w grafice wektorowej, ze względu na wydajność, zdecydowałem się w większości użyć jednak rastrów. Wybór ten podyktowany był także doświadczeniem – podczas testów „Polish Christmas Guide”, wersja z rastrowymi grafikami wypadła dużo lepiej niż w przypadku użycia plików SVG. Mimo wszystko, osobiście jestem zwolennikiem używania tych drugich. Głównym powodem jest fakt, że pozwalają one uzyskać świetne efekty, które - patrząc kilka lat wstecz - byłyby nie do osiągnięcia (choć do tej pory nie rozumiem, dlaczego Mozilla jeszcze nie naprawiła błędu w Firefoxie, który uniemożliwia prawidłową rotację grup w plikach SVG…).

Jednym z najciekawszych momentów pracy nad "Back To The Frontend" było użycie programu Spine przeznaczonego do animacji szkieletowych. Tu z pomocą przyszli koledzy z działu MerixGames, którzy wykorzystywali ten program także do animacji w grze Kopanito All-Stars Soccer

Spine i animacje szkieletowe

Na szczęście animacje szkieletowe nie są mi obce, ponieważ już wcześniej spotkałem się z nimi w pracy z grafiką 3D (a animacja na dwóch płaszczyznach jest, według mnie, łatwiejsza). Wynik mojej pracy w Spine mogłem wyeksportować do pliku JSON, by później animować pliki SVG skryptowo, lub do sprite’a, czyli pojedynczych klatek animacji w jednym pliku. Zdecydowałem się na ten drugi sposób, aby dodatkowo nie obciążać zasobów do kolejnych obliczeń animacji, a przechodniów wprawiać w ruch poklatkowo za pomocą CSS’a.

Lot próbny, czyli testy wehikułu

Nieodzownym elementem w naszej pracy, zwłaszcza w jej późniejszych etapach, jest kontakt z działem QA. Nasi drobiazgowi testerzy uruchomili stronę na wszystkich możliwych sprzętach i konfiguracjach, jakie posiadamy w firmie. Dzięki temu udało się dostosować stronę tak, by działała jak najlepiej na jak największej liczbie urządzeń. Muszę przyznać, że bardzo lubię pracę z naszymi testerami, którzy stoją na straży jakości tworzonych przez nas stron. Czasem jednak na przeszkodzie stają wkurzające mankamenty "mobilek", przez które naprawienie błahego błędu zabiera więcej czasu niż mogłoby się wydawać.

Ostatnie 2 tygodnie zajmowały drobne prace takie jak eliminowanie bugów, uzupełnianie treści i konsultacje z naszym szefem. 

Powrót do przyszłości

Projekt cały czas nabierał rozpędu przenosząc nas do 21 października 2015. Cały Internet huczał i świętował przybycie Marty’ego McFly’a do przyszłości. Tego samego dnia projekt wylądował w kilku galeriach CSS’owych, a do firmy przysyłane były gratulacje dobrze wykonanej roboty. Ciesze się, że mogłem wykorzystać moją znajomość filmu, jak i umiejętności Front-end’owca. Szkoda, że to już koniec… "Back to the Frontend" jest projektem, który sprawił mi do tej pory najwięcej radości. Z drugiej jednak strony zakończenie tego projektu oznacza także początek kolejnych wyzwań, jakie czekają mnie w MerixStudio.

Aby jeszcze lepiej poczuć klimat i celebrować powrót Marty'ego do przyszłości, odziałem się w filmową koszulkę, biurko ozdobiłem miniaturowymi wehikułami czasu, a po pracy urządziłem dla znajomych maraton całej trylogii „Powrót do przyszłości” ;)

Jak mawiał Doktor Brown: „Nasza przyszłość nie jest nigdzie zapisana. Będziemy mieli taką, na jaką zasłużyliśmy, więc zadbajmy by była jak najlepsza”.

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.