 Ja, hallo. Willkommen bei dem WordPress-Wollpartinger. Untertitel, wie mich Javascript von PAP ausführen kann. Oder vielleicht auch, warum möchte ich das überhaupt? Warum ist es eine gute Idee? Ich bin Frank, ich mache ganz viel mit WordPress, denn das kann man nachlesen. Da müssen wir uns nicht lange aufhalten. Man sieht, dass die Folien der Zugfahrt von der anderen Konferenz, auf der ich in der Woche davor war, mal durchgeguckt hatte, mein Sitznachbar guckte etwas irritiert, anhand dessen, dass ich mir so überlegt hatte, wie wir das hier heute aufziehen wollen. Ich weiß gar nicht, was ein Wallpartinger ist. Genau, ist so ein Fabelwesen, so ein Mischwesen, wie man es aus schlechten Horrorfilmen herkennt. Die Abbildung hier ist wie der Herr Dürer aus Nürnberg sich das vorgestellt hat, vor längerer Zeit mal. Gibt es in verschiedenen Ausprägungen? Nie hat es noch irgendjemand gesehen. Ich wollte eigentlich noch so klein aus Stoff haben, aber dann hat der Simon mir auch gesagt, so kleine T-Shirts hatte er auch nicht. Also wäre es ja nur ein Wallpartinger gewesen und kein WordPress-Wollpartinger. Der Wallpartinger ist ein Mischwesen. Das Traf ist eigentlich ganz gut, als ich nach einem Session-Titel gesucht hatte, weil es darum geht, PRP und Javascript zu verbinden. Da haben wir ja auch irgendwie so eine Art Mischwesen, mit dem wir dann da arbeiten können. Wir brauchen dazu ein paar Sachen. Also klar, PRP sollte jeder kennen. PRP ist das, wo WordPress drin gebaut ist. Wo drin wir uns bewegen, wenn WordPress erweitern. Muss ich, glaube ich, nicht groß was zu erzählen. Wem sagt alles V8 was? V8 ist eine Javascript-Engine, die meinten. Kommt von Google. Ist im Chrome-Browse drinnen, kann man aber auch so installieren, dass ich auf Server-Seite... Huch! Auf Server-Seite an der Kommandezeite zum Beispiel Javascript ausführen kann. Das ist eins der bestimmten Sachen, die wir benötigen für das, was wir dann vorhaben. Peckel ist eine Erweiterung oder die Code-Librärie für PRP-Extensions, die in C geschrieben ist. Wir sind in C++. Also gehen wir jetzt zu peer, was hier in PRP geschrieben ist, eine Erweiterung beinhaltet. Das sind Dinge, da brauchen wir in der Regel Routzugang. Das sind die Dinge, die wir in der Regel Routzugang haben. Da brauchen wir in der Regel Routzugang. Da muss man selber übersetzen oder ein Hoster, den man gut zureden kann, dass man das so was machen möchte. Das ist meist alle Managed-Angebote, die ich persönlich kenne, fallen da zum Beispiel raus. Da kann man in der Regel sowas nicht noch installiert kriegen. Also außer man hat vielleicht so den guten Draht zu seinem Hoster mit mach mal bitte, bitte und für mich. Aber das in der Regel schließt das mit Managed-System eigentlich aus. Das ist furcht, einflößend, den guten, den wir uns da so auseinandersetzen müssen. Jetzt habe ich gar das Problem, ich sehe nicht die folgende Folie. Das ist jetzt ein bisschen blöd. Gucken wir mal kurz. Warum möchte ich das eigentlich machen? Oder was ist eigentlich der Grundgedanke dabei? Warum will ich denn eigentlich ja, was könnte ich machen, wenn ich in PRP programmieren kann auf meiner Serverseite. Und eine der Gedanken, was wir auch tatsächlich bei einem Projekt mal hatten, da werden wir uns ja noch ein bisschen weiter ausholen. Also der gute Stesie, der da oben sitzt, ist eigentlich einer der Maintainer von V8.js. Der hat mir das ganz für gute Manaal gebracht, wann war das? DefObscamp letztes Jahr, ne? Genau, da hat er das mal präsentiert. Und da sind wir dann schlagartig so ein paar Sachen eingefallen, was man da eigentlich schönes mitmachen könnte. Ab und zu hat man mal vielleicht nicht jeder von euch, aber der eine oder andere, möglicherweise mal so das verlangen gehabt. Es wäre irgendwie schön, wenn ich mal jetzt irgendwie so ein Makroskript irgendwas Sprache hätte, mit dem meine Benutzer in meiner Seite irgendwie was steuern könnten. Der erste Gedanke wäre, den baue ich mir mal was. Aber das, was wir entwickeln, ist ja irgendwie doch sind ein bisschen sehr zeitaufwendig und wie gepflegt werden und debackt werden. Und das naheliegendste, wie gesagt, war mir auch eigentlich so nicht klar, auch erst nach der Session. Warum denn nicht Javascript? Haben wir? Können ganz viele. Warum soll ich nicht Javascript nehmen? Und es quasi als so eine Art Makro oder Skriptsprache um benutzerdefinierten Code ausführen zu können. Andersrum, PHP kann ich ja nicht nehmen. Wenn meine Anwender mir PHP-Code liefern, dann kriege ich ja nicht sauber gekapselt, dass ich nicht irgendwie mein WordPress komplett kaputt spiele. Also, ich werde nicht so ohne nicht mit vertretbarem Aufwand sagen wir es mal so. Sicherlich könnte man da was bauen, aber das möchte man eigentlich nicht. Aber wenn wir eine andere Sprache haben, die wir ausführen können, die aber schon ganz viele Leute auch beherrschen, haben wir ja durchaus was gewonnen. Und das Bauen ist auch gar nicht so wahnsinnig kompliziert. Ich will das jetzt auch gar nicht groß zeigen. Es gibt zwei Sachen, die man braucht. Es hat einmal das V8, was man natürlich runterladen kann. Links gibt es dann nochmal extra zusammen mit den Folien alles zum runterladen. Das ist auch vernünftig dokumentiert, wie man das macht, weil man unter Umständen es nicht mit jeder Distribution hinbekommt. Ich habe tatsächlich mal auf einer aktuellen Ubuntu Ernsterecht Schwierigkeiten gehabt. Ich muss auch zugeben, ich habe jetzt schon wieder ein paar Monate nicht versucht, ob das noch so ist. Auf der letzten vorherigen LTS war das aber ganz problemlos und entsprach wirklich komplett die Dokumentation. Gleiches gilt dann für das V8.js, was die Erweiterung ist, damit PAP, also das ist die Pekkel extension, damit wir PAP dazu bringen können, was wir dort in Javas gibt in der Präter zur Verfügung haben, auf Serverseite. Das ist inzwischen auch relativ gut dokumentiert auf der GitHub-Seite, auch die API, wie man da mit dem ganzen Ding reden kann. Alles ist ganz hübsch. Und das das V8.js selbst ist dann auch relativ unproblematisch zu bauen. Die gibt es ja alles online, ja, natürlich. Im Zweifelsfall bei staudepunkt.net auf meiner Seite. Werden ja sonst auch immer noch verlinkt bei den Videos auf WordPress TV. Es werden ja alle Vorträge hier aufgezeichnet und landen anschließend auf WordPress TV. Da werden in der Regel dann auch die Folien, wenn sie online sind von den Speakers mit verlinkt. Wichtig ist natürlich noch in seiner PAPini nicht zu vergessen, dann die V8.js Extension auch zu aktivieren. Sonst hat man sie schlicht nicht zur Verfügung. Und dann haben wir ein interessantes Objekt, das nennt sich V8.js. Das können wir uns holen, oder drinnen können wir mal so eben Javas gebaut führen. So ist das aller einfachste Beispiel, mit dem das auch mal testen kann. Das sind so die Executes-Dring-Methode, die man von Javascript reinpumpt. Also der Einfachheit halber habe ich jetzt in den Beispielen, die ich hier habe, ist immer nur direkt in der Kommando-Zeile gemacht und nicht noch in der Screenshot von dem Browser. Wäre ja wieder größer geworden, hätte mehr Platz weggenommen. Funktioniert aber natürlich dann genauso PAP an der Stelle. Problem oder was passiert denn aber dann wenn ich jetzt im Javascript Fehler habe. Gott sei Dank wirft die V8.js-Extension in dem Fall der Exception, die wir abfahren können. Die wir auch abfahren müssen, sonst haben wir ernsthaft das Problem. Und wenn der Grundgedanke ist warum ich das machen möchte, heißt das ja, ich kriege fremden Code, den ich ausführen möchte. Also das ist wo ich mich damit angefangen habe zu beschäftigen, hat immer die Intention gewesen. Ich möchte im Prinzip benutzerdefinierten Code in meiner Umgebung ausführen. Das heißt ich kann mich nicht darauf verlassen, dass das sauber ist. Ich kann mich auch nicht darauf verlassen, dass er keine Fehler enthält. Also muss ich zwingend sowas abfangen. Zum Glück kann ich das alles abfangen. Was noch viel wichtiger ist, ich möchte mir fremden, mir unbekannten Code ausführen. Ich kann ihn einschränken. Also jetzt habe ich eine Folie übersprungen. Also erstmal hier nochmal das Beispiel um entsprechend die exception im Fehlerfall abzufangen. Also hier gebe ich jetzt nur die Message aus im Klartext. Ich kann natürlich dann über das Catch auf die sonstigen Informationen des Fehlers zugreifen. So, bei der Überlegung, ich möchte fremden, mir unbekannten Code ausführen. Gibt es zwei Dinge, die ich am meisten interessieren. Nämlich, was macht das mit meinen Ressourcen? Nämlich, was macht das mit meinem Speicher und was macht das eigentlich mit meiner Laufzeit? Zum Glück kann ich dem Javascript an der Stelle für beides jeweils Timeouts mitgeben. Also wir haben hier ein Beispiel, wo ich mal ein Timeout auf 500 Millisekunden setze und im Prinzip im Javascript versuche, mit einem Flüchtlingsleifer auszuführen, die mir dann nach 500 Millisekunden mit einer Exception abgebrochen wird. Mit dem Code ist jedem soweit klar, sonst einfach reingretchen an der Stelle. Ja, es ist alles, soll ja nur mal so zum Anfüttern sein, dass es sowas gibt, was man da vielleicht mitmachen kann. Gleiches gilt für den Speicher Bedarf. Hier haben wir ein Beispiel, wo ich einfach auf 100.000 bytes das Memo-Rule mitgesetzt habe und versuche, den Speicher zu füllen. Auch dort wird abgebrochen. Die beiden wichtigsten Sachen, einen Hauptspeicher und meine CPU-Zeit habe ich soweit unter Kontrolle, dass ich im Zweifelsfall den Fremdcode abbrechen kann. Wenn mein die Frage des Kontextes sowas da reinmacht oder halt Fehler baut, aus Versehen meine Endloschleife gebaut hat, die unendlich läuft und auch noch viel Speicher, es ist höchstens interessant zu sehen, was zuerst greift, das Speicher-Limit oder das Zeit-Limit. Es wird gut, dass ich jetzt Javascript ausführen kann, aber was nutzt mehr der? Das muss ich auf meine Umgebung zugreifen können. In unserem Fall wäre es ein Wordpress zum Beispiel und muss also es schaffen Teile meiner Umgebung, Teile meiner Plug-in API oder welchem Bereich auch immer ich jetzt skriptbar machen möchte. Den muss ich nun dem Javascript zur Verfügung stellen, die ich von dort aus benutzen kann. Und da kann man zum Beispiel mit add diesen Javascript-Objekt mit PHP-Funktion hinzufügen und ich anschließend im Javascript-Code ausführen kann. Also standardmäßig ist das im Javascript dann dieses PHP-Objekt das kann man auch umbinden, es darf auch anders heißen ist einer der Konstruktorparameter von DMV8js. Das habe ich gerade gesagt, also PHP.Ed meint in dem Fall also die Funktion die war da oben in Zeile 4 in PHP definiert wurde die führe ich aber in dem Fall vom Javascript aus aus. Wie man sieht unten an der Konsolausgabe scheint das ja auch zu funktionieren. Gleiches geht natürlich dann auch mit Klassen. Da ist dann nur der Beispielcode so erstmal ein kleines bisschen länger. Also ich mache halt im PHP eine Klasse, gibt ja noch eine Methode mit sage dann in der Zeile 13 ist das wie das quasi die wie diese PHP-Klasse dann im Javascript heißen soll damit ich auf sie zugeseifen kann und habe dann halt im Javascript so ein Konstrukt die fold Name für das PHP-Objekt also PHP-Punkt Klassenname, Punkt, eine Variabe beziehungsweise die Methode die ich aufrufe. Das wäre so die erst die grobe Einführung wie ich das überhaupt machen kann. Jetzt habe ich das Problem das was ich tatsächlich eingebaut habe ich leider nicht zeigen darf ist manchmal so bei Projekten ich würde aber viel lieber eigentlich mal so in der um mich mit der Runde hier auch austauschen was ihr euch vorstellen könntet für Anwendungs-Szenarien und mir persönlich fällt nicht so wahnsinnig viel ein also genau genommen sind wir bis jetzt 2 eingefallen wie gesagt ich fand die Technik total spannend die ich mit der Runde konstruiert bekommen habe ich habe auch 2 Szenarien die ich gleich beschreiben kann auch für mich so identifiziert und ich würde mich sehr gerne mit euch jetzt auch nochmal austauschen ob euch noch andere Sachen dazu einfallen also Szenario 1 wäre für mich etwas wo einfach ein Konfigurationsunterweis unglaublich komplex wäre also mit Hunderten oder Aberhunderten von Schaltern und Radio-Buttons wo man sich was zusammenklicken kann dass man das alternativ quasi sich zusammen programmieren kann als Anwender ob das nun eine Einstellung im Backend ist wie das Press aussieht oder komplexere Einstellungen von irgendeiner Art von Plugin also wo es einfach an Interface unglaublich kompliziert wäre wo es für die Leute die programmieren können sich ihre Einstellung quasi per Javascript zusammenzubauen das andere wo wir es auch tatsächlich mal benutzt haben wäre Import von Sachen wir haben überlegen wie viel kann ich denn sagen es gibt ein Projekt da werden Benutzerdaten importiert und diese Benutzerdaten also es sind große Mengen an Benutzerdaten die da reinkommen sie kommen von unterschiedlichen Anwendern oder Mandanten wie immer man das nennen mag also ich habe unterschiedliche WordPress Benutzer die ihrerseits Userdaten importieren möchten wo wir nicht möchten es für jeden unserer Kunden die Anfrage kommt mit ja wir haben zwar Daten aber die passen nicht in das Format wie ihr es haben möchtet aber passt das mal an oder passt mal euren Import an gleichzeitig haben die nicht unbedingt jemanden der es programmieren kann oder sie haben Exporter die sie nicht verändern können in ihrer Software die den Export erstellt was aber geht ist das man sagt ja wir stellen euch aber eine Schnittstelle zur Verfügung die wir quasi als Callback für jeden Datensatz beim Import aufrufen und da könnt ihr doch mal Javascript Code und quasi das was wir von euch bekommen könnt Javascript Code für den ihr euch ein Programmierer soht auf unseren Server noch mal eure Daten verändern bevor wir sie anschließend übernehmen und tatsächlich zum Beispiel die Datenbank importieren also das sind so die zwei Szenarien die mir tatsächlich real eingefallen sind ich habe auch lange überlegt ob ich ein Beispielplug inbauen kann diese waren mir aber alle dann letztendlich zu trivial die mir eingefallen sind weil irgendwie so sagt mit per Javascript Code fürs Backend mal eine Hintergrundfarbe umstellen nur dass man ja hat mich dann auch nicht so ganz überzeugt also wenn da jemand noch eine Idee hätte was man da zum Beispiel als einfaches Demo Plug inbauen könnte bitte gerne gerne mal Bescheid sagen denke ich schon länger drüber nach würde ich auch gerne mal bauen dass man das auch mal ins Repository kriegt dass man da eine gute einfache Einführung hat einer von euch denn Ideen oder Vorstellungen wo man sowas machen könnte hoffentlich ich muss das komplett wiederholen oh mein Gott das kriege ich doch nicht mehr zusammen also Zusammenfassung warum machst du es nicht über Hooks und Filter oder wie hast du das falsch verstanden also du meinst ein Filter der es quasi dann bereitstellt damit ich mich per Javascript dran hängen kann oder wolltest du jetzt komplett auf das Javascript verzichten ja also so rum also nochmal Zusammenfassung für die Aufnahme jetzt habe ich es verstanden Vorteil wäre, dass man nicht bei Javascript Code den man hätte nicht per Ajax das hinschicken müsste um es dadurch ein WordPress Filter zu jagen und es wieder zurückzuholen funktioniert aber natürlich nur wenn ich den Javascript Code auf Serverseite habe ein Client irgendwas zusammen basteln muss aber ja hinten rum den Javascript Code dadurch quasi über ein Filter durch zu jagen wäre eine Anwendung dafür ja, durchaus haben wir hier eigentlich ein Saal Mikronee ja kriegen wir auch alles irgendwie hin andere Ideen oder Fragen also die Frage ist wie kriege ich eigentlich mein Javascript Code in dem konkreten Fall war es tatsächlich so dass es einfach ein Textfeld gab bzw. ein File Upload wo die die über die Anwender ihre Datei halt hochladen können also ja, ich muss es halt irgendwie übertragen auf den Server und ist da irgendwo als File oder in der Datenbank gespeichert habe also ich brauche es auf Serverseite damit ich es da dann ausführen kann was machen wir jetzt mit Baukasten dass ich mir auch ein Javascript Baukasten irgendwo im Netz habe mir da was Javascript-mäßiges zusammenklicken also es funktioniert nur begrenzt der Javascript wird ja auf Serverseite ausgeführt im Kontext des PHP-Prozesses du hast natürlich jetzt keine Zugabe auf irgendwelche browser-spezifischen Sachen ja, du könntest auch das kleinzeitig erzeugen an den Javascript Code an den Server schicken um ihn da ausführen zu lassen wenn mir dann grad nicht ganz klar ist ob ich das schon nachvollziehen oder selbst nicht also es ist sicherlich nicht etwas was wo man permanent für eine Anwendung hat da bin ich mir ganz sicher ja aber wie es gibt durchaus Fälle ich hatte jetzt tatsächlich ein wobei ich in dem Prinzip erst hatte als ich vorher die Lösung kannte dank Stesi aber wie ich das verstanden habe macht ihr das ja im großen Stil, oder? wie ist die kurze Zusammenfassung fürs Video ja, ihr benutzt es auch für Daten im größeren Stil, aber nicht im WordPress-Kontext und du hast schon viele tolle Sachen gesehen die sowas auch nutzen zum Beispiel Reaktanwendung um Javascript Code auf Serverseite vorzubereiten bevor man ihn auf langsame Kleins ausliefert was okay von der Zusammenfassung andere Ideen oder Vorschläge oder Wünsche Denksportaufgabe wie viel Zeit haben wir denn noch zum Denken ah, passig geht schon noch geht noch, noch ja, also ich hatte jetzt gerne was aus den Hut gezaubert hat leider nicht mehr so, so ganz geklappt wie gesagt, ich tue mich da auch äußerst schwer, wirklich mal ein brauchbares Beispiel Placken vorzubereiten aber es steht nach wie vor auf der Liste, aber ich das auch gerne mal hätte ich sehe schon, ihr müsst alle nochmal drüber nachdenken wo man so was seltsames abgefahren ist wirklich benutzen kann ja, also wenn jetzt keiner mehr eine Idee hat dann würde ich sagen, vorgezogen eine Kaffeepause oder wir kommen nochmal so im kleinen, direkt ins Gespräch was man da mal machen kann und dann vielleicht ja, vielleicht mal gucken im Herbst in Frankfurt weiter da ja dann eine konkrete Idee da ist doch eine Meldung bitte sagt mir gar nix nee, sagt mir überhaupt nix können wir ja sonst nachher vielleicht nochmal kurz darfst du es mir gerne mal kurz zeigen spannend ja, dann würde ich es vorschlagen wir treffen uns alle im Herbst und dann gucken wir mal, wer das die beste Demo-Anwendung hat wie wäre das denn wir machen da irgendwie so eine Meta-Session mit JS8-Demo-Time reiche ich auch allen bei bei Simon wer macht mit nee, gut, jetzt im Ernst dann hoffe ich dass ich euch vielleicht nochmal einen Denkanstoß geben konnte vielleicht fehlt euch ja tatsächlich nochmal eine Nutzung ein wir haben mir schon gedacht dass der noch keiner wirklich was mitgemacht hat der war mal abgesehen deshalb wollte ich da jetzt auch nicht zu tief man hätte natürlich noch einen ganzen Sackfall an Demos dann nochmal zeigen können aber letzten End ist auch immer eine Source-Code der auf dem Beamer steht ich gebe mir Mühe, dass ich für das nächste Mal eine andere Art von Pluck-In gefunden habe aber es würde mich sehr freuen wenn auch jemand anderes tatsächlich mal was macht und wie man sich da auch mal austauschen kann sonst reicht es mir wenn ich euch einen Denkan-Satz mitgegeben habe dass man sowas auch machen kann dann entlass ich euch jetzt verfrüht zum Kaffee