Angular Starter Boilerplate

Um novo ponto de partida

> Blog > Boas praticas Angular Starter Boilerplate - Um novo ponto de partida

E pra começar o ano de 2017 com pé direito, fico feliz em anunciar pra comunidade meu boilerplate de angular 2, que estou utilizando em todos meus projetos atualmente. Apesar da nova versão do framework já vir com uma CLI sensacional, que tem o comando new para começar novos projetos angular, eu particularmente não gosto do style, estrutura e organização que a galera de Mountain View vem utilizando.

De uns meses pra cá, venho trabalhando intensamente com Ionic 2 (desde o alpha) o que me abriu muito a cabeça pra algumas coisas. Quando o Angular 2 entrou definitivamente em produção pude perceber claramente algumas diferenças, o que me motivou a criar este novo boilerplate.

Motivação

Vou dar um exemplo sobre organização

// começando um novo projeto angular pelo CLI
// github.com/angular/angular-cli
$ ng new MyNewProject
$ cd MyNewProject

Resumidamente o comando new irá produzir um layout de diretório parecido com este abaixo

app/                   
  actions/              // nao sei pra que isso
      index.ts
  components/           // os cara soca todos componentes no mesmo lugar        
      Footer.html      
      Footer.spec.ts
      Footer.ts
      Header.html
      Header.spec.ts
      Header.ts
  constants/            // interessante ter um lugar pra constantes
  containers/           // what the fuck is this?
  reducers/             // wtf 2
  index.js
  routes.ts

Além de tudo estar no mesmo nível de diretório app/, repare que na pasta components/ eles simplesmente socam todos os arquivos no mesmo lugar, se você levar em consideração que vai ter uns 10 componentes, e cada componente possui em média 3 arquivos, só ai já são 30 coisas listando na sua tela enquanto ta programando. Não seria muito melhor criar uma sub-pasta para cada componente e meter os 3 arquivos lá dentro?

Uma questão

Pra que diabos usar CaseSensitive no nome dos arquivos plmds? isso aqui virou java agora? este tipo de prática pode gerar problemas se você tiver gente na sua equipe que utiliza sistemas operacionais distintos, linux based junto com windows.

Pensando nisso e outras questões, achei melhor criar minha própria organização que se aproxima bastante do style que a galera do Ionic utiliza. Muito mais simples e objetivo.

O modelo de organização utilizado pelo meu boilerplate seria

app/                   
    app.module.ts
    app.scss           // estilos geral da app, importação e customização via SASS
    main.ts
    routes.ts
assets/
bin/                   // para os NPM scripts
components/            // tudo deve ser quebrado em componentes reativos
    footer/
      footer.html
      footer.scss      
      footer.spec.ts
      footer.ts
    header/
      header.html
      header.scss      
      header.spec.ts
      header.ts   
configs/
constants/
pages/                 // cada rota deve apontar para uma pagina
      home.ts
      home.html
      home.scss
pipes/                 // equivalente aos filters do angular 1.x     
directives/            // mesmo esquema de sub-pasta dos components (se necessário)    
providers/             // equivalente aos services/factories do angular 1.x  
    events.ts          // abstrai a ideia de eventos do Ionic
    storage.ts         // abstrai o storage do browser (local/session)
theme                  // layout em geral do tema trabalhado
    layout.scss
index.js
index.html

Mas atenção

Seguindo esta minha idéia evite de criar vários subníveis de pastas. Isto acaba gerando uma maior dificuldade na hora de importar as dependencias no cabeçalho dos seus arquivos .ts. Acaba que você nunca sabe direito em que nivel está, e tende a ficar na tentativa e erro com ../../

Instalando o boilerplate

git clone https://github.com/stewwan/angular-starter-boilerplate && cd angular-starter-boilerplate && npm install

O que está incluso

Meu starter é basicamente o projeto gerado pelo comando new do Angular-CLI com pequenas alterações no layout de diretórios, tarefas (gulp) e remoção de coisas inúteis. Além da adição dos 2 providers listados acima, storage e events.

