From Components to Applications

on YouTube ↗24m

" summary

Yoox Net‑A‑Porter reimplements product listing as composable Polymer components, ships a repo on GitHub, and rolls the app to a beta cohort of high‑end customers. Components follow atomic components principles, expose a JSON data contract, use two‑way binding for pagination (mediator pattern), and run unit and component tests with web component tester and fixtures. Automated structured‑data checks, visual tests, telemetry beacons and API latency metrics (including time to remove skeleton and paginated image‑promise spinners >400ms) prove behavior and performance in production.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 1:22Adopting Atomic Design
3. 2:31Atomic component principles
4. 7:01Building the product summary
5. 10:45Developing the application
6. 13:13Component behavior
7. 15:40Application UI structure
8. 17:37Performance optimization
9. 19:24Telemetry and conclusion

" related talks

• 41mComponents Approach to Building Web AppsVinci Rufus · Meta Refresh 2015
• 19mWeb ComponentsJeff Tapper · FITC Web Unleashed 2014
• 22myo polymerAddy Osmani · dotJS 2013
• 01h 12mMake Web Development Fun Again, with Web ComponentsBryan Ollendyke, Michael Potter · DrupalCamp NJ 2019
• 39mProgressive web apps with PolymerMartin Splitt · JavaScript fwdays'17
• 51mBuilding Amazing Single Page Applications the Right WayJustin Meyer · GOTO Chicago 2015
• 57mComponent Driven Repo for a Component Driven WorldDebbie O'Brien · NDC Oslo 2021
• 33mEnd to End Apps with PolymerKevin Schaaf · Polymer Summit 2017