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.
Connie Chang is a frontend engineer at eBay. Connie is passionate about building elegantly simple UI with high usability served from clean and easily understandable code.
Michael Rawlings is a senior software engineer on eBay’s Platform Frameworks team where he works closely with product teams to improve the way front-end applications are built. He enjoys building tools that improve the developer experience and make it simpler to build scalable and performant apps.
Michael is also a maintainer of Marko, the UI library from eBay and is passionate about sharing knowledge through open source."
©2017, O'Reilly Media, Inc. • (800) 889-8969 or (707) 827-7019 • Monday-Friday 7:30am-5pm PT • All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. • firstname.lastname@example.org