At Facebook, we take food seriously. Our chefs take great pride in serving thousands of meals — made from fresh, local ingredients — every day. Out the Window is one of our newest quick-service restaurants, and it offers everything from chicken nuggets to Mexican pizza. Orders are taken not by a member of our culinary team, but by a point-of-sale system that uses some of Facebook’s core technologies and that was designed by our engineers.
When employees visit Out the Window, they place their order using an iPad app that was built with React Native. The menu items, transaction handling, and other features are built on a Parse backend. The coolest part? Employees can order their food online and pick it up within 15 minutes.
Building the ordering app for the iPad took no time at all. React Native’s intuitive layout semantics and short feedback loop helped us iterate quickly and get this app out the door in time for Facebook’s new building opening. In short, React Native took many of the good parts from CSS and left out the cruft:
- The Flexbox layout mode lies at the foundation of React Native’s layout engine. Previously hard, verbose operations like centering a block vertically in the middle of its parent take just one line of CSS with flex.
- Stylesheet declarations are much more tightly coupled with components. This means no more selectors and, consequently, no more messy, unmaintainable CSS files. Instead, you can avoid repeating yourself by composition at the React component level.
Perhaps the best part of using React Native is that you can develop native applications, like web applications. You don’t have to recompile each time you make a change (which is incredibly important when you’re trying to get a layout exactly right), and you can use Chrome’s or Safari’s devtools and console to debug your program.
In the kitchen, we installed a thermal printer to print out the order tickets. You’d think it would be fairly simple to print out an order, but having orders coming in through iPads and a website adds complexity. Using Parse, we were able to simplify the order queue for printing. A Raspberry Pi is used to connect to the ordering system’s database and to send serial data to the printer. Once an order prints, the database updates and then the next order prints.
Another great feature of this system is that we get a bunch of analytics right out of the box. Our chefs can quickly see how many orders they’ve served, which dishes are most popular, and how many unique customers they’ve had on a given day. By combining Parse, React, and a serial printer, we’ve built a point-of-sale system using straightforward building blocks. The results so far have been delicious.
