Earlier this year we launched our new marketing site with a brand new blog. You can check it out here: https://populate.io/. However this is not one of your typical marketing sites. Before we got started with development, we had a few self-imposed requirements:
The site runs off AngularJS.
Wait! What? Why? It’s just a static site right? Well yes that’s true, but by going down the angular route, we’d gain a few free features that were just too good to pass on:
- Speed of development: At Populate we have a shared version managed UI library which contain AngularJS components that conform to our style guides look and feel. So rather than duplicating these components, we wanted to be able to leverage this library for our marketing site. This not only saves time rewriting components in, for example, jQuery, but also allows us to easily keep the marketing site up-to-date with out latest UI components by taking advantage of the version management system.
- Single page app: By making the site a single page app, we inherit all the advantages, e.g. eliminating page refreshes, making for smooth navigation of the site (particularly on mobile).
- Consistent standards: By making the marketing app AngularJS, we can rigorously apply the same coding standards as all Populate client-side apps. This encourages the same high quality level as our web apps, and significantly reduces the learning curve for Front-End developers first exposure to the marketing site’s code.
Updates and deployment require minimal developer involvement.
This was our biggest and most challenging requirement. We wanted to remove (or significantly reduce) developer dependance when simple copy changes are necessary (including formatting and layout changes) without any code writing background. The marketing and content team should have the capacity to make these changes quickly and easily.
Preview before launch.
Finally, we wanted a method that would enable us to preview the whole marketing site before live deployment, without the necessity of a local development setup.
So how did we do it? Our answer: Contentful.
Contentful is an API-First, Content-Centric service that caters to developers and content managers by surfacing an interface they enjoy. Developers typically like interacting with an API and JSON, and content managers typically like working with a rich user interface. Contentful provides both, without the bad bits! So here’s how we did it:
The site runs off AngularJS, solved!
Because content is transferred as plain JSON, we’re able to use any framework. We simply query Contentful for the raw content, and inject it into a view using a templating engine. In our case we wrote a simple Gulp task to go alongside our build and deploy tasks, to query and inject the content into respective HTML files our AngularJS app is aware of.
Updating content requires minimal developer involvement, solved!
Contentful supply rich customisable editors that support markdown, images, videos and more, making it straightforward and intuitive for non-developers to jump in and start making updates. We simply setup our Content Models to restrict content to a type and format our build task could consume. We then wrote a Slack integration allowing anyone to trigger a build and deploy of the latest content. So, provided the change was not too complicated, the entire process of updating content to deployment was free of any developers involvement.
Preview before launch, solved!
Contentful provide two API keys to pull content with. The first is the Delivery API which only pulls down published content, and the other is the Preview API which pulls down both published and unpublished content (i.e. Draft content). This allowed us to deploy unpublished content to our preview marketing site environment before live deployment, via another Slack integration.
And there you have it! With just a few constraints, a little creativity, and a handful of awesome third party tools, we were able to whip up a solution that not only suit all our current needs, but enables us to do some pretty cool things in the future.