Twórz środowisko WordPress w przeglądarce za pomocą WordPress Playground i WebAssembly

Pełny WordPress oparty na PHP, działający wyłącznie w przeglądarce z WebAssembly

Adam Zieliński
Thomas Nattestad
Thomas Nattestad
X

Kiedy po raz pierwszy widzisz WordPress Playground, wygląda na to, zwykłej witryny, może z wyjątkiem kolorowego tła. Wszystko to ale. Widzimy tu cały stos technologiczny WordPress, w tym PHP i bazy danych, które działają bezpośrednio w przeglądarce.

W tym poście Adam Zieliński (kierownik działu WordPress Playground) i Thomas Nattestad (Product Manager for V8) Dowiedz się więcej:

  • Jak WordPress Playground może pomóc Ci w programowaniu WordPress.
  • Jak to działa?
  • Co to oznacza dla przyszłości WordPressa.

Używaj WordPressa bez instalacji, umieszczaj go w aplikacji, a nawet steruj za pomocą JavaScriptu

Możesz użyć i dostosować WordPress umieszczony na stronie playground.wordpress.net. Jest brak infrastruktury w chmurze i możliwość opłacania kosztów, ponieważ witryna funkcjonuje całkowicie w przeglądarce – nikt inny nie może jej otworzyć. Jest ona też tymczasowa. Gdy tylko odświeżenie strony – zniknie. Możesz pobrać tyle witryn, ile chcesz prototypowanie, testowanie wtyczek i szybkie analizowanie pomysłów.

Możesz ich nawet używać do testowania kodu w różnych środowiskach za pomocą wbudowanego przełącznika wersji PHP i WordPressa:

stronę phpinfo.

WordPress Playground to zupełnie nowy sposób korzystania z WordPressa. Pełną moc urządzenia odblokuje się jednak tylko wtedy, gdy umieścisz go w aplikacji. Prostym sposobem jest umieszczenie WordPress Playground w <iframe> i skonfiguruj go za pomocą interfejs API parametrów zapytań. Na tym polega oficjalna prezentacja co robi. Gdy wybierzesz na przykład parametr Motyw wisiorka i Wtyczka Coblocks, osadzony element iframe zostanie zmieniony tak, aby wskazywał https://playground.wordpress.net/?theme=pendant&amp;plugin=coblocks.

Prezentacja WordPress Playground.

Korzystanie z elementu iframe jest proste, ale ogranicza się też tylko do podstawowej opcji konfiguracji. Jest jeszcze więcej rozwiązań, zaawansowany interfejs API.

Klient JavaScript WordPress Playground zapewnia pełną kontrolę nad umieszczoną witryną

Możesz kontrolować całą witrynę WordPress, w tym system plików i język PHP, za pomocą pełnego interfejsu API dostępnego w @wp-playground/client npm pakietu SDK. Poniższy przykład pokazuje, jak z niego korzystać: interaktywny samouczek , gdzie znajdziesz więcej przykładów:

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 języka WebAssembly w języku PHP nawet bez WordPressa

WordPress Playground nie jest monolitem. Opublikowano WebAssembly PHP niezależnie od WordPressa. Możesz go używać oddzielnie. W przypadku internetu możesz użyć npm @php-wasm/web zoptymalizowane pod kątem niewielkiego pakietu, a w Node.js na stronie @php-wasm/node, która zawiera więcej rozszerzeń PHP. Adam użył tego pierwszego, aby dodać interaktywne fragmenty kodu PHP do tego samouczka dotyczącego WP_HTML_Tag_Processor. Oto jak go używać:

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 tym momencie zastanawiasz się, jak to w ogóle działa? To świetne pytanie. Przyjrzyjmy się elementom wewnętrznym i sprawdźmy. Zapnij pasy!

Jako podstawę działania znajdują się interfejsy WebAssembly PHP, translator SQL i serwer w przeglądarce

Język PHP działa jako plik binarny WebAssembly

PHP działa nie tylko w przeglądarce. Środowisko do WordPressa opracował dedykowany potok aby utworzyć tłumacza PHP do WebAssembly. za pomocą funkcji Emscripten. Budowanie wanilii w PHP nie jest zbyt skomplikowane – wystarczy tutaj można dostosować podpis funkcji, wymuszanie użycia zmiennej konfiguracji, i stosuję kilka małych plam. Oto jak możesz utworzyć go 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

Jednak kompilacje waniliowe w PHP nie są zbyt przydatne w przeglądarce. Jako serwer język PHP nie ma interfejsu API JavaScript do przekazywania treści żądania, lub wypełnij strumień php://stdin. W przypadku WordPressa Playground trzeba było od podstaw. Plik binarny WebAssembly ma komponent specjalny moduł PHP API, napisane w alfabecie C, a klasa JavaScript w języku PHP, która ujawnia metody takie jak writeFile() czy run().

