Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BrikL - A GraphQL Native - GraphQL Asia 2019

346 views

Published on

BrikL's GraphQL journey started in 2016 with constantly changing business requirements towards finding the product market fit. The talk will share some insights on the journey and lessons learnt of a startup using GraphQL to enable high development velocity and how BrikL is using GraphQL today.

Published in: Technology
  • Be the first to comment

BrikL - A GraphQL Native - GraphQL Asia 2019

  1. 1. BrikL A GraphQL Native Tobias Meixner Co-Founder & CTO Brikl Ltd - www.brikl.io 12 April 2019
  2. 2. Agenda 2 ▪ Startup Life ▪ BrikL GraphQL Journey ▪ Our GraphQL Stack
  3. 3. Tobias Meixner 3 ▪ Born in Berlin (born before it was cool) ▪ In Asia for over 6 years ▪ Based in Bangkok & Guangzhou ▪ Co-Founder & CTO @ ▪ @MeixnerTobias
  4. 4. Startup Life Developing software on fire
  5. 5. 5
  6. 6. 6 Actually it is ... most of the time...
  7. 7. What is a startup? 7 ▪ Focus on growth ▪ Solve a problem ▪ More questions than answers ▪ Find product/market fit
  8. 8. 8 Startup Valley of Death Source: Osawa and Miyazaki, 2006
  9. 9. 9 Source: https://www.leadingagile.com/2017/11/planning-technical-debt/ Leverage ▪ Incur intentionally for a purpose ▪ Useful when cost-effective Waste ▪ Sloppy coding ▪ Refactoring has no immediate benefit Technical Debt
  10. 10. Dev in Startup... 10 ▪ Move fast, break things? ▪ Delete more than you add? ▪ Crave for stability and a constant?
  11. 11. BrikL constants since 2016 11
  12. 12. BrikL & GraphQL Journey with GraphQL as constant
  13. 13. About BrikL 13 ▪ 2D & 3D Design studio ▪ E-commerce Platform for Custom-Made Products ▪ www.brikl.io
  14. 14. Why GraphQL 14 ▪ Pure focus on Frontend development ▫ MVP-style / UI-Driven development ▪ GraphQL Schema as major constant in our development ▪ GraphQL Schema as discussion base between project shareholders
  15. 15. MVP (2016) 15 ▪ React ▪ Redux ▪ graphql-js ▪ AWS Lambda (NodeJS) ▪ Amazon DynamoDB Based on: serverless/serverless-graphql
  16. 16. v1 (2017) 16 ▪ React ▪ Redux Apollo Client ▪ graphql-js Apollo Server ▪ AWS Lambda (NodeJS) ▪ Amazon DynamoDB
  17. 17. BrikL GraphQL Stack “Serverless GraphQL”
  18. 18. 2018 - Today 18 ▪ React ▪ Apollo Client ▪ Apollo Server ▪ AWS Lambda (NodeJS) ▪ Amazon DynamoDB ▪ + Gatsby ▪ + Apollo Engine ▪ + Elasticsearch ▪ + Tooling: ▫ Serverless framework ▫ Cypress ▫ Sentry ▫ Netlify + CircleCI ▫ AWS stuff
  19. 19. Architecture 19 ▪ Serverless from Day 1 ▪ Managed Services where possible ▪ GraphQL as thin layer ▪ DynamoDB to ▫ Store “State” ▫ Emit events to streams ▫ Similar to Hasura 3factor app
  20. 20. Architecture 20 CDN Engine Server DynamoDB S3 Glue Elasticsearch ETL Stream Cognito JWT Authn/z X-Ray Logs ClientGatsby API Real time
  21. 21. Gatsby 21 ▪ Source data from GraphQL ▪ Generate storefront pages ▪ Source data based on selected store integrations ▫ Instagram, … ▪ Future > Content Mesh
  22. 22. Apollo Client 22 ▪ Query, Mutation components ▪ In-Memory-Cache ▪ Link Context > JWT ▪ Error link > Sentry ▪ HTTP Link > CDN vs POST ▪ SSR in Gatsby
  23. 23. Apollo Server 23 ▪ Apollo Server Lambda ▪ Apollo Engine ▪ Context > User, Config ▪ Cache Control > CDN ▪ graphql-shield > Authz ▪ graphql-tools > make Schema
  24. 24. Schema directives 24 ▪ Authorization ▪ Formatting ▪ Validation ▪ Data sourcing & ORM @makeSthAwesome
  25. 25. Schema-first 25 ▪ Great fit for getting started ▪ High velocity for startups ▪ Schema directives to rescue ▫ Schema = ORM ▫ SchemaDirectiveVisitor
  26. 26. Schema directives @ BrikL 26 ▪ S3 ▪ DynamoDB ▪ Elasticsearch
  27. 27. S3 directive 27
  28. 28. DynamoDB directive 28
  29. 29. What’s next? 29 ▪ Typescript / Code-first? ▪ State Management ▪ publish DynamoDB Datasource library ▪ Subscriptions...
  30. 30. Thank you Questions? Find me at the speaker hours ~5pm See you in

×