Fui-as: powiew świeżości w świecie interfejsów webowych

Przyznaję się bez bicia: tworzenie aplikacji webowych, które wyglądają tak samo dobrze w każdej przeglądarce, to od zawsze zmora programistów. Dopełniasz hover state przycisku z najwyższą starannością, a potem okazuje się, że Safari renderuje to zupełnie inaczej niż Chrome. Potrzebujesz niestandardowego elementu interfejsu — sięgasz po canvas — i nagle tracisz dostępność, SEO i całą przyjemność z pracy z DevTools.

Nowy projekt open-source o nazwie fui-as idzie pod tym względem pod prąd. I szczerze mówiąc, zaczynam przemyśliwać swoje dotychczasowe podejście do tworzenia interfejsów w przeglądarce.

Desktopowa wygoda w świecie internetu

Jeśli kiedykolwiek budowałeś aplikację desktopową przy użyciu WPF czy Qt, znasz ten komfort pracy z porządnym silnikiem renderującym. Masz pikselową precyzję. Animacje działają jak masło. Tekst wygląda identycznie wszędzie. Interfejs wygląda dokładnie tak, jak go zaprojektowałeś.

Wyobraź sobie teraz, że przenosisz to samo dobre samo doświadczenie na web. Mniej więcej tym właśnie zajmują się frameworki oparte na canvas — renderują cały interfejs na elemencie HTML5 canvas, dając ci precyzję znana z desktopu przy zasięgu internetu.

Nie tylko ładne obrazki

Ludzie stojący za fui-as wiedzą, że canvasowe interfejsy to nie tylko kwestia estetyki. Również rozwiązują realne problemy, które zwykle odstraszają programistów od tego podejścia:

Dostępność: Jedna z najczęstszych krytyk canvasowych aplikacji to fakt, że dla czytników ekranu i technologii asystujących są one czarną skrzynką. Fui-as radzi sobie z tym, implementując domyślnie semantyczne drzewo — twoja canvasowa aplikacja nadal może komunikować się z narzędziami dostępności.

Internacjonalizacja: Wykorzystanie HarfBuzz do kształtowania tekstu i ICU do danych lokalizacyjnych oznacza prawidłowe wsparcie dla języków CJK, skryptów złożonych i tego często pomijanego problemu z podmianą fontów, gdy użytkownik wklei tekst w języku, którego się nie spodziewałeś.

Wydajność: Framework kompresuje zasoby za pomocą Brotli, przez co początkowy payload jest minimalny (poniżej 100KB dla stron demo), a assety runtime cache'owane trwale. To odpowiedź na typową narzekanie wobec podejścia canvasowego — że jest zbyt ciężkie.

Stack technologiczny, który to umożliwia

To, co mnie fascynuje w tym projekcie, to narzędzia, które go napędzają:

• Yoga do obliczeń responsywnego układu (tak, ten sam silnik layoutu co w React Native)
• Skia do sprzętowo przyspieszanego renderingu 2D
• HarfBuzz do inteligentnego kształtowania tekstu
• ICU do kompleksowego wsparcia internacjonalizacji

To w zasadzie zestaw sprawdzonych w boju komponentów open-source, które przez lata z powodzeniem napędzały aplikacje mobilne i desktopowe, teraz przeniesione do przeglądarki.

Dlaczego to ma znaczenie dla twojego następnego projektu

Oto sedno sprawy: tradycyjny web development z frameworkami opartymi na DOM, takimi jak React czy Vue, jest niesamowicie potężny i pozostanie właściwym wyborem dla większości projektów. Ale istnieje rosnąca kategoria aplikacji, gdzie renderowanie na canvasie ma sens:

• Narzędzia do wizualizacji danych wymagające customowych grafik
• Tablice współpracy z narzędziami do złożonego rysowania
• Gry i interaktywne doświadczenia, które i tak żyją na canvasie
• Dashboardy enterprise, gdzie liczy się pikselowa precyzja

A czasem po prostu chcesz budować coś bez martwienia się o zachowania przeglądarek, bitwy o specyficzność CSS czy dlaczego box-sizing: border-box nadal nie jest domyślny po tylu latach.

Aspekt filozoficzny

Twórca fui-as powiedział coś, co utkwiło mi w pamięci: "Może nie ma już sensu budować czegoś takiego, skoro każdy może po prostu kazać AI robić rzeczy ad hoc."

To uczciwe pytanie. Przy wszechobecnych asystentach programistycznych opartych na AI — czy nadal jest wartość w inżynierii opartej na zasadach? W rozwiązywaniu trudnych problemów przez staranną architekturę zamiast sklejania kodu generowanego przez AI?

Ja bym argumentował, że tak. AI może pomóc ci dostarczać szybciej, ale rozumienie fundamentów — jak dokładnie działa renderowanie tekstu, jak utrzymać dostępność w niekonwencjonalnych interfejsach, jak optymalizować pod kątem realnej wydajności — ta wiedza procentuje. Projekty takie jak fui-as przypominają nam, że dobra inżynieria nie wyszła z mody.

Gdzie iść dalej

Jeśli jesteś zainteresowany tym podejściem, warto obserwować projekt. Frameworki canvasowe zawsze istniały na obrzeżach web developmentu, ale narzędzia dojrzewają w tempie ekspresowym.

A jeśli pracujesz nad projektem, który mógłby skorzystać z tego podejścia, pomyśl o infrastrukturze hostingowej, która to obsłuży. Aplikacje WebAssembly z renderowaniem na canvas mogą być zaskakująco lekkie przy właściwym wdrożeniu — zwłaszcza w połączeniu z odpowiednim CDN i strategią cache'owania.

Platforma webowa wciąż nas zaskakuje. Czasem dawne marzenia — jakość interfejsu desktopowego w przeglądarce — nie są wcale tak odległe.

A co ty sądzisz o frameworkach webowych opartych na canvasie? Budowałeś coś, co skorzystałoby na tym podejściu? Podziel się w komentarzach — zawsze jesteśmy ciekawi, nad czym pracuje nasza społeczność deweloperów.