Jeszcze kilka lat temu ciężko było sobie wyobrazić koncepcję uruchamiania w przeglądarce tak skomplikowanego oprogramowania jak Photoshop. Jednak korzystając z różnych nowych technologii internetowych, firma Adobe wprowadziła teraz do sieci publiczną wersję beta programu Photoshop.
Przez ostatnie 3 lata pracowaliśmy nad tym, aby umożliwić aplikacjom internetowym przechodzenie na nowe możliwości. Jedną z takich aplikacji jest Photoshop. Jeszcze kilka lat temu ciężko było sobie wyobrazić koncepcję uruchamiania w przeglądarce tak skomplikowanego oprogramowania jak Photoshop. Jednak korzystając z różnych nowych technologii internetowych, firma Adobe wprowadziła teraz do sieci publiczną wersję beta programu Photoshop.
Jeśli wolisz czytać ten artykuł, a nie czytać, możesz go obejrzeć jako film.
W tym poście po raz pierwszy chcemy opowiedzieć o tym, jak nasza współpraca rozszerza możliwości programu Photoshop w internecie. Wszystkie interfejsy API używane przez Adobe i nie tylko możesz używać w swoich aplikacjach. W poszukiwaniu inspiracji zachęcamy do zapoznania się z postami na blogu na temat funkcji internetowych oraz z naszego narzędzia do śledzenia interfejsów API, w którym znajdziesz najnowsze i najlepsze ulepszenia, nad którymi pracujemy.
Dlaczego Photoshop trafił do internetu
Wraz z rozwojem internetu jedna rzecz się nie zmieniła, a najważniejsze zalety witryn i aplikacji internetowych w porównaniu z aplikacjami na poszczególnych platformach. Korzyści te obejmują wiele unikalnych możliwości, takich jak możliwość łączenia, tymczasowe i uniwersalne, ale sprowadzają się do łatwego dostępu, łatwego udostępniania i doskonałej współpracy.
Najprostszą zaletą adresu URL jest to, że każdy może go kliknąć i uzyskać natychmiastowy dostęp. Potrzebujesz tylko przeglądarki. Nie musisz instalować żadnej aplikacji ani martwić się o system operacyjny. W przypadku aplikacji internetowych oznacza to, że użytkownicy mogą mieć dostęp do aplikacji oraz swoich dokumentów i komentarzy. Dzięki temu internet staje się idealną platformą współpracy, która staje się coraz ważniejsza dla zespołów kreatywnych i marketingowych.
Dokumenty Google były pionierem tego uproszczonego dostępu. Większość z nas wie, jak łatwo jest utworzyć dokument, wysłać komuś link i od razu przejść do aplikacji, ale także do konkretnego dokumentu lub komentarza. Od tamtej pory z tego rozwiązania zastosowało się mnóstwo świetnych aplikacji, np. tych, które prezentujeliśmy w przeszłości, z których może korzystać również Photoshop.
Jak program Photoshop trafił do internetu
Początkowo internet był platformą przeznaczoną wyłącznie na dokumenty, ale z biegiem czasu znacznie się rozwinął. Wczesne aplikacje, takie jak Gmail, pokazały, że bardziej złożona interaktywność i obsługa aplikacji są co najmniej możliwe. Od tego czasu zaobserwowaliśmy ogromny wzrost popularności aplikacji internetowych, w których aplikacje internetowe wychodzą naprzeciw możliwościom, a dostawcy przeglądarek w odpowiedzi na te zmiany coraz bardziej rozszerzają możliwości usług internetowych. Najnowsza wersja tej „pętli” umożliwiła program Photoshop w internecie.
Firma Adobe wcześniej wprowadziła do sieci Spark i Lightroom, a od wielu lat chciała wprowadzić ją do internetu. Zostały one jednak zablokowane z powodu ograniczeń wydajności JavaScriptu, braku dobrego miejsca docelowego kompilacji kodu i braku możliwości internetowych. Czytaj dalej, aby dowiedzieć się, jakie funkcje Chrome wbudowane są w przeglądarkę, które rozwiązują te problemy.
Przenoszenie numerów WebAssembly za pomocą Emscripten
WebAssembly wraz z łańcuchem narzędzi w języku C++ (Emscripten) okazał się kluczem do udostępnienia Photoshopa możliwości pojawienia się w internecie, ponieważ oznaczało, że Adobe nie musi zaczynać od zera, ale może wykorzystać istniejącą bazę kodu Photoshopa. WebAssembly to przenośny zestaw instrukcji binarnych, który można przesyłać we wszystkich przeglądarkach. Został on zaprojektowany jako miejsce docelowe kompilacji dla języków programowania. Oznacza to, że aplikacje takie jak Photoshop napisane w języku C++ można przenosić bezpośrednio do internetu bez konieczności modyfikowania kodu JavaScript. Aby rozpocząć przenoszenie swoich danych, zapoznaj się z pełną dokumentacją usługi Emscripten lub skorzystaj z tego przewodnika dotyczącego przenoszenia biblioteki.
Emscripten to w pełni funkcjonalny łańcuch narzędzi, który nie tylko ułatwia kompilowanie kodu C++ w Wosm, ale zapewnia też warstwę translacji, która przekształca wywołania interfejsu API POSIX w internetowe wywołania interfejsu API, a nawet przekształca OpenGL w WebGL. Możesz na przykład przenieść aplikacje, które odwołują się do lokalnego systemu plików, a Emscripten zapewni emulowany system plików, aby utrzymać ciągłość działania.
Serwis Emscripten od jakiegoś czasu udostępnia większość elementów Photoshopa w internecie, ale niekoniecznie było tak szybko, jak to możliwe. Nieustannie współpracowaliśmy z firmą Adobe, aby określić, gdzie występują wąskie gardła, i ulepszyć usługę Emscripten. Photoshop działa w przypadku wielowątkowości. Wprowadzenie dynamicznego wielowątkowości do WebAssembly było kluczowym wymaganiem.
Poza tym bardzo powszechna jest obsługa błędów oparta na wyjątkach w językach C++, ale nie była dobrze obsługiwana w językach Emscripten i WebAssembly. Wspólnie z grupą społeczności WebAssembly w W3C ulepszyliśmy standard WebAssembly i oparte na nim narzędzia, aby wprowadzić w WebAssembly wyjątki C++.
Emscripten nie tylko działa w dużych aplikacjach, ale także umożliwia przenoszenie bibliotek lub mniejszych projektów. Na przykład pokazujemy, jak skompilować popularną bibliotekę OpenCV w internecie za pomocą Emscripten.
Ponadto WebAssembly udostępnia zaawansowane podstawowe elementy zwiększające wydajność, takie jak instrukcje SIMD, które znacznie zwiększają wydajność aplikacji internetowych. Na przykład Halide ma kluczowe znaczenie dla wydajności Adobe, a w tym przypadku SIMD zapewnia średnio 3–4 razy przyspieszenie, a w niektórych przypadkach – 80–160 razy.
Debugowanie WebAssembly
Nie da się ukończyć żadnego dużego projektu bez odpowiednich narzędzi do zadania i dlatego zespół Chrome opracował pomoc do debugowania w WebAssembly. Zapewnia ono pomoc w przechodzeniu przez kod źródłowy, ustawianie punktów przerwania i wstrzymywaniu przy wyjątkach, sprawdzanie zmiennych z obsługą typów rozszerzonych, a nawet podstawową obsługę oceny w konsoli Narzędzi deweloperskich.
Zapoznaj się z wiarygodnym przewodnikiem na temat korzystania z debugowania WebAssembly.
Pamięć o wysokiej wydajności
Biorąc pod uwagę, jak duże mogą być dokumenty w Photoshopie, w programie Photoshop niezbędne jest dynamiczne przenoszenie danych z dysku do pamięci podczas przesuwania się użytkownika. Na innych platformach jest to zwykle realizowane przez mapowanie pamięci w mmap, ale w internecie nie było to szczególnie możliwe – dopóki nie opracowano i wdrożono uchwyty dostępu do prywatnego systemu plików źródła. Więcej informacji o tym, jak korzystać z tego nowego interfejsu API, znajdziesz w dokumentacji.
Przestrzeń kolorów P3 dla płótna
Dawniej kolory w internecie były określane w przestrzeni kolorów sRGB, która była standardem z lat 90. XX wieku i była oparta na możliwościach monitorów lamp katodowych. Kamery i monitory bardzo się zmieniły w ciągu ostatniego ćwierćwiecza, a ustandaryzowane zostało znacznie większe i bardziej wydajne przestrzenie kolorów. Jedną z najpopularniejszych nowoczesnych przestrzeni kolorów jest Display P3. Photoshop używa środowiska Display P3 Canvas do dokładniejszego wyświetlania obrazów w przeglądarce. W szczególności obrazy o jasnej bieli, jasnych kolorach oraz szczegóły w cieniu będą wyświetlane najlepiej jak to możliwe na nowoczesnych wyświetlaczach, które obsługują dane Display P3. Udoskonalamy interfejs Display P3 Canvas API, aby umożliwić korzystanie z wyświetlaczy o dużym zakresie dynamicznym.
Komponenty sieciowe i litera
Photoshop to słynna duża aplikacja oferująca wiele funkcji, która zawiera setki elementów interfejsu użytkownika i obsługuje dziesiątki przepływów pracy. Aplikację tworzy wiele zespołów przy użyciu różnych narzędzi i metod programistycznych, ale jej różne części muszą połączyć się w spójną i wydajną całość.
Aby sprostać temu wyzwaniu, firma Adobe wykorzystała komponenty internetowe i bibliotekę Lite. Elementy interfejsu programu Photoshop pochodzą z biblioteki Spectrum Web Komponent firmy Adobe – lekkiej i wydajnej implementacji systemu projektowania Adobe, która działa z dowolną platformą lub nie działa w ogóle.
Co więcej, cała aplikacja Photoshopa została zbudowana przy użyciu komponentów sieciowych opartych na technologii Lit. Korzystając z wbudowanego modelu komponentów przeglądarki i enkapsulacji modelu Shadow DOM, zespół mógł łatwo zintegrować kilka „wysp” kodu React dostarczonego przez inne zespoły Adobe.
Buforowanie skryptu service worker za pomocą Workbox
Skrypty service worker działają jak programowalny lokalny serwer proxy, przechwytując żądania sieciowe i odpowiadając przy użyciu danych z sieci, pamięci podręcznych o długim czasie życia lub obu tych źródeł.
Gdy zespół V8 pracuje nad poprawą wydajności, gdy pierwszy skrypt Service Worker wysyła odpowiedź z pamięci podręcznej WebAssembly, Chrome generuje i przechowuje zoptymalizowaną wersję kodu – nawet w przypadku wielomegabajtowych skryptów WebAssembly, które są często używane w bazie kodu Photoshopa. Podobna kompilacja wstępna ma miejsce, gdy skrypt JavaScript jest buforowany przez skrypt service worker podczas kroku install. W obu przypadkach Chrome może wczytywać i wykonywać zoptymalizowane wersje skryptów z pamięci podręcznej przy minimalnym nakładzie pracy na czas działania.
Photoshop w przeglądarce korzysta z tej możliwości, wdrażając mechanizm service worker, który zapisuje w pamięci podręcznej wiele swoich skryptów JavaScript i WebAssembly. Ponieważ adresy URL tych skryptów są generowane podczas kompilacji, a logika aktualizowania pamięci podręcznych może być skomplikowana, zespół zdecydował się wykorzystać zbiór bibliotek utrzymywanych przez Google o nazwie Workbox, aby w ramach procesu kompilacji wygenerować skrypt service worker.
Skrypt service worker oparty na Workbox oraz zapisywanie w pamięci podręcznej skryptu silnika V8 doprowadziły do wymiernych wzrostów wydajności. Konkretne liczby różnią się w zależności od urządzenia wykonującego kod, ale zespół szacuje, że te optymalizacje skróciły czas poświęcany na inicjowanie kodu o 75%.
Co dalej z Adobe w przeglądarce?
Wersja beta programu Photoshop to dopiero początek, a my mamy już kilka ulepszeń w zakresie wydajności i funkcji, ponieważ program Photoshop będzie kierował ich do pełnej premiery po wersji beta. Adobe nie rezygnuje z programu Photoshop i planuje intensywnie rozszerzać usługę Creative Cloud również w internecie, czyniąc ją podstawową platformą zarówno do tworzenia treści kreatywnych, jak i do współpracy. Dzięki temu miliony nowych twórców będą mogły opowiedzieć swoje historie i skorzystać z innowacyjnych rozwiązań w internecie.
Adobe stale przesuwa granice możliwości, dlatego zespół Chrome będzie kontynuować naszą współpracę na rzecz rozwoju internetu dla Adobe i ogólnie w tętniącym życiem ekosystemie programistów stron internetowych. Inne przeglądarki również wykorzystują te nowoczesne możliwości, więc nie możemy się doczekać, aż Adobe stanie się dostępna dla ich produktów i usług. Wkrótce podamy więcej informacji na temat tego, jak rozwijać internet.
Więcej informacji o uzyskiwaniu dostępu do programu Photoshop w przeglądarce (beta) znajdziesz w Centrum pomocy Adobe.