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"

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

April 13, 2019
Tweet

Transcript

  1. 1.

    Re-architecture of A Decade Old App with BFF/GraphQL Ken (Kenju

    Wagatsuma) @GraphQL Asia 2019 April 13th, 2019
  2. 2.

    Hello, it’s Ken from Japan Kenju Wagatsuma • #GraphQL #Go

    #TypeScript • Group Lead of Marketing Service Development Team • Twitter … @itiskj • GitHub … @kenju
  3. 4.
  4. 5.
  5. 15.
  6. 18.
  7. 20.

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

    My Team Marketing Service Development Team develops... • Ad Campaign

    Ordering Service • Ad Delivery Service • Logging (Streaming + Batching) • Targeting Service • Ad Creative Optimization Service ...
  9. 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
  10. 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
  11. 25.

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

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

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

    + 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
  15. 29.

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

    Re-architect Timeline October, 2017 … I joined the team November,

    2017 … Step 1: Understanding by “Exploratory Refactoring”
  17. 32.

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

    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!
  19. 34.

    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….
  20. 35.

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

    Our Goal Improve Developer Experiences and... • Accelerate the growth

    of our advertisement system • So that to make companies can continue investment in new services
  22. 37.
  23. 41.

    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/
  24. 42.

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

    Legacy New GraphQL Schema BFR Backend for Resource BFF Backend

    for Frontend Frontend Resource Resource Legacy Usecase New Usecase
  26. 45.

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

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

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

    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/
  30. 53.

    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”
  31. 58.

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

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

    Atomic Design can… • boost the reusability of components •

    pave the road for developers to architect class in a proper way
  34. 63.

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

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

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

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

    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
  39. 72.
  40. 77.
  41. 80.

    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
  42. 82.
  43. 84.
  44. 86.

    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/