DEV Community: Rafael Bastiansch

Library based on Vuetify, how we use and tips to avoid performance issues

Rafael Bastiansch — Thu, 01 Jul 2021 00:52:28 +0000

Introduction

How to build a Design System inside a startup?
I'm Rafael Bastiansch, Front End Tech Leader responsible for this architeture and I'm going to show how we build a design system at Logcomex and help you to build similar tool for your personal projects or job, I gonna show our stack today and why our library was build this way.
To make you feel confortable with our business, I'll explain our projects at Logcomex:

the biggest one is a monolithic type, that sharing different purposes.
new projects are created with Nuxt.

We wanted to create our new projects with same design but it was in separated repositories, so we had to reuse our basics components. The idea was to create a library that shares our pieces of code.

First version with rollup

The first version was build with rollup, but I have some problems just after we started. Using complex components from vuetify and separated scss, it started to generate some errors to compile the library. So I had to figure out what was happening and, after some POCs I tried Vue-CLI and it works like a charm. So due to lack of time we decided to keep using it.

Version with vue-cli

Vue-CLI have some good features built-in to use, build vue components to library is one of those, at that time as initial development and needed to build something fast was a good choice.

To create a library with Vue-CLI, we init a project following the instructions and added some configurations to vue.config.js

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "~": path.resolve(__dirname)
      }
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/_main.scss";
        `
      }
    }
  }
}

and add the script to package.json to build our lib

...
"scripts": {
    "build": "vue-cli-service build --target lib src/index.js",
},
...

The structure of our lib have src/index.js file, it's where we imported all my components and prepare them to be imported when another project is using this package. You can check more about this here: Vue cookbook

export * from './components/inputs'
import * as inputs from './components/inputs'


const components = {
    ...inputs,
}

export function install (Vue) {
    for (const [name, component] of Object.entries(components)) {
        Vue.component(name, component)
    }
}

const plugin = {
  install
}

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  // eslint-disable-next-line no-undef
  GlobalVue = global.Vue
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

export default plugin;

Basically, these are all the files that you will need to create/modify to start your own library with Vue-CLI.

Current version and problems

We're running our current version build using Vue-CLI for almost one year, it keeps the same way that was made and up to now it is good for us... but we have some improvements to do. We did this thinking in our current projects, so we have to keep them compatible.
As we found some errors on consuming it we keep external libraries building within our package and that's a problem, the size of package increase as we add new features that requires external installations. Currently its size is 219KB zipped.

New version with some fixes

So right now I'm working to improve this, first of all I set all the third packages as external, this reduced the size of our old file to 58KB zipped, almost 4 times less than before. To achieve this you have to set libraries as externals in vue.config.js inside configureWebpack key and it won't compile anymore.

...
externals: [
  'dayjs',
  'moment',
  'ramda',
  'sortablejs'
],
...

and migrate some dependencies to devDependencies(sorry, my mistake). It's the current changes I'm doing, after we use this new build to production we gonna see if it will be enough or if we will see more improvement to our lib.

If you want to check it out and use or contribute, you will be more than welcomed.
Project github
New branch with improvement

Biblioteca baseada no Vuetify, como nós usamos e dicas para evitar problemas de performance

Rafael Bastiansch — Thu, 01 Jul 2021 00:52:14 +0000

Version in English

Introdução

Como construir um Design System dentro de uma startup?
Sou Rafael Bastiansch, Tech Lead de Frontend responsável por esta arquitetura e vou mostrar como construímos um design system na Logcomex e ajudá-lo a construir uma ferramenta semelhante para seus projetos pessoais ou no trabalho, vou mostrar nossa stack hoje e porque nossa biblioteca foi construída desta forma.

Para que você se sinta confortável com nosso negócio, vou explicar nossos projetos na Logcomex:

o maior é um monolítico, que compartilha finalidades diferentes.
novos projetos são criados com Nuxt.

Queríamos criar nossos novos projetos com o mesmo design, mas em repositórios separados, então tivemos que reutilizar nossos componentes básicos. A ideia foi criar uma biblioteca que compartilhasse nossos códigos.

Nossa primeira versão com rollup

A primeira versão foi construída com rollup, mas tive alguns problemas logo no inicio. Usando componentes complexos de vuetify e scss separados, começou a gerar alguns erros para compilar a biblioteca. Então tive que descobrir o que estava acontecendo e, depois de algumas POCs, experimentei o Vue-CLI e funcionou perfeitamente. Por falta de tempo decidimos continuar a usá-lo.

Versão com Vue-CLI

Vue-CLI tem alguns bons recursos embutidos para usar, gerar componentes Vue para biblioteca é um deles, naquela época como desenvolvimento inicial e necessário construir algo rápido foi uma boa escolha.

Para criar uma biblioteca com Vue-CLI, iniciamos um projeto seguindo as instruções e adicionamos algumas configurações ao vue.config.js

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "~": path.resolve(__dirname)
      }
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/assets/scss/_main.scss";
        `
      }
    }
  }
}

e adicionar o script para o package.json para buildar nossa lib

...
"scripts": {
    "build": "vue-cli-service build --target lib src/index.js",
},
...

A estrutura de nossa lib possui o arquivo src/index.js, é onde importamos todos os meus componentes e os preparamos para serem importados quando outro projeto estiver usando este pacote. Você pode verificar mais sobre isso aqui: Vue cookbook

export * from './components/inputs'
import * as inputs from './components/inputs'


const components = {
    ...inputs,
}

export function install (Vue) {
    for (const [name, component] of Object.entries(components)) {
        Vue.component(name, component)
    }
}

const plugin = {
  install
}

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  // eslint-disable-next-line no-undef
  GlobalVue = global.Vue
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

export default plugin;

Basicamente, esses são todos os arquivos que você precisará para criar/modificar sua própria biblioteca com Vue-CLI.

Versão atual e problemas

Estamos rodando nossa versão atual de build usando o Vue-CLI por quase um ano, continua da mesma forma que foi feita e até hoje é bom para nós... mas temos algumas melhorias a fazer. Fizemos isso pensando em nossos projetos atuais, então temos que mantê-los compatíveis.

Como encontramos alguns erros ao consumir, mantemos as bibliotecas externas construídas em nosso pacote e isso é um problema, o tamanho do pacote aumenta à medida que adicionamos novos recursos que requerem instalações externas. Atualmente, o tamanho é 219KB compactado.

Nova versão com algumas correções

Agora estou trabalhando para melhorar isso, primeiro de tudo eu defini todos os pacotes de terceiros como externos, isso reduziu o tamanho do nosso arquivo antigo para 58KB compactado, quase 4 vezes menor do que antes. Para conseguir isso, você deve definir as bibliotecas como externals no vue.config.js dentro da chave configureWebpack e ele não irá mais compilar junto.

...
externals: [
  'dayjs',
  'moment',
  'ramda',
  'sortablejs'
],
...

e migrar algumas dependências para devDependencies(desculpe, erro meu). Essas são as alterações que estou fazendo, depois de usarmos esse novo build para produção, veremos se será suficiente ou se iremos procurar mais melhorias em nossa biblioteca.

Se você quiser dar uma olhada e usar ou contribuir, será mais do que bem-vindo.
Projeto no github
Nova branch com as melhorias