 Thank you and Sometimes all you need is a little nudge from a colleague to achieve amazing things that you've never dreamed about and then a lot of support your from your family and because unexpected things happen and like we just changed the room from Trilism to this big stage and This is how I get involved with WordPress playground. I Stopped working developing a little Application and then started contributing to WordPress playground from time to time So in this talk, I will Talk about WordPress playground what it is what you can do with it and The learnings that I got from Adam who is leading this open-source project So let's see What WordPress playground is and people Will understand better seeing this video. I have a lot of screencast. So it's one click and you can Spin up a WordPress instance running in your browser Without servers no database everything in your browser This is possible. Thanks to WebAssembly and JavaScript. So PHP is running in JavaScript It's Normal WordPress that we already know but you can see how much time we saved You didn't need to set up a local environment. You didn't need to register anywhere You just open the website and it starts running. You are you are already log it in so you can start typing and The cool thing is that as I said WordPress playground runs directly in your browser Doesn't matter which one you prefer but we can improve this description to make it more general and and Actually, what was playground runs on any device with JavaScript, which is maybe no Yes in a server or your laptop Or your mobile phone Tablet, so as I said you can try it now is Playground dot WordPress net and it will spin up the WordPress instance But this is just one of the applications we have more It's kind of an ecosystem of applications that people is developing on top of it the key part is PHP WebAssembly and that's kind of the herd the core that runs the playground around that we have web API written in JavaScript and node and even Ella created a mobile application So I will showcase all these applications and some of those use cases Because playground is not just for developers. Yes, normal users can learn showcase or test and You can develop WordPress sites with the playground and also build and extend the playground itself At the end we will close the talk out talking about some future possible applications that we could do So for the use case of learning WordPress I would like that you go back on time and Remind remind what was the steps you took How excited you were out learning new technology and then maybe the hassle to set up the local environment Installing Docker or my square or whatever the application you are using so With the playground learn It's instant and you can explore all the ecosystem the plugins and themes We have the query API in that URL You can type theme and the name of a theme and it will out install in that instance the same for other variables like Plugging and you can put it multiple plugins. So at the end you will have a long URL That will set up a custom WordPress site with those plugins and themes Yeah, here you can see also we have a settings Button where you can change the PHP and WordPress version By default The playground Runs in a temporary state. So if you refresh all the post and pages you created or plugins if you installed someone Manually it will be gone, but you can set up Permanently the option on the settings to keep it there or even you can run your WordPress from your computer Also, you can export the site and import it to continue later So a little bit how it works under the hood is this is a source code of C program and It's compiled with GCC At the end we have been binary and we can run it in our computer, right? so with weather assemblies the same thing but it will run in JavaScript and The compiler is mscripten So to change the PHP versions we compile we have a dockery image that compiles the source code of PHP Generating all the web assembly files needed each one for each PHP version to accept As I said, we don't need a database because we if we are using mySQL we would need to Compile it to have assembly to use it so Adam decided to use a SQLite and run it Directly in PHP so another use case for learning is Learn through writing code directly in the browser and executing PHP in the browser Here is the this plugin that creates a block Where you can embed in your website and make a tutorial With a predefined PHP that the user can play and change and execute it and see how it changes the result Here is a small demo Let me see So this is the block and the users can run that PHP code Currently it runs only PHP Plain PHP and if you need to run WordPress functions, you need to import it The library so the users can change and see The output of it so it helps people learning from any device tablets iPhones, whatever for showcase Imagine you have a plugin and you can embed it in your Website so the users can try your plugin directly and you are not afraid that they will get in Into the server because there is no server. It's executing in their laptops. So its user has a different instance Here is another demo. This is a real use cases that people is using So you can try just from this from used and See how it works for testing we have the This website where you can put a link or the number of the pull request and try The code executing in your browser no need to download the repository or compile it anything So it would be handy that it It's automatically generated in like about but currently we need to write it in the description But for testing people will click it and test your PR This is another cool application that Alex Kirk created and it's working in core to help Translators to get context. So they will run the plugin that needs to be translated It will be installed it will be localized for that Language and then in the website you can see what's already translated and what's not and Commit all the translations That currently is in yellow and then push it and synchronize it to core So translators will have all the context because they are seeing the real web page Yeah, here is synchronizing to core another use case is WordPress development So this is WP now. This is the tiny tool that we've created From my team in the wordpress.com and it was a six-week project and It runs in the command line interface so You can install it globally in your machine and Then you can spin up go to a blog theme or Plugging and then run WP now start and it will run a WordPress instance with That plug-in or thing installed under the hood In a home directory we have all the WP content folder In a custom directory, so it's persistent in your laptop and a cool application of the same Tool is that you can run it in code spaces and you don't need to set up anything any file like you can go any You'd have repository that it's a plug-in or theme and then Run WP now start Like install it and run it that we now start and you will test that the repository and play with it with you'd have code spaces and We've created this to improve the experience for developers and avoiding installing other third-party tools like Docker that you need some listens and the funny thing is that for example Luis around took that application and Use it in a different way that we've never thought about so in Workshop in work camp Europe this year. He show how creating interactive interactivity Blocks and Define it in the package Jason How we'll run WordPress scripts and also WP now at the same command and start so developers just need to John start and that's it. They don't even need to install it globally WP now Making it much easier any development Daniel that he's around here participated in kind of hackathon this year and created With Adam and more people the extension of visual studio code It was the first development to run it locally and now it's the user interface of WP now So it runs under the hood the same code You can install it. It's if you are using visual studio code go to extension search for WordPress playground install it and you will have a an icon on the left and if you open a plugin theme or a whole's WordPress site You can click on the WordPress icon and then click start server and it will automatically start the WordPress instance So as I said, it's equivalent to running WP now start, but it's the user interface and You can change the PHP version And WordPress version so you can test your plan or theme in different environments For building I won't I mean is extending the playground itself in that different ways So Because you can run it in any JavaScript Device in any device that runs JavaScript You can use playground as a mobile app framework like it would be for example react native or Ionic So Ella created this application It's block notes And it's running a WordPress instance in your mobile phone as a native application the thing is It saves every page or every node As a local file and it synchronized with the iCloud So it's just kind of an iFrame that loads HTML and JavaScript for locally And then out installs some plugin That's what I imagine like I don't have the details, but out installs a plugin That the change the UI of WordPress to look it like hiding all the options the user options and the front end Making showing only the admin side so you can experience the All the blocks and you can move those nodes to different folders Here we can see that the nodes are saved In your local phone and synchronized with iCloud So we can extend it in different ways One of those are using the JavaScript API And it would be like All the playground logic lives in npm packages and you can install it in your project imported But this is like really complicated way to extend but You have all the freedom, right? So a better way is using blueprints and this avoids you The hassle to code in like line by line all the logic and define it as a JSON object And We have steps where you can define installing a plugin installing a theme And run some PHP logic if you need and even you can access the virtual file system These blueprints you can run it using the JavaScript API or In the same website playground warpes.net you can add the hash and the JSON Of the blueprint in the same URL and it will get it and run step by step so the three Ways to extend warpes playground is using the query API just adding the theme or plugin in the URL And it will outload that so it's really easy The blueprints that it's the JSON object defining step by step some predefined logic Or the JavaScript API So warpes playground is powered by web assembly But you don't need to code in web assembly. We've seen that you just need a little maybe changing the URL or Creating some blueprint or using JavaScript So don't be afraid that oh, I'm not a web assembly developer. I will not be able to extend it not at all So the last section is the future and the playground has vision and road maps, but Some of the vision points that I talked before This is my personal view like my experience and What I can see that it's missing or I would like if I would have a magic wand And this is in the future, but already exists because one person developed a chrome extension that changed the URL Allowing people to try any plugin on theme. So if you install this chrome extension Uh, you can go to the plugins or theme directory and try anything So because I wonder how you try plugins. Maybe you install it in production Or maybe you create a staging site, but now you can go to the directory and run it I guess that maybe this will be Incorporated in core and you will not need a chrome extension to do it So for themes the same you pick one And the little button appears click there That's it. You try the theme so everybody's welcome to develop but You can share your feedback and add new ideas or reports and backs so here Elliot added an idea and this week I started to create a kind of prototype To make it easier to write blueprints so I created a text editor kind of Where you can run the json object and it will reload the iframe automatically to represent All you need so you we can see that we have a login step here for example And if you change the username then the iframe is not logged and if you put the right username You are logged in automatically So it's really easy to do like this is like three lines of clean html and javascript. That's it I would like to keep working on this and I imagine this being kind of a scratch thing that you can drag and drop Blocks so people that it's afraid of writing json Can play it and create Things with the world's playground another vision that I have is Probably we will have Kind of a complete idea in the browser where you can write the code access the virtual file system of web assembly and change the php code and That will be your local environment, but it will be running in your local but kind of remote in the browser Another would be like we have the pull requests everywhere for Gutenberg, but I imagine that we will create a bot that you will preview any pull requests or any repository from warpress in your project or one last Application possible application would be running end-to-end testing in Did have actions for example because it's easy And you will not need to run a docker without otherwise. It's Just kind of command and that's it So I see that warpress playground is an emerging ecosystem of new tools and applications And there are a ton of opportunity to create new things so I explained all these different applications that currently exist But this is our just pieces That you can use And I hope that we will have fun building the future playground together If you are interested you can join the slack channel meta playground in the make slack And here are the repositories of warpress playground and playground tools Thank you if anybody Have a question happy to answer here or later In the home So looking at this one of the use cases that jumps out to me most apart from the ease of onboarding folks who contributor days with this to the project is also There's a lot of schools With middle schools students high school students that use chrome bucks that up to this point have been able to do any Sort of local word rest development without installing linux in chrome os And all of a sudden this is going to open up a lot more possibility of learning Wordpress and software development earlier in the cycle instead of other Platform so i'm just really excited to see how This is going to grow and mature and how it's going to integrate with like the core training team Working up lesson plans for this in the educational system No real question just a comment and that sounds super cool Yeah, I totally agree and thank you for your question and comment that uh, yeah, this enable Anybody to run wordpress and you don't need a machine that it's powerful enough to run docker Or any other local environment you can try it instantly just accessing a website So yeah, like you cannot develop right now from your phone or your iPad but with playground you can And that's what's changing and making wordpress more accessible to more people Thanks for all this work. This is awesome. Uh, the blueprints api in particular looks really cool and really powerful I'm curious if you can talk a little bit more about what sort of things you can control through that And like how is that actually implemented? Is that something that we could use those same blueprints on like full standard? provisioned wordpress instances As like a standard format for creating new wordpress sites so the question is about blueprints and Yeah, the idea of blueprints is defining a logic that will be executed Before starting the wordpress site so you can Make it repost reproduce the same behavior each time, right? Um But the possibilities are endless like for example The mobile application that Ella created probably it's running up a blueprint saying hey install this Clugging that it's in this directory And that plugin actually Transform all the wordpress to make it look like a mobile application I can see like it's writing a docker File definition But easier right because it's just json and the thing is the each step is Defined so You can add new steps and create a pull request to wordpress player like I need to change something That it's not already doesn't exist So feel free to create that step and the rest of the community will enjoy it Hi, that's uh, pretty awesome Um, you talked about with the mobile app framework type thing and you compared it to ionic How does that work? Is it like a like a web view with wordpress running in like a browser type instance or How does it compare to like ionic for that? Um, so you mentioned the ionic Which like the mobile app framework? Um, so how does and you showed the example of the app That ella built. Um, how does how does that work? Is that like a web view that's running or is it something else more native? yep, so I I talked this week with ella about the mobile application and thank you for the question and From my understanding the application runs offline So it means it's loading the html like It's loading an iframe and That iframe has html and javascript to run The wordpress playground like you'd be accessing internet, but it's just in the phone And that's the way she loads it and I guess yeah that she's using Blueprints to run the plugin But yeah mainly it loads an html. It's an iframe that loads an html that lives Inside the phone so you can access it offline I answered the question. Yeah, thank you. Okay. There are no more questions. Thank you everyone for coming on your time