Análise da prototipação em código utilizando framework javascript de componetização

Introdução

Com base na nova metodologia de trabalho inspirada no design sprint. Foi notado a necessidade da utilização de ferramentas que possibilitem a extração do melhor da interação entre desenvolvedores e designers de forma a proverem maior velocidade e organização para as validações das ideias desenvolvidas. A partir disso foi questionado se a utilização de frameworks de componentização se encaixaria bem nesta fase de prototipação de ideias. Motivados por este desafio, foi proposta a análise de um framework javascript tomando como base esse cenário.

A análise se baseará em 3 principais etapas:

• Componetização dos elementos desenvolvidos: componetizar todas ideias prototipadas até o momento.
• Capacitação básica dos membros da equipe: explicar como será o workflow de desenvolvimento.
• Análise dos resultados: após duas sprints, será analisado o resultado obtido verificando se com base nas métricas definidas essa escolha atrapalhou ou ajudou e em quais aspectos.

Framework escolhido

Para a escolha do framework javascript não foi feita nenhuma análise profunda a respeito de qual seria a melhor ferramenta. Visto que o foco desta análise é a respeito da utilização de componentes no desenvolvimento de prototipações em código. A escolha foi baseada na facilidade de implementação de componentes e na sintaxe limpa que o framework oferece. Sendo assim o framework escolhido para a análise foi o: Vuejs v2.0.

Execução do projeto

Na raiz do projeto devemos instalar todas as dependências do projeto.

    // Instalação via yarn
    yarn install
    // Execução via yarn
    yarn run dev
    // Instalação via npm
    npm install
    // Execução via npm
    npm run dev

Métricas para indicar desempenho

Os parâmetros que estão sendo analizados são:

• Esta proposta possibilitou a melhor organização dos protótipos desenvolvidos?
• Esta proposta facilitou a prototipação em código do posicionamento de elementos na tela tanto para a versão desktop quanto para a versão para mobile?
• Esta proposta diminuiu esforços quanto a duplicação de código?
• Esta proposta possibilitou a prototipação em código de várias versões da mesma ideia de forma ágil?

Organização dos protótipos desenvolvidos.

Para garantir a organização dos protótipos desenvolvidos foi adotado a seguinte estrutura:

• ~/src/pages: contém todas as páginas do projeto, cada página representa uma ou mais ideias de prototipação.
• ~/src/components: contém todos os componentes desenvolvidos que compõem as páginas.
• ~/src/routes/index.js: contém todas as rotas da aplicação.
• ~/src/App.vue: representa o principal componente da aplicação, na qual todos as outras páginas serão renderizadas nesta. É também utilizada como o template básico das páginas.

Criação de componentes

Vamos criar um simples componente. Primeiramente, deve se acessar o diretório ~/src/components na qual, devemos criar todos os componentes que irão compor as páginas. Dentro deste diretório, criaremos o arquivo HelloWorld.vue. Desta forma, notamos 3 principais informações, todos os arquivos relacionados aos componentes devem estar com a primeira letra maíscula obedecendo o padrão de Camel Case e a extensão de um componente é .vue.

Após o arquivo ~/src/components/HelloWorld.vue ser criado iremos escrever no arquivo as estrutura básica de como o Vuejs define um componente.

<template>
    <!-- Código HTML -->
</template>

<script>
    // Código Javascript
</script>

<style>
    /* Código css */
</style>

Agora vamos inserir um texto contendo o conteúdo do nosso componente:

<template>
    <!--Note que todos os elementos HTML devem estar dentro de uma tag HTML, mas é importante que estejam dentro de um elemento. Caso contrário o Vue reclamará informando que deve ser retornado apenas um elemento HTML-->
   <div class="Hello-world">
        <h1>Hello World</h1>
        <p>Este é um componente no Vuejs</p>
   <div>
</template>

<script>
    // Por convenção devemos exportar o nome do componente.
    export default {
        name: 'HelloWorld',
    }
</script>

<style>
    /* Código css */
</style>

Agora devemos importar o nosso componente na página que queremos que o mesmo seja exibido.

<template>
    <div id="app">
        <!--Tag representando o componente HelloWorld-->
        <hello-world/>
        <router-view/>
    </div>
</template>

<script>
// É assim que importamos o componente, o '@' representa a raiz do projeto.
import HelloWorld from '@/components/HelloWorld'

export default {
    name: 'App',
    components: {
        // hello-world é o nome da tag que utilizaremos dentro do nosso app.
        // HelloWorld é o componente que importamos
        'hello-world': HelloWorld
    }
}
</script>

<style>
</style>

Pronto! assim criamos o nosso primeiro componente e importamos ele dentro de um outro componente.

Criação de uma página

Uma página nada mais é do que um componente que é composto por outros componentes. Desta forma o tutorial de criação de um componente se aplica da mesma forma a criação da página. Havendo somente duas diferenças: haverá vários componentes dentro da página e devemos importar a página no ~/src/router/index.js e criar uma nova rota para conseguirmos acessa la. Então vamos criar uma rota para o nosso componente HelloWorld.vue, vamos considerar agora que este componente é uma página portanto a partir da agora este componente se encontra dentro do diretório ~/src/pages/.

Vamos importar o componente HelloWorld.vue no arquivo ~/src/router/index.js.

import Vue from 'vue'
import Router from 'vue-router'
// Importando a página HelloWorld
import HelloWorld from '@/pages/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      //Caminho que acessaremos pela url
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

Desta forma, é só executar o projeto. E acessar a raíz do projeto.

Resultado