Boilerplate definitivo para projetos Eletron.js com React, TypeScript, Clean Architecture e Atomic Design é um ponto de partida completo para o desenvolvimento de aplicações eletrônicas modernas e escaláveis. Ele combina várias práticas e padrões consagrados, fornecendo uma estrutura sólida e flexível para a criação de projetos web robustos.
Este boilerplate utiliza o React, uma biblioteca JavaScript de código aberto para construir interfaces de usuário. O React é amplamente adotado na indústria de desenvolvimento web devido à sua eficiência, modularidade e reutilização de componentes. Além disso, ele oferece suporte nativo para o TypeScript, uma linguagem de programação tipada que fornece uma camada adicional de segurança e produtividade ao desenvolver aplicativos.
Está estruturado seguindo os princípios do Clean Architecture (Arquitetura Limpa). Essa abordagem divide o projeto em camadas independentes, permitindo a separação clara das responsabilidades e facilitando a manutenção, testabilidade e evolução do código.
Além disso, ele inclui configurações de ferramentas comumente utilizadas, como bundlers (por exemplo, Webpack), transpiladores (Babel), test runners (Jest) e gerenciadores de pacotes (npm ou Yarn), bem como um conjunto inicial de testes e exemplos.
A estrutura de pasta não segue o padrão do Clean Architecture de forma rigorosa (apenas o utiliza como base para incorporar junto a estrutura de Atomic Desing para construção do frontend da aplicação). No entanto, pode-se notar algumas semelhanças com os conceitos do Clean Architecture.
No Clean Architecture, a ideia principal é ter uma separação clara de responsabilidades e dependências, com as camadas mais internas contendo as regras de negócio e as camadas externas lidando com os detalhes de infraestrutura. Vamos analisar a estrutura de pasta fornecida:
-
A pasta "src" parece contém a maior parte do código-fonte da aplicação. Dentro dela, existem subpastas como "application" e "main", que podem indicar uma divisão entre camadas.
-
A pasta "application" contém subpastas como "factories", "decorators", "http" e "validation". Essa estrutura mostra que as responsabilidades relacionadas à lógica de aplicação estão sendo agrupadas nessa pasta.
-
A pasta "main" contém os detalhes de implementação, como "adapters", "builders", "composites", "config" e assim por diante. Isso indica uma camada externa que lida com a infraestrutura e os detalhes de implementação específicos da plataforma.
É importante ressaltar que o Clean Architecture é mais um conjunto de princípios e diretrizes do que uma estrutura de pasta rígida, sendo ele adaptável e podendo variar dependendo das necessidades e preferências de uma equipe ou projeto específico. Segue abaixo uma estrutura de pasta sugerida neste template para o projeto:
├─── electron
├─── public
│ ├─── assets
│ │ ├─── icons
│ │ ├─── images
│ │ ├─── sounds
├─── src
│ ├─── application
│ │ ├─── factories
│ │ │ ├─── cache
│ │ │ ├─── decorators
│ │ │ ├─── http
│ │ │ ├─── validation
│ │ │ │ ├─── errors
│ │ │ │ ├─── protocols
│ │ │ │ ├─── validators
│ ├─── main
│ │ ├─── adapters
│ │ ├─── builders
│ │ ├─── composites
│ │ ├─── adapters
│ │ ├─── config
│ │ ├─── presentation
│ │ │ ├─── components
│ │ │ │ ├─── atoms
│ │ │ │ ├─── molecules
│ │ │ │ ├─── organisms
│ │ │ │ ├─── template
│ │ │ ├─── hooks
│ │ │ ├─── pages
│ │ │ ├─── styles
│ │ ├─── utils
│ │ │ ├─── design
├─── tests
├─── webpack
Para executar a aplicação, é necessário ter o Node.js instalado na máquina. Para instalar o Node.js, basta acessar o site oficial e seguir as instruções de instalação (Na criação desse boilerplate, foi utilizado a versão v18.16.0). Após a instalação, basta executar o comando abaixo para instalar as dependências do projeto:
npm install
## caso esteja utilizando o yarn, basta executar o comando abaixo:
yarn installDependencias instaladas, basta executar o comando abaixo para iniciar a aplicação:
npm start
## caso esteja utilizando o yarn, basta executar o comando abaixo:
yarn startE o webpack irá iniciar a aplicação em modo de desenvolvimento, abrindo uma janela do Electron com a aplicação em execução, apartir desse momento toda modificação feita no código fonte será refletida na aplicação em tempo real.