Adaptive web applications for all devices

Description

So you’re the resident rock star frontend engineer on your team, and your boss has tasked you with building the web application for the company’s latest product. Easy. You’ve already built so many. But wait, it has to support all devices? From a single codebase? And the product is complicated enough that the designer has come up with two different sets of mocks based on device size? It’s too much to rely just on media queries, but you’re not thrilled about the idea of maintaining two distinct device-based paths of code. . .

eBay uses adaptive components and imports to maintain a single codebase for applications, which allows developers to easily send down a completely different set of code/assets depending on the requesting device. This innovative approach, based on an intuitive file naming convention, has been employed by many teams, is open source, and works with a variety UI libraries and module bundlers.

Connie Chang and Michael Rawlings explore various approaches to building web applications that work across multiple devices, using as much shared code as possible. Along the way, Connie and Michael discuss what has and hasn’t worked well at eBay and why eBay set out to solve the problem in a new way. There are inherent challenges to building a UI that is optimized for multiple devices, but eBay wanted to minimize the associated costs while allowing freedom and minimizing page weight and provide a solution that works seamlessly both on the server (Node.js) and in the browser. Connie and Michael conclude by sharing a codebase that utilizes this technique and demonstrate how you can use this open source solution to get the same benefits in your own applications.