Design Spin Builds a React Website with Cosmic JS

is a boutique independent design and development shop in Norwich, England. Principal 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 . Read on to hear the narrative directly from Jason Foster as written in his . Design Spin Jason Foster product blog : “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 . 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. Jason Foster WordPress 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 , it is possible to do a whole lot more. JavaScript node.js Node allows 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 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. JavaScript JavaScript 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, is a popular JavaScript library for developing user interfaces. 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, will only change what needs to change through its own complex differing algorithm. react React React 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 , we needed something to replace our content management system. has a built in Restful API, which would of worked well for this project, but we discovered . 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. WordPress WordPress Cosmic JS also provides 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. Cosmic JS Web Hooks PROGRESSIVE WEB APPS When we built this website we wanted to ensure that we ticked the boxes outlined by for a progressive web app. 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. Lighthouse Lighthouse 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 is an API-first CMS that helps teams of developers and content editors build apps faster. 64.5% of developers…_hackernoon.com Cosmic JS vs. WordPress 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 or . Cosmic JS Twitter Slack is the Co-Founder & CMO of , an API-first Cloud-based that decouples content from code, allowing devs to build slick apps and websites in any programming language they want. Carson Gibbons Cosmic JS Content Management Platform