by Joe Duran
A flagship offering of Label Insight’s tech services is our LabelSync product. LabelSync customers expect their SmartLabel landing pages to be performant, globally available, and resilient to failure. We recently upgraded the infrastructure that powers these pages to leverage React and AWS Lambda@Edge, in order to provide our users with a dynamic web application that scales automatically and makes our data more secure. Read on to learn more about serverless computing at the edge!
Prior to upgrading our infrastructure, our SmartLabel landing pages used a traditional client-side web application to fetch and render data using Angular.js 1.x. Requests to our SmartLabel domains were handled by a CloudFront distribution and the code for the templates was stored in S3. This application model provided a high-quality experience for our customers but presented a number of challenges for us as an engineering team.
While Angular.js was a suitable choice for client development at the time of the SmartLabel application’s initial construction, by 2020 our company’s front end infrastructure favored React. We cherished the opportunity to burn down one of our last outstanding Angular applications so that our SmartLabel landing pages could inherit the benefits of our streamlined, modernized React development practices.
Since SmartLabel pages were publicly available on a number of domains, any API calls they made on the client had to be similarly public. This meant at least one SmartLabel API endpoint had to be unauthenticated. We long suspected the endpoint had been scraped by competitors and hoped that our new solution would allow us to sunset it.
Our 2.0 application leverages Lambda@Edge, an AWS offering that allows developers to run custom code off of CloudFront events. In our case, when a user makes a request to a SmartLabel page, a lambda function fires that fetches the necessary data and renders the entire page as static content. Let’s take a look at how this model solves the three problems outlined above.
The new SmartLabel template is a React component. We already have a slew of best practices for developing with React, and find it a breeze to test and deploy code using tools like Jest and Storybook. We can leverage our shared library of components to ensure that our users’ experience is uniform across our software suite. We also have the added benefit of not having to context-switch between Angular and React when developing features for our LabelSync product.
<a> tags for tab navigation. This means our customers can these landing pages even in grocery stores and other retail environments where internet speeds may not be ideal, and when the bandwidth is sufficient, while knowing they’ll get a modern, snappy web app experience.
Lambda@Edge solves all three problems we identified with our old infrastructure, but in fact it does more than that. L@E auto-scales with our app’s traffic, so we don’t have to think about servers. CloudFront caches the results of the lambda so subsequent requests to the same page will not result in duplicative lambda efforts. Our AWS costs for the entire application are on the order of pennies.