The Weather Network
How We Architected The Mobile Web For Scale And Simplicity
Mobile Web & Infrastructure
Your weather when it really matters
The Weather Network is a leader in international multi-platform consumer weather and weather-related services. Specializing on a multitude of digital platforms, The Weather Network also owns and operates Canada’s only weather specialty television network.
We were tasked with developing and implementing a new architecture for The Weather Networks' web infrastructure, with a mobile-first approach at the forefront.
Why an architecture redesign was needed
In the past, it used to be that the only way you could use a computer was to use a mainframe. Then, as processing power, storage, and bandwidth increased, our primary computer became a desktop… and then a laptop… and now a smart phone and tablet.
Right now, we are in the midst of the fastest and most profound shift that’s ever happened, with phones allowing us to consume, share, and create information like never before. Whenever there is a major change in platform, the leaders of the old platform are seldom the leaders of the new platform. However, despite The Weather Network being a dominant player in traditional platforms, they've done an exceptional job of adapting to these platform shifts and establishing a strong presence on them.
The challenge is that as platform shifts occur, the technologies that power them continue to evolve to provide a faster, intuitive, and more seamless experience, and in order to leverage these newer technologies and have continued success in the long-run, sometimes it involves rearchitecting your previous infrastructure.
A deeper understanding
Before developing a solution, we first wanted to develop a deeper understanding of what the current state of their architecture was, what problems it may be facing, and what goals they wanted to achieve with a new, fresh architecture design.
Throughout our discovery we found the following.
Current state of architecture and problems they were experiencing:
- PHP based
- Microservice architecture
- Multiple layers of unnecessary caching
- Use of too many testing tools, and not leveraging the full capabilities of testing tools
Some of the goals they wanted to achieve:
- Faster page load speed to improve experience and SEO
- Server-side rendering of content, when applicable, to ensure Google can index content well
- Client-side rendering of content for that doesn't need to be index by Google, such as Ads
- 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
- Modern app layer that is flexible and can integrate well with an independent set of microservices which are developed separately.
- Ability to measure core analytics and run A/B experiments on client side features and SEO
A new, fresh, performant architecture
After deep diving through their architecture, requirements, goals, and their team we designed a new architecture that would allow current and future success and that touched upon the following.
Web Application Stack And Structure
- Node.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.
- To simplify the multiple layers of unnecessary caching, remove Varnish and simply stick to NGINX for SSL termination and to streamline caching after the delivery network.
Scalability, Performance, And Monitoring
- 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.
- 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.
Analytics And Experimentation
- 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.