Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"

GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"

Ken Wagatsuma

April 13, 2019
Tweet

More Decks by Ken Wagatsuma

Other Decks in Programming

Transcript

  1. Re-architecture of
    A Decade Old App
    with BFF/GraphQL
    Ken (Kenju Wagatsuma)
    @GraphQL Asia 2019
    April 13th, 2019

    View full-size slide

  2. Hello, it’s Ken from Japan
    Kenju Wagatsuma
    ● #GraphQL #Go #TypeScript
    ● Group Lead of Marketing
    Service Development Team
    ● Twitter … @itiskj
    ● GitHub … @kenju

    View full-size slide

  3. How old are you precisely,
    A Decade Old App ?

    View full-size slide

  4. Today’s Message

    View full-size slide

  5. GraphQL
    is not
    ??? ,

    View full-size slide

  6. GraphQL
    is not
    a silver bullet,

    View full-size slide

  7. But,
    If you put GraphQL
    into the
    ??? ,

    View full-size slide

  8. But,
    If you put GraphQL
    into the
    appropriate problems,

    View full-size slide

  9. Then,
    you can achieve...

    View full-size slide

  10. Then,
    you can achieve...
    Great Developer
    Experiences

    View full-size slide

  11. And,
    you can also achieve...

    View full-size slide

  12. And,
    you can also achieve...
    Rapid Development
    with High Quality

    View full-size slide

  13. 6 Problems we had,

    View full-size slide

  14. 6 Solutions we achieved by GraphQL,
    6 Problems we had,

    View full-size slide

  15. 6 Solutions we achieved by GraphQL,
    6 Problems we had,
    4 Tradeoffs we suffered from.

    View full-size slide

  16. Business Model

    View full-size slide

  17. Cookpad Inc.
    ● World largest recipe sharing site
    ○ cookpad.com
    ○ cookpad.com/in (for India)
    ● Mission: “Make everyday cooking fun!”
    ● Over 26 languages, 71 countries
    ● 94 Million Monthly Average Users

    View full-size slide

  18. Cookpad is a Platform
    User
    Ad Clients
    Advertisement Premium Users

    View full-size slide

  19. My Team
    Marketing Service Development Team develops...
    ● Ad Campaign Ordering Service
    ● Ad Delivery Service
    ● Logging (Streaming + Batching)
    ● Targeting Service
    ● Ad Creative Optimization Service
    ...

    View full-size slide

  20. The high-level Marketing Technology flow
    Operation Team
    Data Warehouse
    Ad Creative
    Optimization
    Ad Campaign
    Ordering Service
    Ad Delivery
    Service
    Targeting Service
    Delivery Metadata
    Mobile Client
    Ad Creatives
    log

    View full-size slide

  21. The high-level Marketing Technology flow
    Operation Team
    Data Warehouse
    Ad Creative
    Optimization
    Ad Campaign
    Ordering Service
    Ad Delivery
    Service
    Targeting Service
    Delivery Metadata
    Mobile Client
    Ad Creatives
    log

    View full-size slide

  22. The high-level Marketing Technology flow
    Operation Team
    Data Warehouse
    Ad Creative
    Optimization
    Ad Campaign
    Ordering Service
    Ad Delivery
    Service
    Targeting Service
    Delivery Metadata
    Mobile Client
    Ad Creatives
    log

    View full-size slide

  23. The high-level Marketing Technology flow
    Operation Team
    Data Warehouse
    Ad Creative
    Optimization
    Ad Campaign
    Ordering Service
    Ad Delivery
    Service
    Targeting Service
    Delivery Metadata
    Mobile Client
    Ad Creatives
    log

    View full-size slide

  24. The high-level Marketing Technology flow
    Operation Team
    Data Warehouse
    Ad Creative
    Optimization
    Ad Campaign
    Ordering Service
    Ad Delivery
    Service
    Targeting Service
    Delivery Metadata
    Mobile Client
    Ad Creatives
    log

    View full-size slide

  25. + Targeting Options
    ● Default User Segments
    ○ e.g. “Healthy”, “Family”, “30s”
    ● Customized Segments
    ○ optimized user segments per ad clients
    ● Shopping Time Jack
    ○ 17:00 - 19:00 for peak time jacking
    ● Area Targeting

    View full-size slide

  26. Linux
    OS
    Docker, Terraform, Jenkins
    DevOps
    Nginx, Fluentd, ELB
    Infra
    Ruby
    Rails
    TypeScript
    React.js
    GraphQL
    Apollo
    Ruby
    Rails
    Go
    AWS ElastiCache
    AWS DynamoDB
    Service Mesh
    Envoy
    Python
    AWS APIGateway
    AWS Lambda
    Tableau
    Application
    SQL
    AWS Redshift
    AWS Athena
    Ruby
    Python
    AWS Kinesis
    AWS DynamoDB
    AWS Lambda
    Batch Layer
    Streaming Layer
    Ad campaign ordering service Ad delivery service Logging Machine Learning

    View full-size slide

  27. Re-architect Timeline

    View full-size slide

  28. Re-architect Timeline
    October, 2017 … I joined the team
    November, 2017 … Step 1: Understanding by “Exploratory Refactoring”

    View full-size slide

  29. January, 2018 … Step 0
    “Exploratory Refactoring” to
    understand the codebase
    “Re-Engineering Legacy Software” by Chris Birchall
    ● Rename method/class/const
    ● Extract/Split/Merge method
    ● Add comment/documentation
    ● Inline/Move/Encapsulate, etc.

    View full-size slide

  30. Re-architect Timeline
    October, 2017 … I joined the team
    November, 2017 … Step 1: Understanding by “Exploratory Refactoring”
    March, 2018 … Step 2: Muddy “Refactoring” + Prepare for the Big Bang!

    View full-size slide

  31. Muddy “Refactoring”
    No Silver bullet.
    ● Goodbye CoffeeScript, Hello ES6
    ● Introduce ESLint
    ● Introduce JSDoc (and gonna be TypeScript later)
    ● Introduce React.js, and reduce jQuery dependencies
    ● Introduce Testing with Jest
    ● Drop dead codes
    day by day….

    View full-size slide

  32. Re-architect Timeline
    October, 2017 … I joined the team
    November, 2017 … Step 1: Understanding by “Exploratory Refactoring”
    March, 2018 … Step 2: Muddy “Refactoring” + Prepare for the Big Bang!
    October, 2018 … Step 3: Big Bang! Re-architecture with BFF/GraphQL

    View full-size slide

  33. Our Goal
    Improve Developer Experiences and...
    ● Accelerate the growth of our advertisement system
    ● So that to make companies can continue investment in
    new services

    View full-size slide

  34. 6 Solutions we achieved by GraphQL,
    6 Problems we had,
    4 Tradeoffs we suffered from.

    View full-size slide

  35. Use-cases & Resources
    are
    tightly coupled
    Problem #1

    View full-size slide

  36. Legacy New
    BFR
    Backend for Resource
    Frontend
    Resource Resource
    Legacy
    Usecase
    New
    Usecase
    Legacy New

    View full-size slide

  37. GraphQL
    as a
    BFF
    Solution #1

    View full-size slide

  38. What’s BFF?
    ● Pattern: Backends For
    Frontends by Sam
    Newman, the author of
    “Building Microservices”
    ● Definition:
    “Single-purpose Edge
    Services for UIs and
    external parties”
    https://samnewman.io/patterns/architectural/bff/

    View full-size slide

  39. Why BFF? - 3 Use Cases
    @yosuke_furukawa, Node.js collaborator
    ● Accelerate Development
    ○ for Frontend/Backend Developers
    ● Special Use-cases
    ○ (e.g. Server-Side Rendering for SEO,
    WebSocket for Real-time app)
    ● Re-architect Legacy System
    ○ this is exactly our cases

    View full-size slide

  40. Legacy New
    GraphQL
    Schema
    BFR
    Backend for Resource
    BFF
    Backend for Frontend
    Frontend
    Resource Resource
    Legacy
    Usecase
    New
    Usecase

    View full-size slide

  41. TOO MUCH
    Domain Knowledge
    is required
    Problem #2

    View full-size slide

  42. New ad delivery service
    Legacy ad delivery service
    Data Warehouse
    Machine Learning services
    Redshift
    API Gateway
    Ad Campaign Ordering Service
    Tracking service
    DynamoDB
    batch job

    View full-size slide

  43. GraphQL
    as a
    BFF
    Solution #2

    View full-size slide

  44. New ad delivery service
    Legacy ad delivery service
    Data Warehouse
    Machine Learning services
    Redshift
    API Gateway
    Ad Campaign Ordering Service
    Tracking service
    DynamoDB
    batch job

    View full-size slide

  45. Flexibility of backend
    is limited, due to its
    complexity
    Problem #3

    View full-size slide

  46. New ad delivery service
    Legacy ad delivery service
    Data Warehouse
    Machine Learning services
    Redshift
    API Gateway
    Ad Campaign Ordering Service
    Tracking service
    DynamoDB
    batch job

    View full-size slide

  47. GraphQL
    as a
    BFF
    Solution #3

    View full-size slide

  48. Hybrid approach w/ DB & existing systems
    Encapsulation of...
    ● Own database
    ● The existing legacy system
    ● Third-party API
    https://www.howtographql.com/basics/3-big-picture/

    View full-size slide

  49. No
    Frontend
    Specialist
    Problem #4

    View full-size slide

  50. Problems #4
    for example…
    ● CoffeeScript
    ● jQuery 1.x (major was 3.x then)
    ● NO JavaScript tests at all
    ● NO error tracking for the clientside
    ● NO Static Analysis tools
    ● Unused libraries in package.json
    ● A bunch of “TODO” and “FIXME”

    View full-size slide

  51. GraphQL
    x
    Component Oriented
    Solution #4

    View full-size slide

  52. what we have achieved
    Resiliency
    x
    Reusability
    Solution #4

    View full-size slide

  53. Resiliency by
    SFD-Component
    Reusability by
    Atomic Design
    Solution #4

    View full-size slide

  54. Style-Function-Data Component
    Data
    Function
    Style
    Component
    Bootstrap
    React Hooks or HoC
    GraphQL & Apollo Client
    React.js

    View full-size slide

  55. Style-Function-Data Component is...
    Framework agnostic
    ● “Component” can be …
    ○ React, Vue, or even pure JS
    ● “Style” can be …
    ○ Styled Components, Bootstrap, CSSNext, Material Design, or anything
    ● “Function” can be …
    ○ pure JS, class, HoC, or anything
    ● “Data” can be …
    ○ hard-coded JSON, GraphQL query, or anything

    View full-size slide

  56. Atomic Design
    http://bradfrost.com/blog/post/atomic-web-design/

    View full-size slide

  57. Atomic Design Guideline
    Component Definition Example
    Atoms minimum components button / toast / label / panel
    Molecules
    handle single event
    (useState / useEffect / useContext)
    input / pagination / selector / popup
    Organisms
    handle multiple events /
    use GraphQL
    chart / form / list / table
    Templates wireframe level header / footer / body
    Pages per pages top / dashboard / settings / campaigns

    View full-size slide

  58. Atomic Design can…
    ● boost the reusability of
    components
    ● pave the road for
    developers to architect
    class in a proper way

    View full-size slide

  59. I love Dynamic Typing,
    but it’s not for a
    Decade Old App, is it?
    Problem #5

    View full-size slide

  60. Problems #5
    for example…
    ● Meta programming makes
    it hard to find dead codes
    ● Runtime Error often
    happens
    ● No Static Analysis leads to
    no coherency in the
    codebase

    View full-size slide

  61. GraphQL
    x
    TypeScript
    Solution #5

    View full-size slide

  62. Discover errors as soon as possible
    The later errors discovered,
    the more it takes to fix the
    errors.
    “Software Engineering
    Economics”, Barry W. Boehm,
    1983
    Error Discovered Time(t)
    Fixing cost

    View full-size slide

  63. Ad Campaign Ordering Service
    Resolvers Plain Object /
    Data Entity
    Classes
    GraphQL
    Schema
    Clients
    Apollo 3rd-Party
    Library
    Clients
    React
    Adapter
    Classes
    graphql-code-generator
    TypeScript
    Service
    Classes

    View full-size slide

  64. Ad Campaign Ordering Service
    Type-Safety
    Resolvers Plain Object /
    Data Entity
    Classes
    GraphQL
    Schema
    Clients
    Apollo 3rd-Party
    Library
    Clients
    React
    Adapter
    Classes
    graphql-code-generator
    TypeScript
    Service
    Classes
    Generate typings.d.ts

    View full-size slide

  65. Gradual Typing
    Introduce TypeScript Compiler into your build pipelines
    Introduce 3rd Party typings with DefinitelyTyped
    Write your own typing definitions
    Set all strict option to true
    Enjoy type safety life!
    Introduction
    Early Stage
    Gradual Typing
    Final Stage
    Stable Stage

    View full-size slide

  66. Is our “New Bleeding Edge
    GraphQL/React/TS App”
    gonna be
    “legacy” soon?
    Problem #6

    View full-size slide

  67. GraphQL
    makes your API
    Versionless
    Solution #6

    View full-size slide

  68. Client should not &
    must not know about
    model versioning in the
    backend

    View full-size slide

  69. 6 Solutions we achieved by GraphQL,
    6 Problems we had,
    4 Tradeoffs we suffered from.

    View full-size slide

  70. Cache Strategy
    is in the early stage,
    compared to RESTful
    Tradeoff #1

    View full-size slide

  71. We do not
    need it
    (yet)
    Tradeoff #1

    View full-size slide

  72. Monitoring practices
    is still in
    the early stage
    Tradeoff #2

    View full-size slide

  73. We bet on the
    GraphQL Ecosystems
    Tradeoff #2

    View full-size slide

  74. jQuery & CoffeeScript is
    widely spread. So
    Why New Technologies?
    Tradeoff #3

    View full-size slide

  75. Technology Selection takes many perspectives, not only
    members’ motivation
    but also career path.
    Tradeoff #3

    View full-size slide

  76. 3 key factors for Technology Selection
    Tech
    Company Team
    ● Pros & Cons of the technology
    ● Ecosystem
    ● Tooling
    ● Trend
    ● Community
    ● Maturity
    ● Skillset
    ● Career path
    ● Scale
    ● Motivation
    ● Mission
    ● Business success
    ● Technology stacks
    ● Culture
    ● Recruitment

    View full-size slide

  77. Type-Safety
    v.s.
    Rapid Development
    Tradeoff #4

    View full-size slide

  78. Type Safety wins
    in the long term
    Tradeoff #4

    View full-size slide

  79. 6 Solutions we achieved by GraphQL,
    6 Problems we had,
    4 Tradeoffs we suffered from.

    View full-size slide

  80. Thank you!
    https://www.cookpadteam.com

    View full-size slide

  81. References
    Title URL
    Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
    Hybrid approach with DB
    & integration of existing system
    https://www.howtographql.com/basics/3-big-picture/
    BFF https://samnewman.io/patterns/architectural/bff/
    BFF 3 Use Cases https://speakerdeck.com/yosuke_furukawa/backends-for-frontends-aws-dev-day (ja)
    BFU / BFR https://lacolaco.hatenablog.com/entry/2018/07/13/001820 (ja)
    Micro-Frontends https://micro-frontends.org/
    Apollo Engine https://www.apollographql.com/docs/engine/

    View full-size slide