Static website for biotech company, pulling content from a cloud-based CMS

All development and toolchain

  • web
  • front-end
  • back-end
  • devops
  • Prismic
  • ES6
  • cssnext
  • React
  • JSX
  • Node.js
  • static
  • Lambda
  • AWS
  • Will

The new AbCellera website for 2018 was designed at Will Creative and then handed to me for development.

Requirements and tech

The client wanted a CMS for data entry but a minimal hosting bill. Knowing updates would be somewhat infrequent, I recommended using a cloud-based CMS (in this case Prismic) so that the rest of the site could be statically hosted.

I wrote the front end of the website in Javascript with React, which pulls the current content from Prismic at runtime.

However, it’s of course important to be able to get information about the pages’ content from their markup alone, both for search engines and for social networking sites to get metadata such as a title and summary for each page. For those reasons (and additionally simply to make sure a client gets the right response code on each route depending on whether the page exists) there’s a special bundle of the site code deployed to AWS Lambda which is invoked when any change occurs in the Prismic CMS to perform some server-side rendering. This grabs every Prismic document and then, for each page of the website, renders an HTML page and uploads it to the static host (AWS S3). There’s one further Lambda function to handle job application submissions.

AWS Cloudfront then stands between S3 and the user to provide caching and compression.

The result is a super-fast static website (yet with a content management system) which is properly indexable by search engines and social networks, and with an extremely low hosting bill and zero server management.

Front end bits

There are a few bits of nice eye candy on this site.

I developed the face animations according to specification (just a few squiggles were to be sliding in), only to be asked to “amp them up”. There were a limited number of squiggle assets, but by randomly flipping, rotating, scaling, and positioning them, I could add a lot more movement while barely adding to the payload. I also suggested the 3D rotation of the underlying polygon – the idea didn’t actually go down well until I demonstrated it, whereupon it was excitedly accepted.

The morphing between the different polygons in the logo (on home page load, and again when switching page) is also something I’m very happy with. A few pages are assigned particular polygons, and other pages (such as news pages) choose one based on a hash of the current URL, meaning they’re randomized yet each page will always have the same polygon.