https://github.com/suissa/frontend-driven-development

Vamos do front até o banco e vice-versa
https://github.com/suissa/frontend-driven-development

Last synced: about 1 month ago
JSON representation

Vamos do front até o banco e vice-versa

• Host: GitHub
• URL: https://github.com/suissa/frontend-driven-development
• Owner: suissa
• Created: 2016-10-30T18:36:27.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-16T06:18:32.000Z (about 8 years ago)
• Last Synced: 2024-10-30T01:46:37.030Z (3 months ago)
• Size: 9.77 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# frontend driven development

Vamos do front até o banco e vice-versa.

Irei mostrar como tirar um padrão a partir do frontend até o banco de dados implementando uma API REST de CRUD, ou seja, iremos gerar 

as 4 funções básicas para um módulo/molécula que será nosso `form` e seus `input`s serão nossos componentes/átomos.  

Para isso iremos mapear os tipos de dados entre as 2 partes e depois criar 1 JSON de configuração para esse módulo, para que o mesmo possa ser gerado para qualquer framework.

Por exemplo o mesmo componente de CPF poderá ser gerado tanto para os frameworks de frontend (ng1, ng2, vue, react, etc) como para os "ORMs" de banco (mongoose, sequelize, bookshelf).

E nesse meio de campo iremos gerar os *Services, Controllers e Componentes* que consumirão a API REST do backend, a qual terá todas as funcionalidades do CRUD chegando até o seu banco de dados escolhido.

![whaaat](https://media.giphy.com/media/3otPoUbZNPjqWefNgQ/giphy.gif)

## Tipos de dados

Como iremos criar um padrão da *View* até o banco e reutilizando o máximo possível de código precisaremos criar uma ponte entre os `inputs` e os campos no banco de dados, vamos pegar alguns átomos de base:

```js

const AtomName = 'CPF';

module.exports = {

  type: String

, validate: require('./../_hadrons/'+AtomName.toLowerCase()+'MongooseValidate')

, default: '04864713901'

, required: true

}

```

Nesse caso nós temos 4 informações:

- name: 'cpf';

- type: String;

- validate: { validator: function, message: String}

- default: '04864713901'

Então podemos converter elas da seguinte forma:

```html

```

```js

const validate = require('atom-cpf-validate')

const atom = document.querySelector('.atom-cpf')

atom.addEventListener('blur', validate)

```

Agora vamos pensar em como criar um JSON que contenha essas informações para ser a configuração do nosso átomo:

```js

const name = 'cpf'

const type = String

const event = 'blur'

const validate = require('atom-cpf-validate')

config = {

  name,

  type,

  validator: {

    validate,

    event

  }

}

```

Porém ele ainda está incompleto pois se quisermos que esse input inicie desabilitado não temos como definir isso, então podemos adicionar uma propriedade `state` a qual também será uma classe no componente no *Frontend*.

Na minha metodologia eu uso apenas **2 classes** por elemento, uma para identificar o componente e outra para o seu estado, a classe de estado é única que pode ser modificada mediante a mudança de estado do componente, por exemplo: `validate-success` e `validate-error`.

Então deixaremos nossa configuração assim:

```js

const name = 'cpf'

const type = String

const event = 'blur'

const validate = require('atom-cpf-validate')

const state = 'enable'

config = {

  name,

  type,

  state,

  validator: {

    validate,

    event

  }

}

```