WP Calypso First Impression

WP Calypso is the newest addition to Automattic’s open source projects. It took both the WordPress and the web communities by storm this week — everyone is talking and writing about it now. But what it really is? Does it deserve the attention it gets?

I was surprised when I first heard about Calypso on Monday. Even more, plenty of questions started to pop up in my mind, namely:

• How does it relate to WordPress.org?
• How is it different from WordPress.org?
• How can I use it on my self-hosted WP blog?
• Why should I care? It’s an Automattic’s project after all.

…and some others, especially more technical ones. Well, I’ll do my best and will explain “everything” in today’s article. Have a nice read!

Calypso 101

Calypso is basically the new WordPress.com interface. It’s not a new WP-Admin of WordPress.org project, it’s the admin interface of the commercial hosting company WordPress.com. If you still don’t get the picture, imagine that your company has been working on its website for a year and a half, pouring a lot of resources into it and then deciding to open source and release it publicly — all the code, the whole dev process. That’s what Automattic did here. They didn’t have to do it, they owe nobody nothing, but they still did it. Big props to them for doing so!

For more non-technical info, please refer to other articles (link, link). I won’t repeat the same stuff here. Now, let’s look at Calypso from the technological standpoint.

What is it written in?

Firstly, WP Calypso is developed on GitHub, which is the correct way to do open source projects in current times. According to the stats on its GitHub page, Calypso is written entirely in JavaScript and CSS.

Yes, there’s some “Other” box but that’s not important. What is important is that there is no PHP in the stats. Woah, how’s that? Well, the server part is written in JS too, using Node.js.

As far as the CSS is concerned, once again, they made the right choice and went for the Sass CSS pre-processor. Sass is pretty powerful, adding many useful features when doing styling (e.g.: variables, conditionals, functions and mixins).

Libraries are installed through NPM package manager. You just need to run a single command to have the whole app installed locally, but that’s nothing new in the Node ecosystem as it’s a standard there.

The whole app is built and deployed with Webpack. They’ve also started using ES6 in some parts the app and have it compiled into older JS through Babel. React hot loading is also included.

Server-side templates are written in Jade. For unit testing, they are using the Mocha framework.

Calypso’s JavaScript in depth

As Calypso is a single-page app, they’ve made a reasonable decision to use the React library for developing its user interface. React is a very popular JS library developed by Facebook (Instagram and FB chat is coded in React as far as I know). I wrote an article about React before. So, all that you see and interact with when using Calypso is essentially React. Cool.

If React is only for the UI, how they manage the application’s state (data)? Turns out they’ve chosen the Flux architecture (creation of FB, too). It has many advantages over traditional MVC, mainly the unidirectional data flow.

When I skimmed over Calypso’s codebase, I’ve noticed that they are also using Redux in some places. It’s one of the most popular Flux-like libraries for managing the application’s state. I’m also using it in my experimental WordPress theme called Lexi.

Now, what’s also good about React is that while it can render HTML to DOM, it can also render it to a string. It means that React can be used for server-side rendering of pages. That’s exactly what Calypso is doing (or aiming to do), as it is very helpful to share the code between the server and the client.

In the figure above, we can observe that some of the code is intended only for the client (client/ folder), some for the server (server/) but a lot of it is shared on both server and client (shared/ folder). That’s a trait of a well-thought, modern single-page web application (or site). The more code is shared, the better.

Using technologies such as React and Redux is what makes it easy to deploy almost the same code on the web, mobile, and desktop. No need to build native applications. Build once, deploy anywhere. Follow React Native to learn more about how to make native iOS and Android apps in JS.

Apart from the technologies I’ve already mentioned, WP Calypso is using other standard JS libraries such as Lodash (various helpers and utilities), Immutabe.js (immutable objects, sets, maps), Superagent (HTTP request library), Socket.io (real-time bidirectional communication) and others.

React components

One thing I must mention is the awesome collection of React components Calypso contains. Just look into the client/components/ folder. What is more, almost each of them includes a descriptive documentation, example usage and tests! You hear that right — a huge collection of battle-tested, reusable, documented React components. Oh, and of course, they contain CSS styles (or better said, Sass), too.

Why should I care?

I would divide this section into two parts:

• What Calypso means for the WP community,
• What it means for you (as a web developer).

What Calypso means for the WP (and web) community

WordPress community is huge. We could say that it’s an IT field in itself (e.g. WordPress developer vs web developer). Nowadays, WP is powering 25% of web so WP companies, especially Automattic (which sets an example for others), should take careful steps. Doing a wrong thing might destroy a lot of businesses and upset many people. However, in my humble opinion, introducing Calypso and making it open source was a very good move.

From what I observe, the web is moving towards single-page “do everything on the client and have a server only for the API” types of sites. This trend has started a few years ago and it’s a good thing to do. But then there is WordPress with its PHP and decade old dev practices. A huge gap started to emerge, between the modern web sites and developers and the traditional ones. But with Calypso, Automattic showed the whole WP and web community that it wants to innovate, it wants to push the web further, it wants to be better and doesn’t want to stagnate.

Early 2015, I had this moment when I thought about forgetting about WP and moving completely to React and other modern technologies. But now I know that I don’t have to take such drastic steps because WordPress is transforming itself. First it was the WP REST API, now Calypso.

I think Calypso will be very prosperous for the WP community, attracting talented programmers and creating new business opportunities. Now we, the web community, know where we are headed towards.

What it means for you (as a web developer)

It means that now is the prime time to start digging into JavaScript, React, functional programming and other modern web technologies. Till now, you could have an excuse that even though the web is moving forward, WordPress doesn’t change that much so I don’t need to, either. But now that WP REST API is being included in the Core and Automattic releases a project based purely on JS, we know that it is inevitable to learn JS if you want to stay in the game and be successful for the next 5 to 10 years.

I’m no oracle, but I think this is the best time to start learning React. It has been popular even before, but now that it is included in a WordPress project, it will become veery huge. WordPress does this to technologies, popularizing many of them to the point that all web devs know about it (e.g. jQuery, Ajax).

How can I use it on my self-hosted WP blog?

As Calypso is the new WordPress.com, you can’t simply install it on your server and replace the traditional wp-admin with it (yet). Calypso is powered by REST API from WordPress.com, not this WP REST API. However, if you install Jetpack plugin on your self-hosted blog and connect it to your WP.com account, you can start using Calypso right now! I’m even writing this article in it right now.

I haven’t yet studied Calypso’s API code but to have a better picture how it works in the background, my guess is that it communicates with WP.com, which in turn communicates with your self-hosted blog through the Jetpack REST API. So, if you create a new post in Calypso, it sends a request to WP.com, which in turn sends a request to a Jetpack REST API endpoint on your blog, which in turn calls the required PHP functionality to create the new post in your database. No magic here.

If we wanted to replace the standard WP-Admin with Calypso and use it on our own servers, we would have to refactor its API to be compatible with e.g. WP REST API but that might be a lot of work. Time will tell and maybe Automattic themselves or an active programmer will to that.

More info here.

Wrapping up

With Calypso, Automattic entered the cutting-edge web dev ecosystem and did it pretty decently. With more than 50 contributors, thousands of lines of code and hundreds of React components, I can confidently state that it is one of the biggest projects of its kind in the game at the moment. A lot of my Comp Science friends despise WordPress because of its “PHP and ancient tech”. Now, they are unexpectedly surprised :o.

One more tidbit — you know the guy who created Ghost, the blogging platform based on JS — ­John O’Nolan. I just speculate but when Automattic released Calypso, his reaction on Twitter was “lol”.

Lol, indeed — in the good sense.