转自:https://medium.com/expedia-group-tech/graphql-component-architecture-principles-homeaway-ede8a58d6fde

At Vrbo, we’ve been using GraphQL for over a year. But there are some differences in how we’ve implemented and used GraphQL compared to some examples we’ve seen in the wild.

Components of components

This is because in adopting GraphQL at scale, we wanted to ensure not only the success of individual teams, but the scalability and predictability of that success from team to team across Vrbo.

In addition, we’ve learned from past mistakes with other orchestration models and wanted our new model to work differently.

Previously, we relied on dedicated orchestration services. These proved to be not only an unnecessary moving part, but created dependencies between teams that slowed them down and created a wider blast radius when something went wrong.

Diagram indicating blast radius of a failure

High level goals

In developing a new front-tier API (orchestration, public APIs) architecture, we had a few goals in mind.

  1. Increase team velocity by reducing dependencies between teams and services
  2. Reduce blast radius by:
    * Insulating teams from change
    * Reducing points of failure
  3. Improve predictability of a team’s:
    * Compute needs
    * Cost expectations
  4. Simplify collaboration and sharing
  5. Improve portability across environments

Breaking up GraphQL schema into components

A GraphQL schema is made up of types (type schema), root types (API operations) and resolvers (business logic).

An example type:

GraphQL type example

This defines a new type Author, which is merely a type definition. To perform operations on Author, such as a query, we must define a root type:

GraphQL root type example

This defines a query operation to the API’s surface called author that clients can now interact with.

But we still need to execute some code for the query to do work and this is where resolvers come in. In javascript, a resolver might look something like this:

GraphQL resolver example

As you can imagine, a schema can grow quite large as our API surface area grows. This is in part why we break down and componentize these elements of a schema into independently versionable modules that can be imported and merged into an API based on the requirements of the use case.

An application or API can aggregate as many components as it needs to fulfill its UI or user needs.

Our first iteration of where schema is merged, which has been the basis of our success so far, is called “partials”. This brought the convenience and simplicity of node modules to GraphQL.

Our next major iteration for GraphQL includes a newer component model in which each component is its own fully independently executable schema, making both composition and aggregation easier.

Diagram indicating what a package is comprised of

Implementation design principles

In developing tools to create component-based schemas, we want the following characteristics:

  • Composable types
    * Types can be made up of many shared types
    * Extend and compose types for a use case without impacting others
  • Composable resolvers
    * Invoke without invoking a new service (no network hops)
    * Ability to reduce repetitive service calls within the same query tree
  • Portable
    * Injectable upstream requirements (service clients, etc)
  • Easy to collaborate
    * Shared code, not services
    * Manage contributions, version as needed, simplify co-development
  • Schema first
    * Easy to read, Easy to update
    * Collaborate cross platform on API design in common language

Separate use cases, separate services

With a component model it is not necessary to provision, operationalize and share a service. Each application or API can provide for its own needs by specifying the components it needs.

Diagram depicting independent team iteration / responsibility

Because components are composed and merged together without a centralized or shared service, teams can:

  1. Pick and choose their own orchestration needs
  2. Version independently of other teams
  3. Scale independently as their use case demands
  4. Perform better cost attribution
  5. Explicitly declare data requirements in UI components

This is a powerful model because it enables our goals for reducing dependencies between teams and the affected area caused by changes in a shared service.

Composition

One of the great aspects of GraphQL is its ability to compose types and resolvers. We don’t want to force two teams to constantly iterate on the same definitions just to satisfy all use cases.

Instead, it is easy for teams to compose new types or extend existing types as separate components that can then be versioned and developed independently.

Diagram of component dependencies as packages

A component module A may be composed of an imported module and type T while another component module B, with slightly different needs than A has been composed from a T’ component.

This also allows components to take advantage of existing resolvers by simply invoking across a binding to the composed type. We can also cache results from these calls within a single execution of a query or mutation, reducing the number of times something must be resolved at all.

Components in code

So what might this look like from a code perspective? Let’s take a more real-world example for a property listing appearing on a site like Vrbo.

What is a Listing made up of? Let’s make it overly simple and assume:

  • Property
  • Reviews

Let’s start with the Property component.

Example property component

Next, Reviews component:

Example reviews component

Finally let’s compose these together into a Listing:

Example listing component

This is different because it also has a new declaration to import property and review. This enables listing to take advantage of both the types in these two components, as well as the resolvers.

In this last example, let’s take a look at the listing resolvers as well:

Example listing resolver

This makes the listing resolver delegate its primary query to property and review in parallel to form its base. The cool thing about this is that it does not simply invoke the resolver function, but rather executes through GraphQL. This lets both type validation and type resolvers to continue to run normally.

The rest of the shaping for Listing type is done with type resolvers (not shown here).

Collaboration

GraphQL is both a query language and type-based schema-first API specification.

One of the problems (and sometimes benefits) of REST is that it is not naturally schema-first. Tools like the OpenAPI specification often rely on after-the-fact generation of specification for documentation purposes only; there is no strict binding of API schema to implementation.

With GraphQL, the schema is the API, and that is a powerful thing.

Because we have relied on inner-source collaboration to develop many of our GraphQL components, the importance of being able to do so in a more accessible way has been critical.

Plain test and even separate .graphql files for type and root type definitions are much easier to read and collaborate on than code, not to mention agnostic to any particular language or platform.

Keeping in sync

When you start versioning modules independently, keeping teams moving off of unsupported versions requires additional tooling to keep track of dependencies and notify developers.

We keep track by building dependency graphs from applications which we can query and run reports to see who is using what.

