Hands on dev call #3

[vikiival]

Kodadot Good practise

Do's and don'ts

Components

Do's

• Small reusable pieces that focuses on the one thing.
• Simple to use.
• Easy to understand.
• Easy to test.
• Composable.

  <BasicBalanceInput
    v-model="vValue"
    :decimals="decimals"
    :unit="unit" />

Don'ts

• Complex.
• Difficult to use.
• Mixing logic and presentation.

Example: The Balance input

    <component
      ref="balanceInput"
      class="mb-4"
      v-if="showMeta"
      :min="minimumOfferAmount"
      :max="balance"
      :is="showMeta"
      @input="updateMeta"
      emptyOnError />

Avoid ref

• hard to maintain.
• impossible to

  protected updateMeta(value: string | number) {
    const balanceInputComponent = this.$refs.balanceInput as BalanceInput
    this.isBalanceInputValid = balanceInputComponent.checkValidity()
    this.$consola.log(typeof value, value)
    this.meta = value
  }

Avoid arrow functions

  public onOfferSelected = async (maker: string) => {
    const { collectionId, nftId } = this
    await this.submit(maker, nftId, collectionId, this.fetchOffers)
  }

Functions

Do's

• make utils to avoid duplication - DRY
• reuse functions from @kodadot1 packages.
• make functions to be more readable - KISS
• write tests - Vitest is super simple.
• split logic into more reusable bits

Don'ts

• do not copy the same function twice.
• write complex logic into a component.
• use any

Indexers

Do's

• write small queries to fetch data
• alwas use pagination for fetching lists
• if you need to write something which requires a lot of magic afterwarsds - use a resolver.

Don'ts

• do complex magic afterwarsds.

[yangwao]

Maybe we should dedicate someone who

• would rewrite particular components, like those who are copypasta of others
• merge them into more reusable ones and more functional ones?

Like try starting here to make the offer table more reusable so we don't copy the same logic over and over?
https://github.com/kodadot/nft-gallery/tree/main/components/bsx/Offer

I've found StyleGuide from vuejs.org, maybe we can adapt some of them?

• https://v2.vuejs.org/v2/style-guide/?redirect=true

[yangwao]

recording can be downloaded here
https://discord.com/channels/840514076538830888/840516776324497458/1002601472569118780