Good practices for build web components

A guide to help you remember important things when creating an web component xD

Note: The best practices presented here are about polymer, but you can follow these recommendations for any Web Components or other type of component based on Libraries or frameworks (like React or any other).

Tip: For open source projects see the Open Source Checklist.

Stack

Task manager: Gulp
Template engine: Pug
CSS preprocessor: Stylus
JS transpiler: Babel

Rodando o projeto localmente

1 - Prepare o ambiente:

$ npm install -g gulp-cli

2 - Clone o projeto e installe as dependêcias:

$ git clone https://github.com/LarissaAbreu/web-component-good-practices.git
$ cd web-component-good-practices
$ npm install

3 - Rode o servidor estático com livereload:

$ gulp server

Estrutura de pastas

.
  ├── README.md
  ├── LICENSE.md
  ├── CONTRIBUTING.md
  ├── out/
  ├── src/
  |   ├── assets/
  |   |   └── styles/
  |   |       └── style.styl
  |   ├── partials/
  |   |   └── analytics.html
  |   ├── layouts/
  |   |   └── default.pug
  |   └── index.pug
  ├── gulpfile.js
  ├── package.json
  └── .gitignore

Tarefas automatizadas

$ gulp build: Compila, concatena e minifica todos os arquivos.
$ gulp server: Escuta os arquivos buildados e inicia um servidor estático.
$ gulp deploy: Faz um deploy para a branch master.

Versionamento

Para manter uma melhor organização, seguiremos as diretrizes do Versionamento Semântico 2.0.0.

Contribuição

Veja no guia os próximos passos do projeto ;)
Quer contrinuir? Siga essas recomendações.

LarissaAbreu/web-components-good-practices