Centurion-magazine.com — Front to Back

A quick run-through of the different technologies and development features we used to create the new Centurion-magazine.com.

First and foremost we wanted to make a web-app that was as fast and user-responsive as possible with the clients’s heavy imagery, dynamic content and advertising (Banners…) needs in mind, utilising features that are progressively enhancing the experience.

For cardmembers, the web-app offers special sections and features Such as: Content tailored to the users’ personal interests, luxury limited edition items created exclusively for Centurion Magazine readers by leading luxury brands, an archive of past magazines, a comprehensive travel planner — and the definitive forecasting tool for 2016, The Compendium by Centurion.

Umbraco is our go to system for anything that needs a CMS. At the moment centurion-magazine.com is serving 3000+ articles and 10.000+ media without Umbraco breaking a sweat. Umbraco uses the Razor syntax to handle templating, offering us great flexibility and functionality in the template layer. We host the solution as a Web-App on Microsofts Azure platform where you get easy deployment flows and scaleability more or less out of the box.

Responsive & Single Page Application

Mobile and Desktop share the same CSS (Stylus) and Javascript (Typescript) code-base making the web-app close to 100% responsive with a few adaptive behaviours. We did so the CSS is mobile first scaling styles upwards through media-queries taking away some of the performance hogs on mobile when styles get’s overwritten.

We decided to build the web-app with a Single Page Application (SPA) approach for maximum speed, performance and feature flexibility. Once the user has loaded the initial app, each page is then fetched via the Ajax API, that simply returns a JSON object containing a pre-rendered, server-cached template and useful page data, as we are only updating the parts that needs to be changed upon page change we are saving plenty of performance and valuable rendering seconds, making the web-app feel very responsive and light on mobile.

Through Google Analytics we know what pages users interacts with the most (Doh..) and we use link pre-fetching to tell the browser to pre-fetch these pages in the background. We also use intent logic to fetch pages in the background saving the data in sessionStorage as well as saving previous visited pages to sessionStorage thereby preventing unnecessary calls to the server.

Offline & Push Notifications via Service Workers

A couple of Service Workers are in place. One that allows Centurion Magazine, through Umbraco, to handle and push new articles to users via Push Notification API.

Another Service Worker is using Google’s sw-toolbox to handle offline scenarios across the web-app, using a combination between strategies “Network First” and “Cache First”, this allows us to serve all none-critical and previously visited pages in offline-mode. For critical pages (login, signup etc.) or none-visited pages we show the user a general offline page that allows him to navigate back to already visited pages. This way we give the user a close to native-feeling web-app that never breaks hens experience.

Front-end misc

We used our in house lightweight front-end framework Single that integrates seamlessly with our custom package for Umbraco. The framework handles routing, pages logic, templating, and has a UI event model system build in and a lot more neat features to get us developing on project-features within hours.

A few features and tricks:

  • Inline-styling, to show an initial “load” screen to the user. Especially mobile-users benefits from this.
  • Google DFP integration via the DFP Javascript API, to give us control over when to show banners and update UI — giving more space to content (also if user has ad-blocker) if a banner is not available. This way we handle banners asynchronously, preventing banners/3rd party from blocking the web-app, which is a huge problem across the current mobile-web. Reference: http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=0
  • HTML5 <picture> element to serve an array of screen optimised images, we used this polyfill https://github.com/scottjehl/picturefill as the picture element is not fully supported.
  • Backbone, keeping the logic of the app light and tight. No need to get all fancy and bloated with the hype-trains.
  • <template> trick to wrap <img> tags, preventing images from blocking initial load. Trick from: https://www.christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images/
  • The 5 custom fonts we load asynchronously to prevent initial load-block. As it is a SPA the fonts persist when changing pages (no font blinking..). webfontload library from Google/Typekit is used.
  • Whole site is responsive with a few adaptive features.
  • Clean none-disturbing brand-enhancing animations.
  • Catch front-end (they happen!) Errors and report them to a Slack channel through our in-house developed “Error Bot”, soon to be released via RELAX Tools. The site also uses RELAX Tools “Uptime Bot” alerting us if the website goes down. More info on RELAX Tools here: http://relax.tools
  • All articles are indexed in Lucene for fast search and filtering
  • SPA web-app is fully SEO optimised, out of the box from Single and Umbraco.
  • Gulp tasks (via the Single framework) to handle everything from compiling, code validation and deployments.
  • TypeScript, typed superset of JavaScript which makes it possible for us to build a strong, easy-readable code foundation that follows strict OOP principles.
  • + many other small tricks to make the site snappy and happy.

A couple of future improvements and explorations will be to update the servers to handle the HTTP/2 protocol. Switch our deployment flow and hosting onto the Umbraco cloud. We also plan to explore the possibilities of exploring using a streaming model rather than the asynchronous Ajax model.

Swing by Centurion Magazine.com

Follow us RWATGG.com, Facebook, Twitter

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.