Airbnb Is Moving Faster at Scale with GraphQL and Apollo

[tinyvm]

The state of the industry sometimes deeply sadden me.

Creating a stack that complex just to render Static Content... Seriously ?

I'm fairly confident that only the author of this project can do something with the codebase.

It must be an absolute mess between Zeplin , Storybook , Apollo , GraphQL , Next, Yeoman etc...

Just why ?

Can't Airbnb invest in one good CMS and tooling solution ? Don't they have a CTO that define the company tech governance and tech stack ?

Isn't building landing page for "Luxury Destination" one of their core businesses ?

Do each Airbnb engineer create their own stack for a tiny part of the website ?

It just buggers me to see something like this and remind me of their 'React Native Fiasco' where they decided to use React Native but their mobile engineers didn't like JS , so the engineers of each platform just wrote the app using binding to use Java or Objective-C.

Sometimes I really tell myself that working for a FAANGS must be awesome, but then this type of content pops up and it just remind me I should either stay at my current job or create my own business to avoid all this.

[venantius]

I used to work at Airbnb.

Airbnb does not, in fact, have a CTO who dictates the company tech governance and/or stack. They prefer to run things in a federated manner, with individual teams making the decisions that they feel are best for them. While they're encouraged/required to draw up design docs and have them reviewed by an architecture review group, the group's recommendations are non-binding.

This model has advantages and disadvantages. On the upside, it creates an environment where people can take risks and do things that haven't been done inside of the company before. On the other hand, it means people sometimes go out on a limb and push the company into supporting something that turns out not to be sustainable in the long term.

As a matter of personal preference, I like to have a set toolchain that a company is built around. But it would be unwise to suggest that Airbnb's strategy hasn't worked out pretty well for them overall.

[tonyjstark]

I have the same feeling, it seems overly complicated and I pity the developers that join the project at a later stage.

I don't understand the run for GraphQL everywhere, does everybody query sparse and deep nested data on their website? From my experience, Apollo works well except when it doesn't and then you have a lot of magic going on.

Zeplin works quite well for our team and creates a nice connection to our designers. Storybook on the other hand not so much. At first we developers used it, then we had to update some things for Apollo but Storybook was not ready for that. Now everything runs again but nobody uses Storybook actively anymore...

I have the feeling that the software industry is often driven by personal preference instead of sane decisions. I see projects that use micro services without any reason, using React for static content, dockerizing everything to a ridiculous amount, K8s because why not. All of that because it's interesting for the developer not because it's good for the user.

[Dowwie]

I can empathize with an organization interested in motivating its employees over the long term. SPAs, GraphQL, and these other non-essentials are intrinsically rewarding. They give the creators a sense of agency. This motivates people to give their work their best effort. From AirBnB perspective, as long as the value created by these projects doesn't exceed their costs (a quasi-NPV), why not continue them?

The next chapter of intrinsically rewarding work will involve simplifying the complex. Trimming the fat. Reinventing the Zen of Python. Most importantly, it will be glorious.

[andrewmd5]

>Do each Airbnb engineer create their own stack for a tiny part of the website ?

I don't work at Airbnb but I am the CEO of another startup. Our main website (https://rainway.com/) used three different technologies to build it. Why? Because it streamlined development. One team could focus on the code powering the blog, while another could write static pages that query an API. The build process brings it all together.

Tool such as Figma (we moved from Zeplin) do an amazing job for designing entire user interfaces and interactions and providing developers with all the needed materials to implement them. If you're building a homepage for a mom and pop shop, download WordPress. If you need to build something across multiple teams, you need tools to make it easier.

[mlangenberg]

Exactly my thoughts after the design in Zeplin got presented. If your goal is to create this landing page, do you need much more than HTML & CSS and some sort of static site generator / CMS?

[dreamcompiler]

As an Airbnb host, I find managing my property with their website to be a nightmare. It takes three times as long to load as it should and three times as long to do find anything or make changes as it should. The sections are not logically arranged for usability and the whole thing would be vastly improved by consulting with the Nielsen Norman group [whom I have no connection with].

[paulddraper]

> Creating a stack that complex just to render Static Conten

What exactly is Static Content and are you implying AirBnB has it?

Does its mobile app also have Static Content.

[bsbechtel]

I recently did a POC for my company on a mature Angular project to see what it would take to switch over to the Apollo stack. I ended up reducing LOC by 50%, adding caching, full offline support, and optimistic UI. I’m convinced if we had used the Apollo stack at the start of the project, our front end resource requirements might’ve been 30-40% less for the project. The things the Apollo team have done are really making a big impact on engineering teams that adopt their tools.

