Ruby Video | Aussie Internet - How We Learned To Stop Fearing The NBN

Talks

Aussie Internet - How We Learned To Stop Fearing The NBN and Love the SPA

Geoffrey Donaldson

1 talk

#single-page-applications-spa

Aussie Internet - How We Learned To Stop Fearing The NBN and Love the SPA

by Geoffrey Donaldson

In his talk at RubyConf AU 2023, Geoffrey Donaldson addresses the challenges of delivering performant web applications using modern technologies across Australia's varied internet infrastructure, particularly in rural areas where the National Broadband Network (NBN) covers a wide spectrum of speeds and reliability. Key points from the presentation include:

The Importance of Tool Selection: Choosing the right technology for the environment is crucial, especially when dealing with the internet limitations faced in remote regions.
Understanding the NBN's Structure: Donaldson outlines the NBN's three components: wired infrastructure, fixed wireless, and satellite options like Sky Muster. He highlights the issues with latency, particularly the impact of satellite connections, which can add significant delays to user interactions.
Real-World Application Examples: At Black Box Co., Donaldson's team develops applications that analyze large datasets for Australian farmers, showcasing the need for efficient data handling to create interactive dashboards in bandwidth-limited areas.
Techniques for Overcoming Limitations: Donaldson discusses various strategies to ensure application performance despite latency and limited bandwidth, including:
- Using formats like MessagePack to reduce payload sizes.
- Implementing effective caching strategies with e-tags to prevent repetitive data transfers.
- Utilizing service workers for offline capabilities and optimizing network calls.
User Experience Focus: Throughout the development process, the emphasis remains on user experience. Donaldson shares the importance of tailoring applications to meet the specific needs of farmers who may face unique tech challenges.
Call for Caution with New Tools: He advises developers to be mindful of the latest technologies, ensuring that they do not compromise on user accessibility or performance.

In conclusion, Donaldson emphasizes the need for resilience in application design, particularly in rural areas where internet performance can be inconsistent. By optimizing for these environments, developers can enhance overall user experience, making their applications more effective for all users, urban and rural alike.

00:00:00.000 We need to use the right tool for the right job, especially when delivering applications over the Australian internet. In particular, in some rural areas, modern web technologies like single-page applications can deliver even when the National Broadband Network (NBN) does not. Who better to tell us about that than Geoffrey Donaldson? Geoffrey has been developing customer-centric apps for over two decades and is the CTO of Black Box Co.

00:00:17.340 He has also been empowering people by simplifying data. The question is, does he pair? He does! There was this one time at Rails Camp where he paired with both of us at the same time. That's essentially tripling or mobbing, a small mob of three. He said pairing with me was a great experience, but what he said about me? Well, you don't want to know.

00:01:18.240 At Black Box, we provide statistical analysis of cattle data to help farmers manage their herds. This is known to some as powerful bovine intelligence, or Power BI for short. Farmers have been told for years that data is valuable and that they should be collecting it, which most of them have. However, many don't know what to do with it; a lot of them have limited experience with technology or Excel, and they’ve been reluctant to part with their data because they have been told it is so valuable.

00:02:00.760 Our goal is to help provide clear outcomes from this data and to make it easier for these farmers to share their data across the supply chain. We have customers across Australia, some in places you probably didn't think people could live. Some of these farms manage over 80,000 head of cattle. So we need to be able to transmit enough data to render our dashboards and make them useful for people in some of the most physically isolated places in Australia.

00:02:26.880 Fortunately, we have the NBN, which consists of three major parts. There’s the wired infrastructure and the fixed wireless towers, which are somewhat in the middle, not quite as good as fiber or HFC, but they're trying to deliver a reasonable experience. Let's take a look at this dense patch here which contains a whole series of towers. These fixed wireless towers operate much like cell phone towers, covering specific service areas. However, unlike cell phone towers, fixed wireless has a range limitation of about 14.5 kilometers, which is arbitrary and due to software constraints. Rumors have it that this could be updated in the near future.

00:03:06.840 However, details are hard to come by, as the NBN requires everyone to sign non-disclosure agreements (NDAs). To find out if you have service availability, you have to stay under the NDA, which complicates things. The towers can cover a range of about 40 kilometers, but some of our team members live further out than this, making access challenging.

00:03:37.260 So, what are the options? There are pole satellites, affectionately known as Sky Muster, that provide NBN to rural Australia. These satellites operate in geostationary orbits and have about five years of fuel left. However, they are positioned 300 milliseconds away, one way. The way they work is by using 101 directional beams that break Australia into various zones known as spot beams, and the data for anyone located in these areas is assigned to a specific spot beam. These beams relay the data to one of the nine base stations around Australia and then get shipped back to Sydney before joining the internet.

