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

GraphQL Asia 2019 "Re-architecture of a decade-...

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
  2. Hello, it’s Ken from Japan Kenju Wagatsuma • #GraphQL #Go

    #TypeScript • Group Lead of Marketing Service Development Team • Twitter … @itiskj • GitHub … @kenju
  3. 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
  4. My Team Marketing Service Development Team develops... • Ad Campaign

    Ordering Service • Ad Delivery Service • Logging (Streaming + Batching) • Targeting Service • Ad Creative Optimization Service ...
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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. + 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
  11. 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
  12. Re-architect Timeline October, 2017 … I joined the team November,

    2017 … Step 1: Understanding by “Exploratory Refactoring”
  13. 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.
  14. 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!
  15. 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….
  16. 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
  17. Our Goal Improve Developer Experiences and... • Accelerate the growth

    of our advertisement system • So that to make companies can continue investment in new services
  18. 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/
  19. 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
  20. Legacy New GraphQL Schema BFR Backend for Resource BFF Backend

    for Frontend Frontend Resource Resource Legacy Usecase New Usecase
  21. 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
  22. 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
  23. 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
  24. 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/
  25. 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”
  26. 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
  27. 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
  28. Atomic Design can… • boost the reusability of components •

    pave the road for developers to architect class in a proper way
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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/