[hdra]

I recently tried Apollo for a project as well, for the most part, its almost magic, doing most of the usually tedious things for me. But I often run into unexpected blocker on the most basic functionalities that I need.

One of them that I haven't been able to really solve till now is around cache invalidation / removing deleted items from cache.

How have you been finding Apollo around that area?

[sandGorgon]

What was the stack you used for the graphql part ? I'm keen on understanding what the migration path from REST to graphql looks like (with all your data in a relational DB).

Could you write a bit more about your learnings here ?

[tirumaraiselvan]

What is the Apollo stack? Do you mean GraphQL in the frontend?

[EduardoBautista]

As primarily an Ember.js user (with an interest in Elm), just looking at how many hoops people in the React ecosystem go through just to send a request just boggles the mind.

Maybe I am in the minority, but writing boilerplate code all the time just isn't something that interests me.

[exogen]

I write React every day and don't know what you're referring to – you can just call fetch() in a lifecycle hook and be done with it, just like in any other framework.

But mostly I'm curious how your point relates to this blog post. Maybe you can clarify? The stuff they're doing with Apollo here that potentially comes across as boilerplate also gets query batching, caching, refetching, etc. for free (in addition to the fancy stuff they also talk about like automatic mocks). It's not like they're "just sending a request." Maybe you can show me how you do all that in another framework without some setup/wrappers/etc.?

[aboutruby]

I also much prefer simple REST APIs, just much easier to understand among other things. (e.g. fetch("/api/users").then(...) and it's good to go)

[yodon]

> ... hoops people in the React ecosystem go through just to send a request boggles the mind

React Hooks (currently in alpha for the next release of React) finally clean up that component lifecycle complexity I think you're referring to. Nader Dabit has a great post [0] on how to use React Hooks with GraphQL.

[0]https://medium.com/open-graphql/react-hooks-for-graphql-3fa8...

[bgentry]

Shameless self-promotional plug: ember-apollo-client is pretty damn easy to get started with and fits in really nicely with the Ember way of doing things :)

https://github.com/bgentry/ember-apollo-client

[Waterluvian]

Are you talking about thunks and action creators and whatnot? All totally optional and ideally with a future plan in mind. Just call fetch.

[dorian-graph]

You can end up writing a lot of boiler plate code to send requests in Elm, FYI.

[dpacmittal]

Except Apollo is for sending graphql requests, not just any request.

[fro0116]

I'd personally be interested in some details on how they're _generating_ the mock data for their server.

As they're using that mock data for testing, the data returned has to be deterministic, so I'm guessing they're either making up mock data manually by hard-coding that data in resolvers on the mock server implementation, or using some kind of fake-data generating library to generate that data dynamically based on graphql type in the schema, with a fixed seed so that the data doesn't change between runs.

I'm hoping to explore the latter approach a bit more as I feel it would be great for testing productivity to have mock data generated from the schema instead of having to manually write them for every new thing added.

[adamrneary]

It's actually neither. :)

We have a shared development environment with a persistent (and thus deterministic) dataset. So when one developer runs a query against that dataset, another developer could run the same query and get the same result.

The best thing about this, of course, is that if your Storybook data looks at listing 112358, you can also open that same listing in development and see the same result in the product. Very powerful.

[munchbunny]

With posts like this, I think it's important to remember that projects like this get created for one primary reason: it solves problems AirBnB has. If you're lucky, it solves problems you have too.

I work on some tech giant cyber security stuff, and it's obvious if you look at it that what my team designs solves a tech giant scale problem in the context of past engineering decisions made to solve other tech giant scale problems this company had. I probably wouldn't recommend my team's approaches to anyone who has less than ~5000 engineers.

From this experience I've adopted a heuristic: first consider the scale the system was built to address. If you are not in the ballpark of that scale, give it a long hard look before you adopted it.

[or113]

When looking at the network tab, I couldn't find anything related to graphql. Nor by searching overall the code. Does anyway know where exactly Airbnb use graphql?

[rayshan]

Adam talked about server-side rendering in the video. You won't see the graphql queries in network activities.

[stockkid]

It is unclear from the article how exactly Airbnb is moving "10x faster" as the title claims. Unless backed by a benchmark, this kind of hyperbole shouldn't be an engineering article.

[gaius]

Is moving faster to evade taxes and regulations really something to encourage?