Pełna wersja WordPress oparta na PHP i działająca wyłącznie w przeglądarce z WebAssembly
Gdy widzisz WordPress Playground po raz pierwszy, wydaje się, że to zwykła witryna – może tylko że ma kolorowe tło. Nic nie szkodzi. To, co widzisz, to cały stos technologiczny WordPressa, łącznie z językiem PHP i bazą danych, działający bezpośrednio w przeglądarce.
W tym poście Adam Zieliński (kierujący WordPress Playground) i Thomas Nattestad (menedżer produktu w V8) poznają następujące zagadnienia:
- Jak WordPress Playground może pomóc deweloperowi WordPressa.
- Jak to działa.
- Co to oznacza dla przyszłości WordPress
Używaj WordPressa bez instalacji, umieść go w aplikacji, a nawet steruj nim za pomocą JavaScriptu.
Możesz bezpłatnie korzystać z WordPressa umieszczonego na stronie playground.wordpress.net. Nie trzeba płacić za infrastrukturę chmurową ani wsparcie, ponieważ taką stronę można otworzyć w całości w przeglądarce i nikt inny nie może jej otworzyć. Ma ona także charakter przejściowy. Gdy tylko odświeżysz stronę, zniknie. Możesz mieć tyle stron, na których chcesz tworzyć prototypy, testować wtyczki i szybko odkrywać pomysły.
Możesz ich nawet używać do testowania kodu w różnych środowiskach za pomocą wbudowanego przełącznika wersji PHP i WordPress:
WordPress Playground to zupełnie nowy sposób korzystania z WordPressa. Aby w pełni wykorzystać możliwości tej funkcji, musisz ją włączyć w aplikację. Najprostszym sposobem jest wbudowanie platformy WordPress Playground w plik <iframe>
i skonfigurowanie go za pomocą interfejsu API parametrów zapytania.
Właśnie to robimy w ramach oficjalnej prezentacji. Jeśli np. wybierzesz motyw wiszący i wtyczkę Coblocks, umieszczony element iframe zostanie zaktualizowany tak, aby wskazywał https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
Element iframe to prosty sposób na rozpoczęcie pracy, ale jego liczba ogranicza się tylko do podstawowej opcji konfiguracji. Jeśli potrzebujesz czegoś więcej, możesz skorzystać z innego, wydajniejszego interfejsu API.
Klient WordPress Playground w języku JavaScript zapewnia pełną kontrolę nad umieszczoną witryną
Możesz kontrolować całą witrynę WordPress, w tym system plików i PHP, korzystając z pełnego interfejsu API dostępnego w pakiecie npm @wp-playground/client. Poniższy przykład pokazuje, jak go użyć. Więcej przykładów znajdziesz w interaktywnym samouczku:
import {
connectPlayground,
login,
connectPlayground,
} from '@wp-playground/client';
const client = await connectPlayground(
document.getElementById('wp'), // An iframe
{ loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();
// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');
// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });
// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);
Używaj WebAssembly PHP nawet bez WordPressa
WordPress Playground nie jest monolitem. Technologia WebAssembly PHP jest udostępniana niezależnie i możesz jej używać oddzielnie. W przypadku internetu możesz użyć pakietu npm @php-wasm/web zoptymalizowanego pod kątem małego rozmiaru pakietu, a w środowisku Node.js – @php-wasm/node, który zawiera więcej rozszerzeń PHP. Skorzystał z pierwszego, by dodać interaktywne fragmenty kodu PHP do tego samouczka na stronie WP_HTML_Tag_Processor. Oto jak korzystać z tej funkcji:
import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
requestHandler: {
documentRoot: '/www',
},
});
// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });
// Or use the familiar HTTP concepts:
const response = php.request({
method: 'POST',
relativeUrl: '/index.php',
data: { name: 'John' },
});
console.log(response.text); // Hello John
W takim razie musisz się zastanawiać – jak to w ogóle działa? To świetne pytanie. Przyjrzyjmy się kwestiom wewnętrznym. Zapnij pasy.
Obejmuje on aplikacje WebAssembly PHP, tłumacza SQL oraz serwer w przeglądarce.
PHP jest uruchamiany jako plik binarny WebAssembly
PHP nie działa tylko w przeglądarce. Platforma WordPress Playground opracowała specjalny potok do skompilowania interpretera PHP dla języka WebAssembly przy użyciu Emscripten. Tworzenie Vanilla PHP nie jest zbyt skomplikowane – wystarczy dostosować w tym miejscu podpis funkcji, wymusić w nim zmienną konfiguracji i zastosować kilka małych poprawek. Możesz to zrobić samodzielnie:
git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2
Kompilacje w stylu waniliowej PHP nie są jednak zbyt przydatne dla przeglądarki. Jako oprogramowanie serwerowe PHP nie ma interfejsu API JavaScript, który mógłby przekazywać treść żądania, przesyłać pliki ani wypełniać strumienia php://stdin
. Platforma WordPress Playground
musiała być od podstaw. Plik binarny WebAssembly zawiera specjalny moduł interfejsu API PHP napisany w języku C i klasę PHP JavaScript z obsługą metod takich jak writeFile()
lub run()
.
Każda wersja PHP jest po prostu statycznym plikiem .wasm
, więc przełączanie wersji PHP jest dość nudne. Po prostu informuje przeglądarkę, że ma pobrać
np. php_7_3.wasm
, a nie php_8_2.wasm
.
Baza danych jest obsługiwana przez warstwę translacji SQL
WordPress wymaga MySQL. Nie ma jednak wersji MySQL WebAssembly, którą można uruchomić w przeglądarce. W związku z tym WordPress Playground wysyła PHP do natywnego sterownika SQLite i korzysta z SQLite.
Jak można uruchomić WordPress na innej bazie danych?
W rzeczywistości oficjalna wtyczka SQLite do integracji bazy danych przechwytuje wszystkie zapytania MySQL i przetwarza je w dialekcie SQLite. Wersja 2.0 zawiera nową warstwę translacji opartą na platformie WordPress Playground, dzięki której WordPress w SQLite może przejść 99% pakietu testowego jednostkowego WordPressa.
Serwer WWW znajduje się w przeglądarce
W zwykłym środowisku WordPress kliknięcie linku Blog spowoduje wysłanie do zdalnego backendu żądania HTTP w celu pobrania strony blog
. WordPress Playground nie ma jednak zdalnego backendu. Ma zasób Service Worker, który przechwytuje wszystkie wychodzące żądania i przekazuje je do instancji PHP w przeglądarce uruchomionej w osobnym sektorze roboczym przeglądarki.
Sieć jest obsługiwana przez WebSockets
Jeśli chodzi o sieci, programy WebAssembly są ograniczone do wywoływania interfejsów API JavaScript. Jest to funkcja zwiększająca bezpieczeństwo, ale także stanowiąca wyzwanie. Jak można obsługiwać synchroniczny kod sieci niskiego poziomu używany przez PHP z asynchronicznymi interfejsami API wysokiego poziomu dostępnymi w języku JavaScript?
W przypadku WordPress Playground odpowiedź obejmuje serwer proxy z WebSocket na TCP socket, Asyncify i zastosowanie poprawek do głębokich procesów PHP, takich jak php_select
. To złożone zadanie, ale na pewno otrzymasz nagrodę. Kompilacja PHP kierowana na Node.js może żądać internetowych interfejsów API, instalować pakiety kompozycyjne, a nawet łączyć się z serwerem MySQL.
WordPress może być używany nawet częściej niż przeglądarka
Ponieważ WordPress działa teraz w WebAssembly, można też uruchamiać go na serwerze Node.js – to ten sam silnik V8. Oczywiście korzystając ze StackBlitz, możesz też uruchamiać Node.js bezpośrednio w przeglądarce. Oznacza to, że możesz uruchamiać WordPress i PHP skompilowane w języku WebAssembly oraz w środowisku Node.js, który również jest skompilowany do WebAssembly w przeglądarce. WebAssembly szybko zyskuje też popularność w branży bezserwerowej i w przyszłości może też być wykorzystywane w tej infrastrukturze.
W przyszłości mogą pojawić się interaktywne aplikacje WordPress wymagające zerowej konfiguracji, które umożliwiają współpracę
Wyobraź sobie, że od razu przejdziesz do edytora kodu, a Ty możesz od razu zacząć tworzyć. Możesz nawet udostępnić prosty link i rozpocząć wieloosobową sesję edycji, np. w Dokumentach Google. Gdy skończysz, wystarczy jedno kliknięcie, aby bezproblemowo wdrożyć swoją kreację w różnych usługach hostingowych – bez konieczności instalowania czegokolwiek lokalnie.
A to tylko rzut oka na reklamę! Możemy zobaczyć interaktywne samouczki, wersje demonstracyjne aktywnych wtyczek, witryny przejściowe, zdecentralizowane WordPressa na serwerach brzegowych, a nawet tworzyć wtyczki w telefonie.
Przyszłość jest ekscytująca i możesz być jej częścią. Twoje pomysły i wkład to coś więcej dla WordPress Playground. Odwiedź repozytorium GitHub, przywitaj się na #meta-playground kanale WordPress.org na Slacku i skontaktuj się z Adamem pod adresem adam@adamziel.com.