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.