Graphql ve Vue.js
a Node.js 

Radim Štěpaník

 👀 CTO

👷 Teamleader
👩‍💻 JS developer

🎤 Moderátor

🎸 Kytarista
👨‍👧 Rodič
(snad lepší než kytarista)

 🎧 Listen on spotify 

🐦 Follow me on twitter

kinapets

QCAST

🥅 Goal

⚡️Fast web - 📉 3s

💥 Break up monolith

🤖 Modern technologies

🤑 Money

👇

🥰 Happier customers

👇

🧹 Tech debt

🥰 Happier developers

🗿 Stability

Original web architecture

Original web architecture

Original web architecture

  • easy to run 
  • only JS and http calls
  • should be faster

⚙️ Main parts of our work

🤩 Mall.cz
web

📊 Graphql API

📦 Library of
web components

⚙️ Infrastructure

🐣 Not revolution but evolution

  • Implement non visible things

    • Webadmin - integration shopconfig

    • Feature flags

    • Translations

  • Fail fast

    • Smooth and fast fallback - SPA vs monolith

    • Page type by page type

    • Implement things which we don't want

  • Release - with monolith is easier

    • page load performance - html  vs JS app

    • every page is completely new html file

  • Harder, better, faster, stronger

🐣 Not revolution but evolution

old architecture fallback

🐣 Not revolution but evolution

harder better stronger

Old way

New way

🥞 Tech stack

Why nuxt?

  • Great for SSR
  • We need SEO
  • Nuxt - universal application (Nuxt 3 in 6 days 🎉)
    • pros
      • Vue.js
      • SSR
      • Code splitting
      • Apollo
      • Community support
    • cons
      • we want multitenant
      • router
      • translations
  • Typescript (because makes sense with graphql)
  • Fast Integration tests with cypress

SSR HARD PART

 

  • universal applications are different
  • it's a living organism
  • server vs client
  • another process of testing 
  • server render vs client 
    • cookies
    • runtime differences

🕺 Users

  • hybrid rendering
  • optimization for page load
  • balance between what should be SSR and speed
  • mobile vs desktop

🤖 Bots

  • full server side rendering
  • ~70 percent of resources for bots scraping
  • rate limiting

⚡️Render optimization

⚡️Render optimization

  • smart detection vs dummy
  • new cases for testing
  • we need to be available for bots!
  • user download whole javascript application
  • it's not necessary to reload page between pages
  • new scenarios for testing

🌱 Living organism

🌱 Living organism

  • page can be
    potentially open for weeks
  • be carefull about
    breaking changes

GRAPHQL

  • client 👉  server
  • graphql 👉 typescript 
  • apollo library
  • call only necessary
  • services
  • cache layer
    • server
    • frontend - load once

GRAPHQL SHOWCASE

Graphql what gives us

  • single point of truth
  • one model
  • typescript
  • easy caching
  • circuit breaking
  • performance - get what you want
  • orchestration for services
  • subscriptions (potentially)
  • server side vs client side
  • subscriptions (potentially)

search

customer

cart

bestsellers

banners

menu

category

products

filters

content

Graphql service orchestration

# Calls category
getCategory(categoryUrl: $categoryUrl) {
  id
  howto
  # Calls content service
  ... on ContentCategory {
    content {
      id
      title
      body
    }
  }
  # Calls product service
  ... on ProductCategory {
    productCollection {
      items {
        ... on Product {
          ...productForList
        }
        # Calls estimated delivery service
        ... on BonusSet {
          estimatedDeliveries {
            ...productEstimatedDeliveryFragment
          }
        }
        # Calls banners service
        ... on SectionBannerSlideImage {
          ...sectionBannerSlide
        }
      }
    }
  }
}
  • optimization called
    services
  • call only
    what is necessary
  • next level is federation

Graphql circuit breaker

  • automatically created circuit breakers for resolvers
  • checking stats
  • fail fast
  • fault tolerance

Graphql circuit breaker

Graphql - client side

@Component<CampaignContent>({
  apollo: {
    getCampaign: {
      fetchPolicy: 'cache-and-network',
      query: GET_CAMPAIGN_CONTENT,
      result(res: Result) {
        return res.data?.getCampaign
      },

      variables() {
        const campaignId = this.campaignId
        const isBefore = this.isBefore

        return {
          campaignId,
          isBefore,
        }
      },
    },
  },
  components: { DynamicContent, NotFoundErrorHandler },
})
export default class CampaignContent extends Vue {
  @Prop(String) campaignId: string
  @Prop({ default: true, type: Boolean }) isBefore: boolean

  getCampaign: GQLCampaign

}

Graphql caching - client side

  • automated vuex
  • cache
  • fetch policies
    • cache-first
    • cache-only
    • cache-and-network
    • network-only
    • no-cache
  • local resolvers/fields

Graphql caching - client side

Graphql caching - server side

  • schema level definition
  • automatic resolving of
    cache control
  • redis storage
  • CDN level caching

Graphql differences

  • error handling - show what you can
  • lower rate of requests
  • we can join several queries 
  • be careful about breaking changes❗️

 ⚙️ Infrastructure

  • Open stack 👉 Helm
  • Mallweb - 190 pods | ~40 CPUs
  • Release ~ 3 minutes
  • up to 16 000 req/min
  • Helm - 50 pods, 10 CPUs
  • ~200 000 queries per minute

Mallweb

Urban

☢️ Alerting/Monitoring/Logs

  • SMS
  • Teams
  • Dashboards
  • Open tracing

💯Numbers

📈~20 LPS 👉 50 - 70 LPS

5+ s 📉 3 s

👋 Díky za pozornost
Dotazy?

DevFest 2021: Graphql ve Vue.js a node.js

By Radim Štěpaník

DevFest 2021: Graphql ve Vue.js a node.js

  • 323

More from Radim Štěpaník