Building Version 3 of HallsHire.com; a technical write-up

Disclaimer: This blog post is going to be very boring for most people, but for those who dabble in web development it might perhaps provide a little interesting insight.

HallsHire.com has been running for over 12 years now, and version 3 of the site has just been launched.

To give you a bit of history, the original version was actually written in Perl, but that was replaced about 7 years ago with a custom built PHP version. Now that version too was terribly out of date. (It was probably the last site I built completely on my own PHP framework in fact.) Up until a couple of months ago CodeIgniter was my framework of choice (and I do still really love it), then I started dabbling with the next big thing in PHP MVC frameworks, Laravel, and I've been massively impressed with Laravel over the past few months, so thought I'd bite the bullet and embark on the long overdue re-build of HallsHire on the framework.

And it really was a big task. As with any site that's been added to over the years, the old cobbled together version of HallsHire had a lot of features and would take a great time of time to re-write them all, not to mention porting all the hall and user data across to a new format, and of course - keeping Google happy in the process.

Laravel is many things, but quick to work with isn't really one of them. I mean it is quick in many ways, but things like database migrations do slow you down initially. Although in the long run they make the code much more manageable and maintainable.

The Technology Highlights

So as I said, the new site is built on Laravel 5.3, and makes use of the following:

  1. Google Maps JS and PHP API - For maps and geo coding addresses to get lat/lngs.
  2. jQuery - Most sites use this JavaScript library these days. It just makes creating cool interfaces and functionality so much easier than writing regular JavaScript.
  3. jQuery UI - Used for things like date pickers and drag and dropping things / sorting elements etc.
  4. Bootstrap CSS framework - The whole site uses their grid system, modals, icons etc.
  5. Fontawesome
  6. Google Fonts
  7. MySQL
  8. Redis caching server - Pages are cached and served from memory in order to reduce load on the MySQL database which can be a bottleneck.
  9. Mod Page speed - To make the site as quick as possible
  10. Cloudfront CDN - A content delivery network makes delivery of things like images and Javascript as quick as possible from a location close to the visitor.
  11. Mozjpeg for losslessly optimising the images to make them as small as possible which ultimately makes them quicker to load.
  12. Sass / Gulp - As part of Laravel Gulp is used to compile SASS and uglify and compress JS files primarily, but also has lots of other features I don't really use.
  13. summernote - In the past I've always used TinyMCE, but now they've changed their pricing structure for things like Moxiemanager (I'm not a fan of paying for things monthly), I thought it was time to look for an alternative and this seems to fit the bill nicely.
  14. AWS EC2 Instance running the Apache webserver.
  15. FullCalendar - The last custom built calendar was a little buggy with the ocasional day missing here and there, so hopefully now we're using an established JS calendar library, days won't go missing as often.
  16. Git - The whole codebase is maintained in a private Git repository.

Other technical considerations

  1. Include structured data
  2. Open graph tags for Facebook sharing
  3. Addthis widget
  4. Social media SSO - Allowing people to use their Facebook, Twitter and LinkedIn accounts to sign in to the site.

Main technical challenges

1. Exporting the old MySQL database and re-importing into a Laravel compatible format.

Whilst much of the thinking behind the database schema had been done already, the process of actually re-creating and re-importing all the data across was a bit of a project in itself. There were about 4k users and the same number of halls to move, all with associated data spread across numerous related MySQL pivot tables. I wrote numerous scripts to loop through the old halls and user data, re-generate all the images and save them in a new location on the new site. All the time needing to maintain the same unique IDs (keys) that are required to link everything together in the database.

2. Maintaining the same URL structure, page titles, across the site in order for Google to keep our traffic coming in.

Keeping Google happy is essential for any established website whose traffic relies on organic search. So keeping URLs the same (or adding 301 redirects for those that needed to change) was essential.

3. Implementing a better search with increased use of geolocation services via the Google Maps API.

When you do a keyword search on the site now the site uses the Google Maps Geocoding service to get lat/lng values for the destination in order to find halls in the vicinity. The API allows you to do 2.5k API requests a day for free, and when the site launched it quickly used in the daily allowance, rendering the search fairly useless for a couple of hours until the news days allocation was available. To combat this I implemented a local cache of lat/lng looks which solved the problem as many of the requests were for county and town names often repeated.

4. Keeping the site quick

This was a bit of a challenge. The old site made quite heavy use of file caches and being custom built, was actually quite "light". When I first launched the new site I found the number of MySQL queries being used to load the pages was a little insane. However the Laravel Debugbar helped me improve my eager loading and reduce the number of SQL queries considerably. I then implemented initially a file cache, followed by a redis cache for storing full cached page results which really helped to take load off MySQL. I also got a little carried away with Google's pagespeed Insights suggestions and installed Mozjpeg on the server which losslessly compresses the uploaded images and saved in total about 29MB in disk space in the process. The process runs as a cronjob every hour, compressing any new hall images that have been uploaded.

The site already ran off an Amazon EC2 instance, but I also made use of another of the AWS resources and offloaded as much as possible to a CloudFront CDN in an attempt to further lessen the load on the web server. I've had to revert to loading the CSS files from the webserver for the time being, as the fonts were causing issues when loaded from a different domain than HallsHire.com, but I'll move the CSS across at some point too.

There have been numerous other tweaks I've made to the code to try and keep things as quick and responsive as possible for the best possible user experience, such as loading unnecessary CSS files with JS asynchronously after the page has loaded to avoid page blocking resources. As well as loading as much JavaScript as possible in a similar fashion.

Today I've installed Mod Pagespeed which is something I've been meaning to try for ages, along with installing a Redis server and configuring it for use with my Laravel application. Both were super easy to do thanks to the kind people who wrote the great articles linked to previously.

Still to do

I have a long list of things I'd like to build onto the site now I've updated the codebase of the old version. High on my list is providing statistics for halls, so you can see more information about who's visiting your page. Whether this includes using the Google Analytics API or custom stats remains to be investigated. I'm also interested in pursuing some kind of booking system for halls and incorporating this with the new calendar. One thing that might be quite quick to add is bigger and better pictures for spotlight and featured listings, and possibly even video-walkthroughs or Google Street view to really help potential hirers explore halls and their surroundings. Finally a bulk enquiry system, making it easier for people to submit the same message to lots of halls at once, perhaps with a 'favourites list' interface.

Has it been worth it?

It's been 5 solid weeks of work, including late nights and weekends, (thanks to my day-job for giving me the time off), but HallsHire.com now has a great technical platform upon which to build new features and hopefully take the site to new heights and audiences. This version of the site really is a massive technical leap over the last one and despite a couple of bumps along the way is now super fast to use and the server is purring like a kitten.

Its vastly improved admin area also makes managing the site much quicker and easier; for even non-technical personnel. The search is better, the design is nicer. It's been built on top of a CSS framework with mobile responsive design in mind -  this version works very nicely on a whole range of screen sizes and devices.

But aside from personal satisfaction, what I think of the site doesn't really matter a great deal. It's the users opinions that count, and hopefully you like the site too, and find it quick and easy to use; whether you're advertising your hall or looking for a venue for hire.

If you have any questions or comments on the new site or the technical blurb or ideas about new features you'd like to see on HallsHire, I'd love to hear them, so drop me a line.

More from our blog