Design Spin Builds a React Website with Cosmic JS

Design Spin is a boutique independent design and development shop in Norwich, England. Principal Jason Foster focuses on creating premium interactive experiences for clients through web and mobile application development. Updating the Design Spin website had been on his radar for quite some time and this week we see the released product. Read on to hear the narrative directly from Jason Foster as written in his blog.

Jason Foster: “We don’t see the site as finished, but rather an ongoing project that we will iterate on and improve over time. Our old website was built with WordPress. We love WordPress, as do the clients we have that are using it. But we wanted the new site to be something modern, incorporating some of the latest in what the web has to offer.

JavaScript as a language has made a lot of advances over the last few years and has become extremely popular. It used to be known as a front end language, predominantly used for providing effects and interactions to web pages, things like image sliders for example. But today with the availability of node.js, it is possible to do a whole lot more.

Node allows JavaScript to run on the server side. If this was a WordPress website the language we would be using on the server side would be PHP, but we would still be using JavaScript on the client side for any browser trickery such as the image sliders mentioned. As we see it, this is one of the benefits of using Node for our server side implementation: much of the codebase used on the server side can be shared with the client and vice versa.

When you visit this website, the first page is delivered from the server then further page changes are handled client side. This makes the whole experience seem very quick. I will outline two of the tools used to get this job done.

React

Developed by Facebook, react is a popular JavaScript library for developing user interfaces. React allows you to break your page / user interface into smaller re-usable components that can have state and can be driven by state. When state in your app changes, React will only change what needs to change through its own complex differing algorithm.

This library also includes methods for rendering components on the server side. You may have seen apps that when loaded in your browser present you with an empty app container or a loading spinner, shortly followed by content. The content that follows was triggered to load after the initial page had been served. This all sounds innocent enough but if that content was important from an SEO perspective, the chances are a search engine may never know about it.

We used the server rendering features of react, so on initial page load our content is available to be crawled by a search engine.

Cosmic JS

As we were no longer using WordPress, we needed something to replace our content management system. WordPress has a built in Restful API, which would of worked well for this project, but we discovered Cosmic JS. Cosmic does everything WordPress does but without the programmatic hassle, so we could get the site up to speed quicker. They provide a useful library making it easy to query your data, so we wrapped this functionality on our own server routes so we could switch it out easily in the future should we ever need to.

Cosmic JS also provides Web Hooks for setup to the URLs of your choice. When we create a new article, Cosmic JS notifies us through our specified URL, allowing us to do things like update our sitemap and send out push notifications.

PROGRESSIVE WEB APPS

When we built this website we wanted to ensure that we ticked the boxes outlined by Lighthouse for a progressive web app. Lighthouse is available within the Google Chrome browsers development tools, allowing you to quickly audit any of your web pages for Progressive Web Apps, Performance, Best Practices and Accessibility.

We care about what Google deems as important, so put a fair bit of effort in trying to get what Google’s Lighthouse deemed to be a performant website / web app. We got a 100% for PWA and are still tweaking a bit to try and up our performance score, on last check 86%.

Our home page has a pixelated animation of My face! On the first iteration of coding that, the performance score was really suffering, as it was basically blocking interaction on the website which in Lighthouse’s opinion is a big no no. When things like this happen you have to get creative. We knew we wanted the animation, because it looks cool right? So we ended up doing the calculations for where each pixel should be in a web worker. This got us back to a pretty good performance score and everybody was happy again, phew!”

“I hope in the future that this new website will convince clients to avoid WordPress and use the fantastic Cosmic JS API to build apps and manage content.”

— Jason Foster, Principal and Lead Developer

Cosmic JS vs. WordPress_Cosmic JS is an API-first CMS that helps teams of developers and content editors build apps faster. 64.5% of developers…_hackernoon.com

Cosmic JS is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic JS API, please reach out to the founders on Twitter or Slack.

Carson Gibbons is the Co-Founder & CMO of Cosmic JS, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.