Finally

In this journey, our evolution has been from monoliths, to miniliths and BFFs (back-ends-for-front-ends), to node apps and modules. But the journey isn’t complete. The industry is evolving to serverless and static pages (JAMStack, etc) and we have begun to as well. As a result, part of our design has also been about runtime portability as well as environment portability.

When it comes down to what it takes to develop a modern web application at Vrbo, it looks something like this:

Diagram depicting an application comprised of SSR and GraphQL

Developers spend their time in two areas: React development and GraphQL development (which is usually just reused). This begs the question: why are we deploying applications at all?

With the advent of new capabilities in CDNs like compute with CloudFlare Workers, Fly.io, and others, a serverless (and even containerless) orchestration layer makes a lot of sense.

Diagram depicting GraphQL orchestration moving from web tier to CDN

We plan to experiment with pushing our model to the bleeding edge (pun intended), and it is made easier through a component model designed for flexibility and developer scale.

Further reading

While we were working on the next iteration of our partial schema / component model, a new open source project was released called GraphQL Modules. GraphQL follows an almost identical paradigm and looks great.

I’ve been working on a similar project in the open that is an iteration on our existing internal solution and that is what is used here for the examples. Currently, some simple examples can be seen here.

You can also read more about some of the history in these links:

The Architectural Principles Behind Vrbo’s GraphQL Implementation的更多相关文章

  1. Architectural principles

    原文 "If builders built buildings the way programmers wrote programs, then the first woodpecker t ...

  2. Why GraphQL is Taking Over APIs

    A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web ...

  3. Training - An Introduction to Enterprise Integration

    What is EI? Enterprise Integration (EI) is a business computing term for the plans, methods, and too ...

  4. Three Sources of a Solid Object-Oriented Design

    pingback :http://java.sys-con.com/node/84633?page=0,1 Object-oriented design is like an alloy consis ...

  5. Windows Kernel Security Training Courses

    http://www.codemachine.com/courses.html#kerdbg Windows Kernel Internals for Security Researchers Thi ...

  6. Angular vs React---React-ing to change

    这篇文章的全局观和思路一级棒! The Fairy Tale Cast your mind back to 2010 when users started to demand interactive ...

  7. 斯坦福CS课程列表

    http://exploredegrees.stanford.edu/coursedescriptions/cs/ CS 101. Introduction to Computing Principl ...

  8. (转)Web2.0 大型互联网站点的架构

    这种资料.向来可遇不可求啊 WikiPedia 技术架构学习分享 http://www.dbanotes.net/opensource/wikipedia_arch.html YouTube 的架构扩 ...

  9. Awesome Go

    A curated list of awesome Go frameworks, libraries and software. Inspired by awesome-python. Contrib ...

随机推荐

  1. 50道Redis面试题及答案整理,史上最全!

    在网上看到有关Redis的50道面试题,但是没有给出答案,之前我也在寻找这份Redis面试题的答案,今天特地把答案分享出来. 花了大量时间整理了这套Redis面试题及答案,希望对大家有帮助哈~ 弄明白 ...

  2. mysql 5.7 修改root密码允许远程连接

    1.修改root密码(其他用户类似)  试过网上看的一些 在mysql数据库执行 update user set password='新密码'  where user='root' 执行说找不到字段, ...

  3. C#采集UVC摄像头画面并支持旋转和分辨率切换

    在项目中,我们会需要控制uvc摄像头,采集其实时画面,或者对其进行旋转.目前市面上大多数USB摄像头都支持UVC协议.那么如何采集呢?当然是采用SharpCamera!因为SharpCamera支持对 ...

  4. 分布式系统根基:物理时钟和Lamport逻辑时钟

    分布式系统解决了传统单体架构的单点问题和性能容量问题,另一方面也带来了很多的问题,其中一个问题就是多节点的时间同步问题:不同机器上的物理时钟难以同步,导致无法区分在分布式系统中多个节点的事件时序.19 ...

  5. ASP.NET Core 配置文件

    在ASP.NET Core 中,应用程序配置数据可以使用JSON, XML 和 INI格式 和内置环境变量,命令行参数或内存中的集合. 1.如何获取和设置配置 ASP.NET Core配置系统针对以前 ...

  6. scarpy设置日志打印级别和存储位置

    在settings.py中配置 日志级别设置 LOG_LEVEL = 'ERROR' # 当LOG_LEVEL设置为ERROR时,在进行日志打印时,只是打印ERROR级别的日志 日志存储设置 LOG_ ...

  7. 虚拟环境和pip相关的命令

    # 虚拟环境 mkvirtualenv # 创建虚拟环境 rmvirtualenv # 删除虚拟环境 workon # 进入虚拟环境.查看所有虚拟环境 deactivate # 退出虚拟环境 eg: ...

  8. 【转载】 Windows系统电脑通过设备管理器查看电脑配置信息

    在采购电脑或者使用电脑的过程中,有时候我们需要查看到电脑的所有设备硬件信息,此时就可以通过Windows系统自带的设备管理器界面来查看该电脑所有的设备配置信息,包括CPU型号频率.内存.硬盘型号以及容 ...

  9. Java 面向对象(八) 权限修饰符 和 final、native 关键字

    一.权限修饰符 1.概述 在 Java 中提供了四种访问权限,使用不同的访问权限修饰符修饰时,被修饰的内容会有不同的访问权限: public:公共的: protected:受保护的: default: ...

  10. js对数组array的常见操作小结

    1.创建数组?两种方式 var arr = new Array("1","2","4"); var arr1 = ["1" ...