 My name is Gregory Cornelius as she said and I work at HubSpot, but before I started at HubSpot Which happened about a month ago. I worked at automatic with this guy. Good morning. I'm Matias I'm a developer and designer automatic and as you probably had a guest We're here to talk a bit about how react Might influence WordPress and be used inside of WordPress and why react is such a compelling and interesting technology But before getting into react, I want to ask a question What what is the future of WP admin? Just a tiny tiny little question You know if we were to start and and build WP admin today, what would we do? That's sort of the premise if we turn back the clock a bit and look at WordPress as it existed about 10 years ago in 2005 This is the experience that you would see when writing a new post And if we sat down and we started writing, you know, we would say new posts Write my super amazing awesome thoughts and then when it came time to save those I had to hit the save button and wait for a little bit as the data goes flying over the internet to a web server It's written in the database WordPress Passes that back across the internet to my browser and I see the result. Well as the user I had to wait a bit my flow was interrupted as I waited for that post to be saved and the thing is you know, if you look at the editor today a whole The experience really hasn't changed all that much from that standpoint when you hit save today the same flow happens In terms of technologies, you know, we've seen this explosion of of web technologies and They've really changed how web apps are built. So if we were to start today, we would definitely want to take advantage of these Of course, we also have now everyone in our in our pockets everyone has a Phone a smartphone in our pocket. That's like a little mini computer that has a different size screen a different way of interacting With our our digital media that we are using all the time I imagine there's a bunch of you staring at one right now because who knows how interesting this talk really is Anyway, one of the things that Apple has said is that in terms of what they recommend in terms of how as a application developer we approach creating our UIs They suggest that people Understand should be able to understand and interact with the content and that the UI should never compete with it that we directly touch the content and When we do that it's a different kind of experience now There's an expectation that the that the experience is real time when we touch in the content We don't want it to disappear while something happens and then have it come back So there's this sort of feeling of a real-time experience Which of course is is the illusion of speed that the sense that everything is as right there immediate So if we come back to WordPress and think about well, what would be the ideal for this future WP admin UI? One thing we definitely would want it would be this the sense of speed and immediacy we'd also would want the content to be front and center and And and we would want it to have a modern UI that utilized all of the capabilities that are available today on the web So as own Malik said recently in a blog post in the past WordPress hadn't done a good job of building the real-time experience That we as modern web customers have come to expect So what what if we tried to solve this problem? well We have tried to a degree inside of WordPress both Matias and I worked on features inside of Core to try to bring some of that sort of feel and experience inside of WordPress So I worked some on the the media code base and Matias did a lot of great work to bring a new theme browser to core and You know it we did we improved the UX we did make this a more captivating and engaging experience that the content was more front and center But at least for me when working on the media code base Which is all written in backbone. It's very heavy JavaScript code base It wasn't an easy process It was sort of like me as an audio engineer, which I was in the past life Trying to untangle this match of massive patch chords trying to figure out Well, what how or how is this thing connected to this thing? How is this thing connected to this thing? It was just a lot of work so When I discovered react I thought I Wanted I was really interested because what react's goal is is to really simplify the process of building a complex UI to make That tangled mess clearer so that you can easily trace how a particular thing is happening inside of your code base and It wasn't just me that was excited about react a bunch of other technology companies have embraced it in addition to Facebook who created it Companies like Netflix and Yahoo and Airbnb and the company I work for now HubSpot and believe it or not WordPress.com has also really embraced it So that has led us to Calypso so Calypso is the automatic sort of Attempts to imagine what WordPress would be if we started today and Matias is going to share a bit about Calypso. Yes, so for those not familiar with it this is an open source project that automatic release just about a week ago and You can check it out at that URL or it's on github as well. So you can download it and take it for a go and As Gregory said, this is a take on what WP admin could look if it was done entirely In in JavaScript as a single page application So to dive a bit more deeply into the technical aspects of this is like why and how a single page application So coming back to what Gregory was mentioned about the notion of speed and the expectation of speed by users The single page application really really allows you to sort of craft all the flows that you can do inside the administration page In a way that's much more smooth like with the with the concept of the pastry load It's almost as if you have this house where to go into each room You have to stop in front of the door and wait until it grows a handle and and that sort of like really stops you from Like experiencing the full house in a way that that's more immersive So Calypso read is written almost entirely in JavaScript using react and it's also driven by the WordPress comm rest API This last aspect was really fundamental for the work we wanted to do Because it allowed us to completely decouple the server side Which is still powered by core WordPress and which is very robust and has proved its success through many years While experimenting on the client side with an entire JavaScript application so this project took us like a year and a half a bit more and This is a it's a bit blurry and Mouthform by the slides, but here you can see some of the interactions that you can do and one of the first things that you know This is how smooth it allows Navigation through different sections to be like changing the side going to the editor and all sort of things This brings up for developers It brings a challenge in how now you have all these different states that the UI can be in I Need to figure out how to manage that in a way that's the CC for other developers to contribute to and especially to develop new features To manage this state like this is a diagram of all some examples of the different states The editor can be in to manage This is where we had really came to help us and to avoid this sort of like mess that you can end up with Remember all of that but it's just within a single page application. There's not a single page reload So Gregor is going to go a bit about some of the key features of react and how it helps with this Yes so if you think of Calypso as having really two pieces one piece is this new modern UI and the second piece is a Developer experience that allows it and makes it easy to build the a modern UI And one of the reason or one of the things that react does that makes it easy is in order to build a big application You need lots of contributors and react actually has a really small API That is easy to learn all a lot of the complexity of react is under the surface the developer doesn't have to deal with it Instead they're presented with some a very simple API and that means a new developer can come on and get started pretty easily You know it does require learning JavaScript and understanding JavaScript if you don't have that experience But if you do learning react is not that big of a step Another thing that react has done is that instead of Creating another template language. It's much in much of a similar way as WordPress and how it embraces PHP react embraces JavaScript the templates are Written in JavaScript Which brings a whole bunch of expressive Expressivity to the language and how you describe your UI in Terms of how events are handled inside of react Unlike if this was a backbone Plus jQuery kind of app events are bound directly as properties on the react DOM Elements and what this does is it basically removes the need to traverse the DOM So what do I mean by traverse the DOM if you've ever written a jQuery selector? You have a little CS3 string CSS3 like selector string that it just tells jQuery How to go find a DOM node in your tree of DOM nodes and with react? You just don't even have to do that and that frees the developer to think of and concern themselves with other things Another really critical feature is the composing of views together. So if you have a Postview and then you have a post list being able to put the post inside of the post list and compose them together in Backbone that's not a feature of backbone itself. That's something that you have to add on top of it But with react it's part of the the core functionality of the library And that is very simple to do and very powerful as we'll see but probably the biggest feature of react that really Attracted us is that instead of having to deal with updating this thing over here when some data changed or the user clicked here I need to update this and writing all this code to update little bits of the UI in react. You just render React will be smart and update the DOM as necessary And this is an example of how that works I don't expect you to be able to read it but basically we have a few different statements and Each time react does the right thing the first time it updates the DOM add some some Elements to the as an element to the DOM with some data the second time The statement is exactly the same and and react doesn't do anything and then the last time it is smart and just updates the text So in addition to Utilizing JavaScript to express the UI it uses functions In in in terms of how creating basically a free a tree of function calls instead of a string that That would represent the view and that that's really powerful There's a lot of really cool things that you can do with that And actually a friend of ours Gujarmo Roush wrote a great blog post that describes Why this is so powerful and there's a link in the slides I'll send out the slides later today via Twitter and and you can check that out But when you're working with functions You've lost something in terms of readability. We all spend Have spent a lot of time working with HTML and we're used to seeing the angle brackets and the the structure of HTML So react actually provides a JSX syntax extension to JavaScript to bring in bring back that into that that structure that and syntax that we're used to with HTML when we Introduce this extension. We need a way to then get back to regular JavaScript And that's where if you're working with react you need to have a tool to take your JavaScript Well in the form of the JSX and compile that into a regular JavaScript so this would Be something that you would do maybe with grunt or something like that that would can handle the tasks In our case, we are using webhack and babble to do the conversion from JSX to JavaScript So this is just an example of a more complete component But the real big question is why do these components matter like how does that really change? How we think about the application not only does the abstraction that react The abstraction that react provides make it easy for the developers to keep and organize their code There's another aspect of components that really makes things Makes for a really powerful experience so if we think about sort of how WordPress is structured At least originally you have HTML on top of which a layer of CSS and and then scripts that are Interacting with that HTML. What if we just threw that away and Created components that encapsulated the JavaScript in the HTML because with react JavaScript Handles the HTML and then if we're really careful with how we write our CSS we can Create little packages and compose them together and and build our UI using them And that's what we did with Calypso Yeah, and this is something that we really didn't anticipate when we started using react But it turned to be one of the biggest benefits in terms of collaboration and ease of development that this is a screenshot of the github repository with some of the components that Calypso uses and By components we have the react component also together bundled with its visual design So it's a self-contained unity and This this really produces a fundamental shift in how developers and designers communicate and and how you can build new sections and new pieces of UI just by by composing these different building blocks as Lego pieces It also allowed us to create a very quickly leave components gallery That's actually running in Calypso if you download it and install it locally Where you can check all the components that are available to build a new interface And if you are making tweaks to a component you can also use these to sort of see how it works The other the other nice benefit is that everyone benefits from that it allows people to Collaborate on some core components and you know that they will benefit all of the interface This is an example of a of a very simple component that we have which is a side component We use this in many different places We use it in the sidebar to show the current site You have selected in site for power so you can select the site in the editor to show where you're writing to and And the neat thing is that it's the exact same piece of code It's just a site in angular brackets like the yellow thing that's sort of there it's a another components a site indicator that you can enable as a property of this component and This was a really a really nice A ring like side effect of the technology stuff that we that we chose One of the things that it also produces is that it gives us another layer of semantics to talk to We which does not have the like the basic native HTML Which describes the document with things like header main aside now We have like app specific components that you can use to describe an interface And this also transcends the actual medium like it's it's much easier to collaborate across like the mobile web desktop and mobile and And the web using these sort of syntax because even even if like the actual implementation differs It allows you to describe an interface in terms of its semantic pieces So sort of to go back a bit we're With with react with introduction here in reacting in and the ways it can sort of help move into more Interactive experiences were really scratching the surface like calypso's was just open source like it's totally up to The community to see what what it can help us see what what we can learn from it and where we can take it But react can also be used if you want to experiment with it It can also be used in plugins and themes in a more like you don't have to recreate all of the admin To use react you can just drop it in a like Gregory showed in the code examples You can just target the specific DOM element So you can have a react widget that just manages something or you can redo like the common stream in react using the API and see how it works and the other really nice thing is how How this could shape up with the API as it's coming into core and how these two things like the evolution of the client and the Server can help push WordPress forwards Gregory made a simple boilerplate to sort of help with this. Yeah. Yes So I had grand aspirations to to create a plugin that utilized react and solve some really interesting problem But in the end I didn't have time to do that and instead I've created just a simple boilerplate plugin So if you're interested in react and you want to try to get started with introducing it into a plug-in or a theme This is a plug-in that you can go download and it has the tools needed to compile your JavaScript and compile this the sass into CSS And also just kind of demonstrates how how that setup might work You know, I hope to add more to it and make it a richer thing, but I thought I would share it with you today So, you know, we've Automatic has created Calypso as this new modern UI Representing perhaps a future of WordPress, but where do we go from here? Well, you know, this is really as we just mentioned. This is just the beginning. You know, the code just now is out in the open It's really up to everyone everyone in this room everyone listening in the future to Contribute and think about and talk about and work on that future, but we have a few ideas of where it could go and Thought we might share them. So one is what if we did have a library sort of like what is in Calypso, but expanded of UI components that covered all of the major functionality that was that's part of WordPress and You could as a plug-in author or an application developer take advantage of those and use them either in your plug-in or in some other Context and what if that then was used to create the new WP admin UI? You know, what what would happen if we did that? Is that a good thing? Yeah, so no, I mean sort of another another thing related to this is how how do plugins look in this world of Like an API server side and a different client like would you have like API only plugins like client plugins? How how do both deal that this is really up for everyone to sort of figure out and start to see how things could work Yeah, and what does a plug-in look like that's written in React and in JavaScript? You know at this stage plugins primarily hook in via PHP So what would happen if we had all of our interactions happening inside of JavaScript, but even beyond that one One super interesting project that Facebook has put a lot of effort into is react native so there are There's now react native is available for iOS and Android and what it does is it brings that semantic and that the user the developer experience of react to the the native platforms and that's really pretty interesting because You know, what if what if WordPress was to embrace that and create apps using react native that also? would allow developers that Traditionally weren't contributing to native apps to contribute to WordPress apps and since it's JavaScript What if that also introduced some sort of plug-in plug-in system, you know, who knows what I don't I have no idea What will happen, but it's pretty interesting So Thank you everyone for for coming. I Hope that there is a lot of questions and we wanted to make sure there was plenty of time for people to ask questions You know, we've had our our heads so deep in the creation of Calypso that It's very we're very interested to hear what everyone thinks and yeah, and I apologize for for those slides and Yeah, Matisse did a great job designing them, but unfortunately that hasn't translated There's a microphone Hello Great presentation. I love the Componentization that you're able to do in react. I'm wondering if you have any recommendations for doing Component techniques when the rendering has to be server side Are there any recommendations or or tools that you would use to bundle markup CSS JavaScript when the markup rendering happens in PHP? Yeah, I mean that's a definitely a good question There so it isn't something that I personally have looked at but I think that Jack Lennox maybe has thought about this a bit at least in terms of how so he's been working on what if we used react for a theme and that sort of That same sort of issue comes up. I think Yeah, it's a good question I mean on I can say what Facebook does so Facebook actually they have this thing called xhp, which is sort of their equivalent to React kind of components for the server But but it's not something that I've thought about in terms of WordPress at this point Yeah, in the case of Calypso We are moving some of the things to to be able to be rendered server side So if you follow the project, there are some initial tryouts to make that work. So Great. Thank you. Thank you You're you're talking about componentizing your Parts of your application. How does the web component standard fit into this story? That's all that's also a good question and So I'm trying to channel Seb from the react team who has kind of has a coherent thought on on why react is better than web components but one of the things about web components is that they're still tied to the DOM and the way that the DOM API works and React takes like a different approach and the there is a lot of benefits in terms of the developer experience and And the consistency of that experience with react That you would lose if you worked with web components. I to be honest with that. I'm not exactly sure what Where web comp components will go they haven't really taken off completely? so I Think we'll see Thanks for great presentation, I was wondering I saw that you use sass in the calypso Did you choose BAM or smacks or any other? Sort of standard naming conventions for classes and like Well, we use it We don't use it a lot either we use it for like a couple things like variables some mixings and some like nesting composition like One thing that we were like more around like choosing what sort of preprocessor We were really interested in seeing how because like the community is also moving towards like Inline styles in JavaScript in react components, but we didn't want to go there So we want to have like a very accessible Style sheet for like designers to play with that that still allows you to like if you load it in the browser That's also accessible for people like inspecting elements and being able to figure things out SAS has served us pretty well for that like it's again We have a pretty strong set of guidelines into how we name classes and how we well One thing that the one guideline we have is that we don't reuse classes. We reuse components So the classes are pretty tied to components which helps a lot in the special since we have a global style sheet in the end Yeah, and the naming scheme is inspired by BEM. So that's the block element modifier Naming scheme for classes which is to avoid the kind of global namespace. That's a part of CSS So each class is unique Does this answer sort of yes, thank you