search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[JS] React i wirtualna rzeczywistość. Nadchodzą zmiany!

[JS] React i wirtualna rzeczywistość. Nadchodzą zmiany!

Wczoraj rozpoczęła się konferencja F8 zorganizowana przez Facebooka. W jej trakcie predstawiono nowe rozwiązania dotyczące narzędzi JS udostępnianych przez developerów Facebooka.

Skupię się na dwóch z nich, czyli na React Fiber i React VR (pominę temat związany z Relay Modern). Narzędzia te, są rozwinięciem istniejących rozwiązań, które są używane przez ogromną rzeszę programistów webowych. Chyba nie ma nikogo, kto by nie kojarzył nazwy React. Dla tych którzy nie wiedzą, jest to biblioteka pozwalająca budować widoki aplikacji (interfejs użytkownika), których renderowanie jest zoptymalizowane pod kątem wydajności.

Czym jest React Fiber?

React Fiber jest to ewolucja standardowej biblioteki React. Kompletna przebudowa kodu biblioteki ma pozwolić na usprawnione zarządzanie renderowaniem elementów interfejsu użytkownika. Co to oznacza?

  • Poprawiono obsługę błędów w kodzie napisanym za pomocą React.js,
  • Podczas renderowania będzie można zwrócić tablice lub stringi zamiast tylko elementów drzewa DOM,
  • Mimo tak poważnych zmian, React Fiber jest wstecznie kompatybilny z kodem napisanym we wcześniejszych wersjach React.js

Kompletna przebudowa kodu biblioteki ma stanowić podstawę do wprowadzania kolejnych usprawnień do React. Nie zmienia to faktu, że wraz z kolejnymi wersjami biblioteki mogą się pojawiać zmiany, które sprawią że starszy kod przestanie działać poprawnie i trzeba będzie zmigrować go na nowszą wersję.

Co warto odnotować, React Fiber nie jest czymś totalnie nowym. Pierwsze informacje odnośnie tej wersji biblioteki można było znaleźć już rok temu. Teraz jednak, zdecydowano się zaprezentować pierwszą stabilną wersję.

React VR, czyli wprowadzenie do wirtualnej rzeczywistości

Podobnie jak React Fiber, React VR został zaprezentowany jako wersja stabilna na konferencji F8. Czym różni się React VR od React Fiber? Przede wszystkim tym, że został zoptymalizowany pod API takie jak WebGL czy WebVR. Dzięki temu, można w sposób znany z React czy React Native (React dla urządzeń mobilnych) tworzyć aplikacje czy inne rozwiązania wirtualnej rzeczywistości w łatwy i przyjemny sposób (tak obiecują).

React VR stał się konkurentem dla frameworka A-Frame stworzenego przez Mozillę i który też jest dedykowany rozwiązaniom wirtualnej rzeczywistości. Tematyka związana z tworzeniem aplikacji dla wirtualnej rzeczystości była poruszana na ostatniej konferencji 4Developers w Warszawie.

Jednym z głównych założeń React VR było stworzenie narzędzia, które pozwoli renderować widoki z wydajnością 60 klatek na sekundę (60fps) dla standardowych headsetów i 90 klatek na sekundę dla urządzeń Rift. To oznacza, że zmiany powinny wystąpić w jednej klatce, a nie rozciągać się na przestrzeni kilku klatek. Wszystkie obliczenia i renderowanie widoków odbywają się w WebWorkerach, dzięki temu następuje separacja procesów i jest możliwa asynchroniczna komunikacja pomiędzy aplikacją a źródłami danych dotyczących orientacji w przestrzeni.

Podsumowanie

Tak w skrócie wyglądają najnowsze zmiany w ekosystemie Reactowym. Nie ukrywam, że są bardzo intrygujące, ale to czy te zmiany rzeczywiście staną się podstawą dla najnowszych, wydajniejszych rozwiązań to się okaże w przyszłości. Póki co, jest swego rodzaju ekscytacja, że pojawiło się coś nowego. Można się śmiać, że z czystym sumieniem można wyzerować licznik czasu, pokazujący czas od pojawienia się ostatniego frameworka JS.

Z racji tego, że wiele osób w konkursie Daj Się Poznać 2017 korzysta z Reacta, m.in. moja skromna osoba, to warto uświadomić wszystkich zainteresowanych, że coś nowego się pojawiło na horyzoncie i można z tego korzystać. A co Ty sądzisz o najnowszych możliwościach zaprezentowanych przez Facebooka narzędziach?

  • > Podczas renderowania będzie można zwrócić tablice lub stringi zamiast tylko elementów drzewa DOM

    Nie no, rocket science 😉

    Nie wierzyłem, gdy poważni developerzy (chyba Paul Kinlan?) wieszczyli, że z Reacta zrobi się standardowa platforma devowa. A jednak, FB do tego prze. Szkoda tylko, że w tak dziwny sposób… Bo taki React VR brzmi sensowniej niż normalny React (w końcu renderowanie w wątkach).

  • Wydaje mi się, że właśnie po to przebudowali kod w React Fiber, aby mogli wprowadzić kolejne ulepszenia do procesu renderowania elementów interfejsu. W przypadku React VR mogli od razu przejść do głębszej optymalizacji pod urządzenia docelowe.

  • Prawdę mówiąc osobiście to szukam implementacji VDOM dobrze działającej na serwerze i w Web Workerze… Jak dotąd skłaniam się ku tradycyjnej opcji „Do It Yourself” 😉

  • W takiej sytuacji zawsze możesz się przekonać jak coś działa od środka oraz dlaczego to jest takie trudne … 🙂

  • Piotr Wojtkowiak

    React fiber to przede wszystkim przepisanie algorytmu trawersowania drzewa komponentów (stąd nazwa fiber od nazwy tego algorytmu), na taki który pozwala zrobić to asynchronicznie. Dzięki temu otwiera to drogę do zupełnie nowych funkcjonalności np. nadawanie priorytetów komponentom czy zarządzanie procesem renderu tak aby nie blokować klatek w przeglądarce – to wejdzie w standardzie. To o czym mówi @Comandeer:disqus, czyli delegowanie części obliczeń do workerów będzie możliwe ale raczej spodziewałbym się szybko takiej funkcjonalności w standardzie biblioteki. Jednak zespół bada różne drogi ulepszenia procesu renderowania – np. wykorzystanie webassembly.

    Bardzo polecam tę prezkę z tegorocznego react conf:
    https://www.youtube.com/watch?v=ZCuYPiUIONs

  • Dzięki wielkie za rozwinięcie tematu.

  • Pingback: Daj Się Poznać 2017 – raport z działań. Część 8 | Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko()