Designing and building quickly for the web

Ed Corcoran walks us through the advantages of using Polymer and Contentful together and shares some handy tips to get you up and running.

A couple of weeks ago I finished a portfolio site for a client and I was pretty impressed that only took me two weeks to go from brief to built. I was able to move so quickly thanks to being able to work closely with the client the whole way through and selecting a choice of tools that behaved the way I expected to.

On the first day of the project I ran a co-design workshop with the client so we were on the same page with direction and requirements. This meant I was able to get designs done in a couple of days.

For the build and content gathering portions of the project I decided to use Polymer and Contentful. When I was planning the project there wasn’t a whole lot of content available about using the two together which is why I thought you would appreciate me sharing a few tips and tricks I picked up along the way.

But first, what is Polymer?

Polymer is a lightweight library made by Google that helps you take full advantage of Web Components.

With Web Components, you can create reusable custom elements that interoperate seamlessly with the browser’s built-in elements or break your app up into right-sized components, making your code cleaner and less expensive to maintain.

There are some great resources available that can help kick start your Polymer projects and the Getting Started section on the Polymer project site is a great introduction.

Polycasts on Youtube is a great web series where Rob Dodson, one of the Google developers responsible for Polymer, teaches you the ins and outs of Polymer and the awesome components the Google Polymer team are making.

The Polymer App Toolbox, is a collection of components made by the Google Polymer Devs that make it super easy to get a fully featured web app set up straight out of the box.

Webcomponents.org, has a great selection of community built web components and helpful resources to help you build your own components too. All the content on the site is free, and they welcome anyone to publish their own components or add any resources too.

Okay, and what is Contentful?

Contentful is an API-first CMS with a nice user-friendly web interface that lets you create a custom content model instead of dealing with fixed, predefined templates like some alternatives offer.

This is great because it means you can make your content fit the needs of your product and not the other way around. The web interface makes creating bespoke content types a breeze and also means handing it over to content creators or editors is easy no matter their skill level.

One minor issue is that there aren’t many online resources on how to use Contentful but fortunately the Getting Started section on the Contentful site is pretty great.

Oh and I forgot to mention you can use it for free! The free tier gets you access to the Contentful Web App & APIs, and the limits are pretty generous you get 10,000 records, 3 users, and 50,000 API calls per month, which is enough for most small to medium projects.

Tips for using Contentful

These are a few tips to help you get started if you’re planning to use Contentful for a project.

Plan your content structure as much as you can before you start.

This allows you to create your content model in Contentful and get your client can start entering data before development has even begun. The advantage of this is you can start developing with actual live content so you can avoid last minute revisions.

Create modular content types in Contentful

If you create separate content types for different modules on your pages you can use reference fields to attach them to another content type. This means the you can have more dynamic templates and control over page structure in Contentful.

Image module content type with its own custom fields
Post content type with module reference fields

A handy article to check out when planing your content model and thinking about modular content pages is ‘Creating a digital lookbook’ on the Contentful Blog.

Use epic-contentful to get your content from Contentful

There is a Polymer component called epic-contentful that implements the contentful.js SDK into an easy to use package and trust me it’ll make life easier when you’re dealing with content types with media attached.

This component is great because it returns an array of objects with all media fields linked and ready to use, whereas if you just use iron-ajax (the Google component for general ajax requests) you have to manually match all of the media Contentful returns to each content entry which is a bit of a pain.

Tips for using your data in Polymer

The last couple of tips are just handy places to start your thoughts while you plan how your Polymer app is going to handle and display your data.

Page routing, templates, and passing data around

The good news is the Polymer App Toolkit has some components called app-route, app-layout and iron-pages (or neon-animated-pages if you’re feeling fancy) that make it really easy to get routing and pages set up.

There is a great Polycast about page routing with the app-route component that you should check out. It will explain how to get page routing working and a brief explanation about how you can pass data to different templates depending on the location of your app.

Listing, filtering and sorting content entries

Polymer has a great template repeater called dom-repeat that takes an array of objects and repeats an html template for each item in the array. dom-repeat also has some great built in filter and sort properties, you should definitely check out this great article about filtering and sorting dom-repeat instances.

Why is this setup better than alternatives?

As of right now I haven’t found anything that is; as flexible, free, quick and easy to set up as this combination.

I think that Contentful says it best; “[it’s] just the content, no presets or templates —Contentful delivers the content, and you design around it.” with this and the speed of developing with Polymer you can’t really have a bad time.

Please, comment below and let me know if you have come across any other products or services that are similar that you think could be better.