Estrutura de uma aplicação usando IONIC Framework

Fonte (Toptal)

Ionic Capacitor x Ionic Cordova

O cordova é responsável por usar os recursos nativos do dispositivo móvel, e o capacitor faz a mesma coisa. Porém ele possui alguns benefícios, e umas das principais é que com o capacitor o gerenciamento de código fica mais simples, bastando rodando o npm install, além de dar um suporte para a maioria dos plugins do cordova, além de tudo o capacitor promete melhor perfomance

Benefícios do capacitor

  • Modelo de plugins simples, para criar plugins cada vez mais customizáveis.
  • Adoção do swift do ios.
  • Biblioteca rica de funcionalidades nativas com simples APIs.
  • Plugins gerenciados pelo npm install.
  • Sem cli global, assim podemos ter uma configuração diferente para cada projeto.
  • Suporte a Progressive Web 100% de compartilhamento de código, fazendo uso das mesmas APIs usadas, tanto nativamente como na web.

Estrutura de arquivos

e2e — Pasta onde ficam os testes unitários do projeto

node_modules — Pasta onde ficam os modulos do node que já vem com o projeto padrão e outros que podem ser instalados de acordo com a sua necessidade (ex: validador de cpf e cnpf, modulo de datepicker, gps, câmera)

Src — pasta onde vamos tralhar 90% do tempo. Dentro dessa pasta temos as pastas app, assets, enviroment e theme.

App — O componente principal da aplicação fica nela e também as pastas da páginas do aplicativo, no exemplo acima temos as páginas home e list

Assets — pasta que guarda as imagens que serão utilizadas no app

Theme — Guarda o estilo que são globais da aplicação (paleta de cores, fontes etc)

Image for post