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
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
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.
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.
- 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.
- + 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