Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Adaptive web applications for all devices

3:35pm–4:15pm Wednesday, June 21, 2017
Cross-Platform and Mobile
Location: 212 A/B
Secondary topics:  Dependency management, UI frameworks and libraries
Average rating: ****.
(4.12, 8 ratings)

Who is this presentation for?

  • Frontend software engineers building web applications to support both desktop/mobile devices
  • Frontend architects deciding structure of codebase/frameworks to use

Prerequisite knowledge

  • Basic understanding of JavaScript, HTML, and CSS
  • Experience with building web applications, frontend frameworks, and dependency loading/module bundling

What you'll learn

  • Learn how to build a web application in a single codebase that will run in all devices using as much shared code as possible for better scalability and maintenance
  • Understand how to choose the appropriate granularity for customizations in templates, JS, and CSS based on device
  • Explore techniques for maintaining feature parity between desktop and mobile sites


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.

Photo of Connie C. Chang

Connie C. Chang


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.

Photo of Michael Rawlings

Michael Rawlings


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."