Ponieważ każda wersja PHP jest tylko statycznym plikiem .wasm, wersja PHP to dość nudne. Informuje jedynie przeglądarkę, że ma pobrać dane, przykład: php_7_3.wasm zamiast, powiedz: php_8_2.wasm.

Baza danych jest obsługiwana przez warstwę translacji SQL

WordPress wymaga MySQL. Nie ma jednak wersji MySQL w wersji WebAssembly można uruchomić w przeglądarce. WordPress Playground wysyła więc kod PHP z parą klucz-wartość natywny sterownik SQLite dzięki SQLite.

Ale jak WordPress może działać w innej bazie danych?

Sceny zza kulis Integracja z bazą danych SQLite wtyczka przechwytuje wszystkie zapytania MySQL i przepisuje je w dialekcie SQLite. 2.0 statki premierowe nową warstwę tłumaczenia uwzględniającą informacje z programu WordPress Playground który pozwala WordPressowi w SQLite przejść 99% pakietu testów jednostkowych WordPress.

Serwer WWW znajduje się w przeglądarce

W zwykłym WordPressze kliknięcie linku, np. Blog, spowoduje uruchomienie żądania HTTP. do zdalnego backendu, aby pobrać stronę blog. Jednak WordPress Playground nie ma zdalnego backendu. Zawiera Skrypt service worker który przechwytuje wszystkie żądania wychodzące i przekazuje do interfejsu PHP w przeglądarce instancja działająca w oddzielnym Web Worker.

Diagram procesu rozpoczynający się od elementu iframe wskazującego zasób wp-admin, wywołania, które są przechwytywane przez skrypt service worker, renderowane w wątku instancji roboczej i ostatecznie przetłumaczone na odpowiedź WordPress przez serwer w przeglądarce.

Sieć jest obsługiwana przez WebSockets

Jeśli chodzi o kontakty, programy WebAssembly są ograniczone do wywoływania API JavaScript. Stanowi to zabezpieczenie, ale również stanowi wyzwanie. Jak obsługuje niskopoziomowy, synchroniczny kod sieciowy używany przez język PHP asynchronicznych interfejsów API wysokiego poziomu w JavaScript?

W przypadku WordPressa Playground odpowiedź dotyczy serwera proxy WebSocket to TCP, Asyncify i wprowadzanie precyzyjnych poprawek Wewnętrzne dane PHP, np. php_select. To skomplikowana metoda, ale za to otrzymasz nagrodę. Kompilacja PHP kierowana na Node.js może żądać internetowych interfejsów API, instalować pakiety kompozytorskie nawet połączyć się z serwerem MySQL.

WordPress można stosować w jeszcze większej liczbie miejsc niż przeglądarka

WordPress może teraz działać w środowisku WebAssembly, więc można go również uruchomić w środowisku Node.js to ten sam silnik V8! Dzięki StackBlitz możesz też Node.js bezpośrednio w przeglądarce, co oznacza, że możesz uruchamiać WordPress i PHP. skompilowana do WebAssembly wykonywana w Node.js, który jest także skompilowany do Uruchomiono WebAssembly w przeglądarce. Popularność WebAssembly rośnie również w przestrzeni bezserwerowej, a w branży który w przyszłości mógłby działać również w tej infrastrukturze.

W przyszłości mogą pojawić się interaktywne i umożliwiające współpracę aplikacje WordPress, które nie wymagają konfiguracji

Wyobraź sobie, że możesz przejść od razu do edytora kodu, od razu po skonfigurowaniu urządzenia. Możesz nawet udostępnić aby rozpocząć wieloosobową sesję edycji, np. w Dokumentach Google. oraz Wystarczy jedno kliknięcie, aby wdrożyć w różnych usługach hostingowych – bez konieczności instalowania czegokolwiek. lokalnie!

A to tylko rzut oka! Możemy zobaczyć interaktywne samouczki, wersje demonstracyjne wtyczek na żywo, testowania wersji, zdecentralizowanego WordPressa na serwerach brzegowych, a nawet wszystkie wtyczki w telefonie.

Przyszłość jest ekscytująca i możesz być jej częścią! Twoje pomysły i publikowane treści to koncepcja WordPressa Playground. Odwiedź repozytorium GitHub, powiedz Cześć na #meta-playground Kanał WordPress.org na Slacku skontaktować się z Adamem pod adresem adam@adamziel.com.