DX Focused

DX => Developer Experience

Frameworks are nice, they help you write more maintainable and less code. In the long run, developer experience does matter.

Configurable Array

Assume you have a list as shown below and you want to just change the size of the avatar/icon in the list.

Electronics
Fashion
Decor
Sports

With other frameworks you certainly have to repeat the markup:

vue

<script lang="ts" setup>
const items = [
  {
    title: 'Electronics',
    avatarProps: { icon: 'i-bx-mobile-alt' },
  },
  {
    title: 'Fashion',
    avatarProps: { icon: 'i-bx-closet' },
  },
  {
    title: 'Decor',
    avatarProps: { icon: 'i-bx-home' },
  },
  {
    title: 'Sports',
    avatarProps: { icon: 'i-bx-football' },
  },
]
</script>

<template>
  <List>
    <ListItem v-for="item in items" :key="item.title">
        <Avatar
          icon="item.avatarProps.icon"
          size="small"
        >
        </Avatar>
        <ListItemTitle>{{ item.title }}</ListItemTitle>
    </ListItem>
  </List>
</template>

With Anu it is so simple

diff

- icon: 'i-bx-football'
+ icon: ['i-bx-mobile-alt', 'text-2xl']

vue

<script lang="ts" setup>
const items = [
  {
    title: 'Electronics',
    avatarProps: { icon: ['i-bx-mobile-alt', 'size-2xl'] },
  },
  {
    title: 'Fashion',
    avatarProps: { icon: ['i-bx-closet', 'size-2xl'] },
  },
  {
    title: 'Decor',
    avatarProps: { icon: ['i-bx-home', 'size-2xl'] },
  },
  {
    title: 'Sports',
    avatarProps: { icon: ['i-bx-football', 'size-2xl'] },
  },
]
</script>

<template>
  <div class="cards-demo-container">
    <ACard>
        <AList
          :items="items"
          icon-append
          class="[--a-list-item-gap:1rem]"
        />
    </ACard>
  </div>
</template>

Atomic

With Anu's atomic behavior, you can pass the existing props like title, subtitle, etc to certain components creating UI quickly without extra hassle.

The code below will create a drawer with title & subtitle. This is because ADrawer uses ACard component that in turns uses ATypography component.

vue

<template>
  <ADialog
    v-model="isDialogShown"
    title="Dialog title"
    subtitle="Chocolate cake tiramisu donut"
  />
</template>

Easy Customization On The Fly

As Anu is built on top of utility classes, it has edge over the frameworks that uses SCSS or don't have utility classes.

Thanks to utility classes at some point if you want to change anything regarding the component once, only then can utility classes easily let you perform changes.

vue

<template>
  <ABtn class="px-6" >
</template>

This customization is not limited to top level component. You can use selectors with utility classes to customize the nested component. e.g. children-[.a-card]-rounded-3xl

DX Focused ​

Configurable Array ​

Atomic ​

Easy Customization On The Fly ​

DX Focused

Configurable Array

Atomic

Easy Customization On The Fly