Platforms
Web
Google Cloud
AWS
Microsoft Azure
Expertise
Frontend Development
Backend Development
Architecture Design
About The Weather Network
The Weather Network (TWN) website is one of the most popular websites for weather information for Canadians and people around the world. It receives over 47.5 million visitors per month, making it one of the most visited weather websites in the world. With TWN being such a critical pillar of Canadian’s daily lives, continuously improving the experience is always a core priority.
As consumers increasingly continue to view content via mobile devices versus desktop devices, The Weather Network wanted to ensure their architecture and infrastructure was keeping up with new technology standards and was allowing their engineering team to develop swiftly without accumulating technical debt. That’s when Lazer was approached to help. With a focus on mobile-first, our goal was to review the current architecture, identify areas of improvement, refactor the architecture to an improved state, and begin implementing it with the engineer team.
As a result of Lazer's work, The Weather Network was able to improve the performance and scalability of their website, and make it easier for their engineering team to develop new features.
Our Approach
Identifying the goals The Weather Network wanted to achieve
In order to make the new architecture a success, we sought to understand what success looked like for The Weather Network. The team wanted the following:
• Faster page load speeds to improve UX and SEO.
• Server-side rendering of content, when applicable, to ensure Google can index content well.
• Client-side rendering of content that didn’t need to be indexed by Google, such as advertisements.
• Efficient, simple caching of content, data responses, templates, etc.
• Ability to handle large spikes in traffic at any given moment while maintaining peak performance.
• Effective SSL termination and load balancing.
• A modern app layer that is flexible and can integrate well with an independent set of microservices which are developed separately.
• The ability to measure core analytics and run A/B experiments on client side features and SEO.
Understanding the current architecture state and their current blockers for progress
Diving deep into their current architecture and pain points, we identified that they were running with a legacy PHP-based stack that was making it difficult to iterate, managing a number of microservices with different frameworks, maintaining multiple layers of unnecessary caching, and using too many testing tools which they were not leveraging the full capabilities of.
Crafting a scalable web application stack and structure
With a modern, architecture in mind, we architected a web application stack and structure that included:
• Next.js and Express for the server and main app framework.
• React as the frontend framework, with Next.js for pre-rendering/static page generation to ensure server-side rendering for SEO purposes.
• Given the use of microservices, a database wouldn't be needed directly for the web application, but if so, our recommendation was to utilize Mongo
Solving multiple layers of unnecessary caching
To simplify the multiple layers of unnecessary caching, we recommended to remove Varnish and simply stick to NGINX for SSL termination and to streamline caching after the delivery network.
Emphasizing scalability, performance, and monitoring through a cloud-based approach through Google Cloud, AWS, or Microsoft Azure
After discovering that most of the architecture was primarily run on-premises, our primary recommendation was to start transitioning to cloud-based infrastructure to gain resource flexibility. To maintain peak performance and to monitor systems effectively, Grafana, Istio, and NGINX should be utilized to monitor requests, response times, connection counts, response and server statuses, and for traffic in general.
Simplifying testing efforts and focusing on using them well
To simplify their testing efforts, we recommended reducing the number of testing tools by focusing on Jest and Puppeteer for unit and end-to-end testing, and by focusing on K6 for performance/load testing. For cross-browser and device testing, we found BrowserStack as the best fit.
Measuring and monitoring experiments and analytics
For The Weather Network, analytics and experimenting is a huge component to the success and improvement of the website. We found the current method that was used to address analytics was already well done and shouldn't be changed. With respect to client-side experimentation, implementing client-side A/B testing when making product decisions would allow their teams to be much more data-driven in their approaches. With respect to SEO experimentation, implementing SEO A/B testing here as it would allow them to see large improvements in the success of their presence on search engines.
Coaching the TWN engineering team on the new architecture
Upon finalizing the new architecture, we crafted a plan and timeline to train the TWN engineering team on the new architecture, create a few POCs to slowly migrate the application from the old architecture to the new one, and pair-programmed with them to ensure knowledge was transferred over effectively.
The Result
As a result of Lazer’s collaboration with The Weather Network, significant improvements were achieved in the performance and scalability of the mobile website. With the new architecture, we were able to solve for The Weather Network’s core pain points and blockers and work towards a path that would offer their user base and tremendous improvement with regards to the speed and experience of the website. We’re extremely fortunate to have had the opportunity to work with such a great team.