 Thank you, and poor Michelangelo. We're driving his name low Thank you everyone for being here I'm Matias Ventura. I'm a developer and designer at automatic and I started working on Calypso the Calypso team when the project began So my talk is called a look into Calypso So for those that don't know Calypso is a project a JavaScript project that automatic launch about eight months ago But before I dive into that I just want to Take a bit of a look into the why's behind this project So and I think this is important because WordPress is bigger than ever. It's it's robustness has been proven for more than a decade and So what's what's the deal with JavaScript in the WordPress world and and this was one of our biggest like The biggest problem we had when we started working on Calypso was we wanted to have an Interface for managing your WordPress sites that allow you to manage all your sites together That incorporated elements of real-time and reactivity That got rid of sort of the page reload parodying that WP admin has and all of these Ingredients together makes it really awkward to to work within the constraints of WP admin So that was kind of the background for why we why we wanted to do something completely separate the other aspect is as Matt said before that speed is a feature and This is getting more and more relevance as more web applications start to evolve and people Get familiar to that and accustomed to that perception of speed and more importantly the perception of speed is Sometimes as valuable as speed itself and what I mean by perception as speed is that Whenever you're interacting with the data of your site People have this expectation of having a real-time feedback from what they are doing They want to feel that they are manipulating the real data and not just sending instructions along the network and waiting for a page reload to happen so this is a video of what Calypso looks and This is the this is a concept of a single-page application. It has no boundaries in terms of reloading things And you can see that interactions are fluid. There's no delay in going from one section to another So to recap we have a single-page application written entirely in JavaScript and It's driven by the workers of Congress API. There's a bit of WP API now that it's been incorporated into WP com And this this last point is important why it's driven by the API because is that this is the The main element why we can keep the connection between project as big as WordPress as Sturdy and robust and as WordPress is and incorporate all these new technologies that allows us to do more real-time feedback for the user this separation of the API and the client is what allows us to sort of Disrupt what the UX of WordPress means without really letting go of what WordPress remains to be because at the at the end Calypso is still powered by the same WordPress that everyone uses and The last aspect is which I think is really is really nice that we were able to do this is that this is a quote by Matt When we launched Calypso said a lot of people thought we should keep this proprietary But throughout my life I've learned that the more you give away the more you get back and think this is and I feel like there's an intangible sense with WordPress of Everyone feeling that it's their home. It's their place in the web it's what they have control and complete ownership of and I think this this freedom and this Behind it all of obviously the the nature of open source But this sense of owning what you're creating and knowing that in the years to come You will still be able to take that Whatever you need to go things change and we wanted to have that for Calypso as well if Calypso becomes Better or different or modern way to to manage all your sites We wanted you to have the same kind of freedoms and so you can download Calypso You can modify it make it your own you can run it locally from local host and you don't need to run from like WordPress.com at all and So this is the Calypso's in GitHub You can take a look at it there We actually deploy we actually queued to deploy to workers that come from these repositories So whenever there's a merge into the repository we queue a deploy that eventually gets to production So I just want to go over a few of the challenges that develop in this project meant and The the main one is that there's really when you start working on a single-page application that again It's meant to replace all of WP admins functionality plus Extra functionality like managing all your sites and all these reactivity stuff so and you end up with a lot of state and a lot of applications state that you need to manage in a single session That's quite complex to wrangle and it's very easy to end up especially in a project with many developers It's very easy for it to end up really in a really convoluted mess and that's where react Come seem to help solve that problem. So react is a project by Facebook It's a JavaScript library and what it does it's basically a declarative view written in pure JavaScript That simplifies the process of building clump complex UIs. So what does this mean? The main thing is that it really removes a lot of the complexity from what you need to do to put in the browser The representation of truth that your application needs So the way if we think of the what the browser is showing the user as just a reflection of some truth that lives elsewhere React is in the middle of that it's minus sheen What the DOM should be reflecting and so it it really helps developers in thinking in a more Declarity way where this truth goes one way. So if you modify the source of truth React can tell what sort of nodes in the domain needs to update to reflect that truth so this again, this is Removing a lot of the complexity for developers in dealing with such a big application. I Want to just go a bit about some misconceptions with what reacting Calypso is The first one is that react is not really a framework It's more like a library and and this is important because when when we started with Calypso, we didn't want to We tried a few frameworks. We tried different things, but we wanted to stick as much as possible with pure JavaScript and and have a very modular Approach to how we code the interface and react. It's just that it's one tool among many with which we we can build Disapplication and by many I mean we have things like WP comjs for the API we use us There's also redox. There's page dot js for the routing and many other tools and ideas This takes me back to some of the another thing that I want to highlight which are the development values of the project Which has Driven sort of like why we chose react and why we chose all these different Utilities the first one is that we do it all for the user and this is again at the heart of whereas I started with a perception of speed and the sort of interfaces that users expect in modern web applications So all of these matters if it improves the user experience the other one is that we optimize for iterating quickly and this is a more Developer centric a problem because there's there's always these pro cleavity to Obstruct things or make generic tools out of it And this is an important tenant in Calypso is that we try we know that abstractions always become burdens of knowledge, so we are very careful about the ones we adopt We are here for the long haul This means that we want to be able to Shift pieces of the application as things evolve or as new solutions appear or as we discover new problems There's an interesting article we have in the documentation of Calypso, which is called our approach to data Because that has fluctuated since we started Calypso at least three times And I think it's a it it's kind of like a recount a historical recount of why all those changes and Always with the same premise at hand again thinking back about the react thing We wanted to have a unique directional data flow Where you just modify truth in one place and that just cascades down to the whole application But the way you implement that is something that's been in the last few years It's been rapidly having different solutions from the JavaScript community The other one is that we don't trust ourselves to be perfect And this goes with the the github repository and the culture of co-reviews that we implemented for this project Which's been immensely helpful just Sharing all this work all the burden of looking at what's going on and and it comes down to the final tenant That is that we are in it together Our idea is that now one really owns the code or lines of code like ideally everyone owns the code And it really happens in many modules where you see like I don't know 2030 contributors It's really hard to say who wrote what it just becomes part of the whole team And this is this I think this has a very a direct impact in the UX Because users don't really care about any team boundaries or any sort of like division that you do internally They experience the application as a single entity So I think that when developers and designers care about all these flows together as a unity The application shows because so much better So I want to touch a few points interesting points that came with a in the or like the last year of Calypso One is code splitting and what is code splitting? So we were talking about a single-page application, right? Which means we have Virtually all of WP admin loaded at once in a single session. That's a lot of code a lot of JavaScript code So this build ends up being quite huge. So you need to break it down and start Creating chunks of code that you can load on demand when you need them So this is a screenshot when you run Calypso on the terminal. Those are the chunks that get generated which are quite a few So it's just a little impasse now we are in a moment where Okay, we said we wanted a single-page application But now this fancy single-page application needs to break all its code into separate sections Sort of like what the browser does when you click a page and it needs to wait to load that another page Well, it's there's a crucial difference here in that these code chunks this notion of sections is something That's embedded into the knowledge of the application What does this mean is this means that this is an Internal feature of the application that the application knows when or what the section does and when it can load it This opens up the opportunity for doing many different optimizations like smart preloading Smart preloading we have this in Calypso now, which is we can do things like if you hover over a section We know what that section is going to require So we can preload that chunk of code and that will make the transition Instant when the user clicks these chunks are like we're talking about like between 20 kilobytes to 500 kilobytes and compressed so it's quite fast So this is the video if you hover like blog posts you see the network request It's already loaded if you go to themes it loads another one for themes So when you click on the actual thing it loads instantly the images are coming later, of course So There's also another interesting Utility we are creating because this applies to general sections But we also sometimes want to preload things within the actual interface And this is quite crucial for something like the editor which is using pieces from all over the place Like it has an author selector where you can change the author It's using categories so there's a lot of again It's very hard to consider that as a single entity because it becomes huge So this thing is something that we're exploring is not yet merged so you can check it out there It's a way to create a react component that will be in charge of loading After the initial render whatever else you put inside that component So you can do things like wrap the cyber of the editor in this component And the first thing you will get is the editor so the writing space and then as soon as that page loads It would load on-demand the sidebar The other aspect is Components which is a really big piece that react brings brings into the application So I think this is appropriate now since we are here just a few hundred meters away from this painting by Bruegel from the Babel Tower if you have some time go visit that museum. It's really great So I think that building complex applications sometimes feels like this Especially as you start to lose a sense of shell language Like you don't really it's things just become completely unmanageable and I think components Give that sense of shell language to developers and designers alike So what is a component a component is? Basically, it's just a react entity that renders HTML. It may or may not have an action Queue or functionality and then some SAS code for the visual aspects. All of this is packaged into a single entity We have hundreds of these entities right now in Calypso and you sort of build with it like Lego pieces We have a live gallery where you can browse the ones that exist and developers are all the time creating new ones Refining old ones So you can really piece together a new page just by using all existing functionality Which assures that you will get consistent design consistent UX and you get more developers working on the same thing because they needed for their own use So you also advance them in terms of quality This is an example of composition of how that single site component is used in many places at once So every time this component is improved and this is already an old screenshot There are improvements that already happened to this one and they are applied across the whole application So this is I think it's an interesting idea that is third I think we started to identify this quite later on in the process is that these components sort of define an application level Semantic so we have the old HTML tags that we all know and now we also have these like Super set of tags that embed a lot of functionality, but can use in the same way So when you write your component that you're writing or your HTML you intermingle HTML with these other notions And we have many of those like teams are constantly creating new ones So you have things like a site like a pose like a common stream or draft list and all of these you can reuse It also allows you to transcend the specific medium of the web because this is a language that you can use with the Team if you're working on a mobile application as well that may be using other technologies This is a common language that you can use to represent the designs that you're creating so one final aspect of this is Using Calypso as a framework So before I said that Calypso use many different tools to sort of assemble the the whole application and This was important because we didn't want to be constrained by a specific framework I think it's sort of related to how WordPress itself always use pure PHP and not just some template language or whatever or framework So the thing about Calypso is that it itself becomes the framework. So these are all again higher-order ideas that Calypso creates from those basic tools and these are things that are useful outside of the domain of the WordPress.com application things like Preloading that I just show internationalization solutions UI components the application components, etc So another aspect of why I think using Calypso as a framework is promising Is because the way it works is that you can run Calypso just by like download it and click in a file Like an open it in the browser you need to make a build of Calypso and This process of making the build allows you to like in itself What it does is it also gets rid of anything that you're not using So if you download Calypso and you see all these modules that you don't care about Like I don't know like the reader the WordPress.com reader or other modules You just disable them and then when you run your build you would get only what you need And we have different ways of disabling this one is just with a feature subject in a configuration file That you can just toggle them and that will get rid of the of those modules in the final build And another one is the notion of a project So WP.com right now is a project that's in the in the github repository But you can replace that just with a config file and say Project my project and you would you will take over Calypso and just define your own sections One last aspect of this is customization of how Calypso looks So if people think that Calypso is too blue It's possible to change the colors just by manipulating the SAS variables And this is possible because we have all the components are consuming from the same global variables And so it's very easy to change the how it looks With one caveat like I had to make a few Changes to the way we were rendering the cyber to make this just to make these screenshots But it's now merged into Calypso. So it's possible to do this And it's just really just changing a few variables and you have the control for that So if you download and you don't like the blue you can change it So to finalize If I mean it this is fairly new We don't really know where this is going how this can be useful to other people in which ways But I think there are very promising directions even within automatic We're using Calypso for other projects that have nothing to do with wordpress.com Because it's very flexible and there are many Tools that we have figure out through these years like around preloading and hopefully soon like offline support That I think are really valuable to other people as well. So I Said just if you have some time install Calypso locally and give it a go see if it fits to build some kind of project And let us know how it works Ideally we would want at some point to completely switch to WP API It'd be nice to even have a JavaScript utility as a wrapper for WP API that we can just swap between the projects and I'm that's about it. So thank you