Picking Dates @Airbnb
•
0 likes•1,189 views
- Maja Wichrowska worked on the datepicker component at Airbnb for almost 2 years, taking it from an initial hacky solution to a fully redesigned, internationalized, and customizable component. - Early on, the datepicker was a small mission-critical part of the site built quickly without much focus on architecture. As Airbnb grew, technical debt accumulated and the datepicker struggled to scale. - Maja led a redesign of the datepicker using React to create three main controlled components that are easily internationalizable, cross-browser compatible, and customizable through props and styles.
More Related Content
Similar to Picking Dates @Airbnb
Similar to Picking Dates @Airbnb (20)
Recently uploaded
Recently uploaded (20)
Picking Dates @Airbnb
- 1. Picking Dates @Airbnb MAJA WICHROWSKA / 2016-08-16 A Journey Through Time
- 2. Picking Dates @Airbnb MAJA WICHROWSKA / 1471305600 The Reason I Drink
- 3. • Tenure: Almost 2 years • Team: Web Infrastructure • Fun Fact: Once saw a live Potter Puppet Pals Show when they opened for the Wizard Rock band Harry and the Potters at Slims. • Responsibilities: De Facto owner of all things date related on the frontend of Airbnb Maja Wichrowska Mostly Frontend Engineer
- 5. ~5 years ago
- 6. • Small Team: ~15 engineers • Building Fast: More important to get something out there then it is to engineer it perfectly • Mission-Critical Component: If you can't select dates on the site, you can't really book • We'll Fix It Later: Make this good later when everything is no longer on fire. Airbnb: The Startup 2011
- 7. Out of the box solution
- 8. ~ 4 years ago
- 9. • Medium team: ~30 engineers • Established Product: People actively use Airbnb • Growing Rapidly: Scale is the biggest issue on everyone's mind Airbnb: The Small Company 2012
- 10. FakeQueryUi /* * At the moment (ha), moment's kind of a pain wrt Ender (it detects Ender, * does not attach to window, and then breaks all of its own i18n files). It * also lacks some necessary data in the i18n files (specifically, what day * the locale starts its weeks on). For now use this shim, but don't * use it anywhere outside of the Datepicker module or it'll be impossible to * ever kill it down the line someday. */
- 11. FakeQueryUi /* * Horrifying Templating DSL * ------------------------- * * Lalala, don't mind the roll-your-own templating DSL, it is tres horrible * but slightly less horrible than mashing strings together. Is it worth * making the datepicker have a Handlebars dependency and doing things * properly? I don't know! */ function horror() {
- 12. FakeQueryUi /* * OH GOD I'M SO SORRY * * Some horrible templating. If you ever have to touch this, I will buy you * two beers and a tequila shot. * * Love, * [redacted] */
- 13. FakeQueryUi
- 14. ~1 year ago
- 15. • Large team: ~200 engineers • Time/Resources for Technical Debt: The goal now is to build a sustainable architecture for the future • Frontend Alignment: We know what technologies we're investing in (Hint: It's React) • Hacks aren't cutting it anymore: The date picker keeps breaking in new and fascinating ways Airbnb: The Corporate Behemoth The Relatively Large Company 2015
- 16. Australia Brazil
- 17. One Particularly Excitable New Hire Literally chose #webinfra after talking with the then-manager about building a mobile-friendly, easily internationalized datepicker Maja Wichrowska Particularly Excitable New Hire
- 18. “'Datepicker redesign' are the two best words in the English language" Redesign
- 19. Totally Smooth Launch Also known as that time I was writing a postmortem every week for five weeks
- 20. Why Date Formats Matter Or my personal favorite new date picker related bug • Rails I18n vs. MomentJS's 'L' format: The same in some locales, but not all locales • Localized dates in URLs: This is a very bad idea • No dates search returns all results: If you test data has no availability, the search page looks successful Standardize your dates! YYYY-MM-DD
- 23. • 3 fully-controlled main components: <DateRangePicker/ >, <SingleDatePicker/>, <DayPicker/> • Easily internationalizable: Integrates with moment locales, takes in props to localize month titles, accessibility text • Cross-browser compatible: Has been tested in IE9/10/11 and Edge, Safari, Firefox, Chrome, Mobile Safari on iPads and iPhones, and Chrome on Android devices • Utility classes for date conversion and comparison: Includes built in functions for converting to and from moment objects to strings as well as to easily compare moment date objects • Customizable props and styles: Ideal for conforming the component to whatever design and device you are working with The New Datepicker 2016
- 26. Thank you!