00:05:04.560 Given that spot beams can overlap, if you are in a location like Gloucester, you could potentially be covered by multiple beams. For example, if you're lucky enough to connect to beam 29, your data might go to Roma and then back to Sydney. If you connect with beam 28, however, it could route your data all the way to Western Australia. Your neighbors might experience an extra 30 to 40 milliseconds difference in latency, and if a beam becomes overpopulated, you may be swapped to another beam, leading to about 10 minutes of downtime.

00:06:40.860 Latency is crucial for online activities. For games, you generally want latency between 20 and 40 milliseconds, while video calls should be less than 200 milliseconds; otherwise, people begin talking over each other. For application user interfaces, keeping latency under 250 milliseconds is essential; otherwise, users start to feel that their applications are broken. With Sky Muster, the latency is approximately 600 milliseconds, which disrupts all of these needs.

00:07:23.079 Building an application under such conditions challenges us. We use Ruby to write artisanal, handcrafted applications. However, like most developers, we are tempted by the new and shiny tools available. Sometimes, in our quest for novelty, we forget about the user experience, especially when those tools appear to make us more productive. One notable tool is Turbo, which lets you make server calls without writing any JavaScript. Some of our apps utilize Turbo, but we must always remember our customers and their latency constraints.

00:09:00.480 In working on an application, we often face issues related to speed and performance. Due to our team's diverse backgrounds, we've encountered a range of user experiences. For example, it can be frustrating to simply open a menu and see a significant wait. This was on high-speed gigabit internet, and it’s even worse for remote teams. Our initial prototype was built in Power BI, and this clearly illustrated that waiting for server responses was not the kind of user experience we aimed to deliver.

00:10:04.740 Thus, we focused on understanding user requirements before rushing into new technologies. One of our greatest challenges is managing our users' experience with NBN satellite transfers, which offer about 25 Mbps down and 5 Mbps up. According to NBN Co, these satellites were designed to match their speed, occasionally reaching optimal speeds, but for the rest of the day, data transfer can be significantly slower. The reliability issues further complicate matters, as connections often drop.

00:11:03.600 Our application must handle a lot of data and provide an interactive experience – clicking and filtering one chart influences others. We wanted to ensure that even farmers in rural areas could enjoy a seamless experience. However, limitations like network speed and reliability create hurdles. When waiting for data, I decided to make the waiting screen at least somewhat cute; sometimes, if there's no data, the screen shows a sad cow to reflect the waiting experience.

00:12:11.880 There are numerous hurdles we had to overcome, such as limited bandwidth, latency, and unreliable connections. One straightforward solution is to send fewer bytes. Most of our dashboards need to transmit anywhere from 2,000 to 80,000 records to achieve the desire for interactivity. We discovered early on that rendering our charts in canvas format allowed us to handle large amounts of data without overwhelming the browser.

00:12:47.880 We also transitioned to using a more efficient data format such as MessagePack. This format reduces payload size significantly, allowing for swifter data transfers. While we discuss options to compress data size, we must also keep in mind how the data is handled and shared between front-end and back-end applications. By controlling the data sent and focusing on shared keys, we could optimize our payload drastically.

00:14:05.880 We also utilized libraries to allow for efficient data compression, which made a massive impact. For example, by compressing data effectively, we managed to drop our payload from 6.5 MB down to 250 KB. This was one of the winning strategies employed to address the issues we've faced. In modern browsers, features such as Brotli compression have simplified the implementation process and reduced overall data size.

00:15:13.740 In addition to optimizing data transfer sizes, we implemented caching strategies using e-tags and caching headers. This allows browsers to quickly respond with already seen content, reducing unnecessary data transfers. These strategies are immensely beneficial for ensuring that we aren't repeatedly sending data that users have already received.

00:16:29.160 Lastly, we explored utilizing service workers, which act like a CDN for our app, caching resources and optimizing network requests. They allow us to intercept network calls and determine the best way to handle them, ensuring users still receive responses even in scenarios with unreliable connections. Approaches such as cache-first or stale-while-revalidate can enhance user experience significantly.

00:17:53.040 When we build our applications with resilience in mind, optimizing for rural users means making them faster and more reliable for users in urban settings as well. It's vital to create accessible, performant applications that serve everyone. One application I admire is Linear, a ticketing app designed to function offline first and sync with the server whenever possible.

00:20:05.680 As we conclude, let's remember the importance of not always opting for the shiniest tools. In the current trend of developing single-page applications, we must consider our customers' needs. Sometimes, employing a single-page app is indeed the best option. Lastly, remember to never break the URL structure in your application, as it is crucial for both performance and accessibility. JavaScript can easily disrupt accessibility if utilized improperly. I encourage all of you to explore alternative frameworks and keep the users’ needs at the forefront of your development efforts.

RubyConf AU 2023