Pełna wersja WordPressa z PHP uruchamiana wyłącznie w przeglądarce za pomocą WebAssembly
Gdy po raz pierwszy zobaczysz WordPress Playground, może Ci się wydawać, że to zwykła witryna – może poza kolorowym tłem. To wszystko. To, co widzisz, to cały zestaw narzędzi WordPress, w tym PHP i baza danych, działające bezpośrednio w Twojej przeglądarce.
W tym poście Adam Zieliński (kierownik WordPress Playground) i Thomas Nattestad (menedżer produktu V8) omawiają:
- Jak WordPress Playground może Ci pomóc jako deweloperowi WordPressa.
- Jak to działa.
- Co to oznacza dla przyszłości WordPressa.
Korzystaj z WordPressa bez konieczności instalowania, umieszczaj go w aplikacji i steruj nim za pomocą JavaScriptu
Bezpłatnie możesz korzystać z WordPressa wbudowanego na stronie playground.wordpress.net i dostosowywać go do swoich potrzeb. Nie musisz płacić za infrastrukturę chmury ani obsługę, ponieważ ta witryna działa wyłącznie w Twojej przeglądarce – nikt inny nie może jej otworzyć. Jest to też sytuacja tymczasowa. Gdy tylko odświeżysz stronę, zniknie. Możesz utworzyć dowolną liczbę takich witryn na potrzeby prototypowania, testowania wtyczek i szybkiego testowania pomysłów.
Możesz też testować kod w różnych środowiskach za pomocą wbudowanego przełącznika wersji PHP i WordPress:
WordPress Playground to zupełnie nowy sposób korzystania z WordPressa. Pełna moc tego narzędzia jest jednak dostępna tylko wtedy, gdy zostanie ono uwzględnione w aplikacji. Najprostszym sposobem jest umieszczenie WordPress Playground w <iframe>
i skonfigurowanie go za pomocą interfejsu API parametrów zapytań.
Dokładnie to robi oficjalna prezentacja. Gdy wybierzesz na przykład motyw Pendant i wtyczkę Coblocks, wbudowany iframe zostanie zaktualizowany, aby wskazywał na https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
Iframe to łatwy sposób na rozpoczęcie, ale jest też ograniczony do opcji podstawowej konfiguracji. Jeśli potrzebujesz więcej, możesz skorzystać z innego, bardziej zaawansowanego interfejsu API.
Klient JavaScript Playground WordPressa zapewnia pełną kontrolę nad osadzoną 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żej znajdziesz przykład użycia tej funkcji. 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);
Korzystanie z PHP w WebAssembly bez WordPressa
WordPress Playground nie jest monolitem. WebAssembly PHP jest wydawany niezależnie od WordPressa i możesz go używać osobno. W przypadku witryn internetowych możesz użyć pakietu npm @php-wasm/web zoptymalizowanego pod kątem małego rozmiaru pakietu. W Node.js możesz skorzystać z pakietu @php-wasm/node, który zawiera więcej rozszerzeń PHP. Adam użył pierwszej z nich, aby dodać interaktywne fragmenty kodu PHP do tego samouczka WP_HTML_Tag_Processor. Oto krótki opis sposobu korzystania 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
Zastanawiasz się pewnie, jak to działa? To świetne pytanie. Przyjrzyjmy się bliżej wewnętrznej stronie sprawy. Zapnijcie pasy!
Pod maską znajduje się WebAssembly PHP, tłumacz SQL i serwer w przeglądarce.
PHP działa jako plik binarny WebAssembly
PHP nie działa w przeglądarce od razu po zainstalowaniu. WordPress Playground opracował specjalny przepływ danych do tworzenia interpretatora PHP w WebAssembly za pomocą Emscripten. Kompilowanie podstawowego kodu PHP nie jest zbyt skomplikowane – wystarczy zmienić sygnaturę funkcji, wymusić zmienną konfiguracji i zastosować kilka małych poprawek. Oto jak to zrobić:
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
Jednak zwykłe kompilacje PHP nie są zbyt przydatne w przeglądarce. Jako oprogramowanie serwerowe PHP nie ma interfejsu JavaScript API, który umożliwia przekazywanie treści żądania, przesyłanie plików ani wypełnianie strumienia php://stdin
. WordPress Playground musiał stworzyć ją od podstaw. Plik binarny WebAssembly jest dostarczany z dedykowanym modułem interfejsu API PHP napisanym w C oraz klasą PHP JavaScript, która udostępnia metody takie jak writeFile()
lub run()
.
Każda wersja PHP to tylko statyczny plik .wasm
, więc przełącznik wersji PHP jest dość nudny. Po prostu mówi przeglądarce, aby pobrała np. php_7_3.wasm
zamiast php_8_2.wasm
.
Baza danych jest obsługiwana przez warstwę translacji SQL.
WordPress wymaga MySQL. Nie ma jednak wersji MySQL w ramach WebAssembly, którą można uruchomić w przeglądarce. Dlatego WordPress Playground dostarcza PHP z natywnym sterownikiem SQLite i korzysta z SQLite.
Ale jak WordPress może działać na innej bazie danych?
W tle oficjalny wtyczka SQLite Database Integration przechwytuje wszystkie zapytania MySQL i przepisuje je w dialekcie SQLite. Wersja 2.0 zawiera nowy mechanizm tłumaczenia oparty na WordPress Playground, który pozwala WordPressowi na SQLite przejść 99% testów jednostkowych WordPressa.
Serwer WWW działa w przeglądarce
W zwykłej wersji WordPress kliknięcie linku, np. Blog, inicjuje żądanie HTTP do zdalnego backendu w celu pobrania strony blog
. WordPress Playground nie ma jednak zdalnego backendu. Zawiera on usługę Worker, która przechwytuje wszystkie wychodzące żądania i przekazuje je do instancji PHP w przeglądarce, która działa w oddzielnym Workerze Web.
Obsługa sieci za pomocą WebSockets
Jeśli chodzi o sieci, programy WebAssembly są ograniczone do wywoływania interfejsów API JavaScript. Jest to funkcja bezpieczeństwa, ale wiąże się też z wyzwaniem. Jak obsługiwać synchroniczny kod sieciowy niskiego poziomu używany przez PHP za pomocą asynchronicznych interfejsów API wysokiego poziomu dostępnych w JavaScript?
W przypadku WordPress Playground odpowiedź obejmuje serwer proxy WebSocket do gniazda TCP, Asyncify i łatanie wewnętrznych funkcji PHP, takich jak php_select
. To skomplikowane, ale jest nagroda. Kompilacja PHP przeznaczona dla Node.js może żądać interfejsów API w internecie, instalować pakiety composera, a nawet łączyć się z serwerem MySQL.
WordPressa można używać w jeszcze większej liczbie miejsc niż w przeglądarce
Ponieważ WordPress może teraz działać na WebAssembly, możesz go też uruchomić na serwerze Node.js – to ten sam mechanizm V8. Oczywiście za pomocą StackBlitz możesz też uruchomić Node.js bezpośrednio w przeglądarce, co oznacza, że możesz uruchomić WordPressa i PHP skompilowane do WebAssembly, które działa w Node.js, a które jest też skompilowane do WebAssembly i uruchamiane w przeglądarce. WebAssembly staje się też coraz popularniejszy w bezserwerowej przestrzeni i w przyszłości może być również uruchamiany w tej infrastrukturze.
W przyszłości mogą pojawić się interaktywne aplikacje WordPress, które nie wymagają konfiguracji i umożliwiają współpracę.
Wyobraź sobie, że możesz od razu przejść do edytora kodu, gdzie możesz zacząć tworzyć, ponieważ cała konfiguracja została już wykonana. Możesz nawet udostępnić prosty link i rozpocząć sesję edycji dla wielu osób, np. w Dokumentach Google. Gdy skończysz, wystarczy jedno kliknięcie, aby bezproblemowo wdrożyć swoje treści w różnych usługach hostingowych – bez konieczności instalowania niczego lokalnie.
To tylko mały wycinek możliwości. Możemy zobaczyć interaktywne samouczki, demonstracje wtyczek na żywo, wersje testowe witryn, zdecentralizowany WordPress na serwerach peryferyjnych, a nawet tworzenie wtyczek na telefonie.
Przyszłość jest ekscytująca i możesz w niej uczestniczyć. Twoje pomysły i wkład są dla WordPress Playground tym, czym tlen dla organizmu. Odwiedź repozytorium GitHub, przywitaj się na kanale #meta-playground na Slacku WordPress.org i skontaktuj się z Adamem pod adresem adam@adamziel.com.