Também já adicionei alguns pacotes de terceiros para resolver alguns problemas comuns, como

  • angulartics2 - habilita o google analytics no angular
  • bulma - biblioteca pure css bastante interessante para trabalhar o visual do frontend
  • firebase - SDK do cara mais popular do momento em termos de BaaS (Backend as a Service)
  • jquery - porque não ?
  • lodash - porque não ?
  • moment - pra trabalhar com datas
  • ng2-meta - pra trabalhar o SEO (metas) com angular2 facilmente

Dentre inúmeros outros pacotes de suporte ao desenvolvimento. Se você não quiser utilizar algum destes pacotes, basta remover do arquivo package.json e de app/app.module.ts. Algumas coisas referente a aplicação em si precisam ser inicializadas por lá. ex: angulartics

Gulp 4

O starter já vem com algumas das principais tarefas. Pra ver todas elas, basta executar

$ gulp --tasks

As principais são

  • gulp serve - serve a aplicação localmente para desenvolvimento com auto-reload
  • gulp serve:dist - serve em modo de produção (buildada)
  • gulp build - builda para produção e coloca o resultado na pasta dist
  • gulp test - executa os testes unitários
  • gulp test:auto - executa os testes com auto-reload

NPM Scripts

Ao invés de sair criando tarefas Gulp pra tudo, as vezes um simples script NPM resolve o nosso problema. Para ilustrar este cenário estou incluindo um comando em NPM Script que fará todo o processo de build e deploy no github pages. É com este comando que eu hospedo a build deste starter.

Antes de usar este script

Certifique-se de criar seu repositório e alterar a origin do github no arquivo release, localizado na pasta bin/release.sh

Pra rodar o comando, basta um

$ npm run release

Até aqui ele vai buildar e subir o resultado para a branch gh-pages do repositório que você definiu anteriormente. Mas para tudo funcionar corretamente você ainda terá que alterar o arquivo CNAME para o seu domínio, em seguida ir até o seu registro de DNS e criar uma entrada CNAME apontando para seu_usuario_no_github.github.io.

Se tudo der certo, você terá um resultado como este

http://angular-starter-boilerplate.stewan.io

Problemas de permissão?

Basta executar $ chmod +x ./bin/release.sh

E as rotas?

Com angularjs sempre gostei do ui.router (lib de rotas criada pela própria comunidade) por ser o mais usado, e também porque já vi (em algum lugar) da própria documentação do angularjs, recomendações para o ui.router. Já agora na versão atual do angular, parece que a galera do Google resolveu dar uma atenção especial pra esta questão de rotas e fizeram um esquema de roteamento próprio. Sendo assim estou utilizando o @angular/router

Produção

Atualmente este meu starter seed de angular2 está em produção no site e documentação do meu produto Firetask, e também em alguns freelas que fiz pra fora.

Repositório

github.com/stewwan/angular-starter-boilerplate

Conclusão

Agora fica muito mais fácil trabalhar e inclusive meu starter já vem de brinde com uma ideia muito bacana do Ionic, os "events". Como diz a galera reativa, "props down events up". Você só precisa importar a classe Events no cabeçalho e ser feliz, utilizando do mesmo jeito que faria no Ionic.

// exemplo
import { Events } from '../../providers/events';
class MyNewClass {
    constructor(public events: Events) {}
    myNewMethod() {
        // to subscribe an event
        this.events.subscribe('ThatEvent', (something) => {
            // do whatever with something, when ThatEvent happen
            console.log(something);
        })

       // to fire an event
       this.events.publish('ThatEvent', { something: 'is beautiful' })
    }
}

Espero que tenham gostado deste meu primeiro post técnico após minha volta a ativa. Deixe seu comentário (#

Cheers,

Ebook Angular 4

Aprenda o novo angular praticando


Download PDF

Experiências "boas" e "ruins", estou compartilhando tudo em minha jornada com

Angular, Ionic e Firebase

Aprenda desenvolver melhor

Últimas do blog

Continue Lendo

Voltando à ativa Novas metas e objetivos

Ionic 2 versão final Análise geral