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

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

4. airbnb.com
airbnb.com/s

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

22. 1471305600
(i.e. today)

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

25. github.com/airbnb/react-dates

26. Thank you!