Calypso Page Routing

Calypso is the open source application that Automatic built to port all of the great WordPress.com features you love to a Javascript and Node.js stack.  This is a fantastic application and I have been working with it a little bit everyday now and I wanted to go over calypso page routing was built.

What is Page Routing?

WordPress is built on the widely used server-side language PHP, which is a great language for creating static webpages.  Page routing within PHP, in its basic form, is simply typing in the path to the file within the URL address.  So for example, if you are at a domain https://example.com and you want to route to the blog you can simply add /blog to the address so that you would go to the URL https://example.com/blog.  This is very easy for both the user and the developer, but with PHP there needs to be a page refresh to get the new content.  This is not horrible for some static sites, but for other real-time sites it can be very cumbersome.

Routing in Node.js with Page.js

Calypso was built for the future off of a new technology stack that uses Node.js and Javascript instead of PHP.  With this new technology Calypso page routing had to be redone in a new way to make the experience seamless.  Page.js is a node module that allows developers to create dynamic endpoints where they can then load new content.  In a similar way to how you refresh the browser to load a new page, Page.js will “refresh” the application to load the new content, without a page load 🙂 So after you follow the calypso setup guide and get it running locally you can start to look at the code and see how this is done.

The Actual Code

Now I will attempt to explain how Calypso page routing really happens and if I am wrong in at all please let me within he comments below 🙂

The /client folder within Calypso is where most of the magic happens and it where Page.js is initially triggered to start the routing engine.  As you can see by the description within Github the /client/boot/index.js index.js file triggers the Page.js to start the routing engine and from here Calypso will be able to add new endpoints, or pages, to the application with just a simple function call. These pages use Javascript callbacks and React Components to render all the HTML within each page.

If you follow the fantastic Hello World tutorial you will see that you can register new pages with Calypso by adding in a new endpoint within the /client/sections.js file.  After completing the tutorial you should have a better understand of how Page.js works and how Calypso uses it.

Leave a Reply

Your email address will not be published. Required fields are marked *